:root{
  --p:#0ea5e9;--pd:#0369a1;--p50:#e0f2fe;--p25:#f0f9ff;
  --teal:#14b8a6;--tg:#f0fdfa;
  --green:#22c55e;--gg:#f0fdf4;--gd:#15803d;
  --red:#ef4444;--rg:#fef2f2;--rd:#b91c1c;
  --amber:#f59e0b;--ag:#fffbeb;--ad:#b45309;
  --bg:#f1f8fd;--card:#fff;
  --tx:#0c1e2e;--soft:#3d5a73;--muted:#7a9bb5;
  --br:#d4e9f7;--brl:#eaf4fb;
  --sbw:244px;
  --sky:#0ea5e9;
  /* Landing Light Theme */
  --l-bg:#ffffff;--l-bg2:#f0f9ff;--l-bg3:#e0f2fe;
  --l-sky:#0ea5e9;--l-sky2:#0284c7;--l-sky3:#38bdf8;
  --l-tx:#0c1e2e;--l-soft:#1e3a5f;--l-muted:#64899e;
  --l-border:#bae6fd;--l-border2:#e0f2fe;
  /* Alias fixes */
  --text-primary:#0c1e2e;--lb:#3b82f6;
}

/* ══ [FIX v43] ACCESSIBILITY ══ */
.skip-link{position:absolute;top:-40px;left:0;background:var(--p);color:#fff;padding:8px 16px;z-index:99999;font-weight:700;border-radius:0 0 8px 0;transition:.2s}
.skip-link:focus{top:0}
*:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
/* ══ UTILITY CLASSES — replace common inline styles ══ */
.hidden{display:none}
.flex{display:flex}
.grid{display:grid}
.num{text-align:right;font-variant-numeric:tabular-nums}
/* Layout */
.d-flex{display:flex}.d-grid{display:grid}
.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}
/* Spacing */
.m0{margin:0}.mb0{margin-bottom:0}
.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}
.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.w-full{width:100%}
/* Typography */
.fs10{font-size:10px}.fs11{font-size:11px}.fs12{font-size:12px}
.fs13{font-size:13px}.fs14{font-size:14px}.fs16{font-size:16px}
.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.ta-c{text-align:center}.ta-r{text-align:right}
.uppercase{text-transform:uppercase}
/* Color semantic — adapts to dark mode via CSS vars */
.c-tx{color:var(--tx)}.c-soft{color:var(--soft)}.c-muted{color:var(--muted)}
.c-p{color:var(--p)}.c-pd{color:var(--pd)}
.c-green{color:var(--green)}.c-gd{color:var(--gd)}
.c-red{color:var(--red)}.c-rd{color:var(--rd)}
.c-amber{color:var(--amber)}.c-ad{color:var(--ad)}
/* Background semantic — adapts to dark mode */
.bg-card{background:var(--card)}.bg-bg{background:var(--bg)}
.bg-p25{background:var(--p25)}.bg-p50{background:var(--p50)}
.bg-gg{background:var(--gg)}.bg-rg{background:var(--rg)}.bg-ag{background:var(--ag)}
/* Section label — repeated pattern */
.sec-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:4px;letter-spacing:.5px}
/* Grid 2 cols */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Center flex row */
.flex-center{display:flex;justify-content:center;margin-bottom:14px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--l-bg);color:var(--l-tx);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#view-landing{display:block}
#app-loader{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s}
#app-loader.hide{opacity:0;pointer-events:none}
#app-loader .al-spinner{width:40px;height:40px;border:3px solid #e0f2fe;border-top-color:#0ea5e9;border-radius:50%;animation:alSpin .8s linear infinite}
@keyframes alSpin{to{transform:rotate(360deg)}}
#app-loader .al-text{margin-top:14px;font-size:13px;color:#64899e;font-weight:600}
#view-app{display:none;flex-direction:row;background:var(--bg)}

/* ═══════════ LANDING NAVBAR ═══════════ */
.lnav{
  position:sticky;top:0;z-index:500;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--l-border2);
  height:68px;
  padding:0 clamp(20px,5vw,80px);
  display:flex;align-items:center;justify-content:space-between;
  animation:navSlide .5s ease forwards;
  box-shadow:0 1px 20px rgba(14,165,233,.06);
}
@keyframes navSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.lnav-brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.lnav-logo{
  width:38px;height:38px;
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c);
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:19px;
  box-shadow:0 4px 16px rgba(14,165,233,.28);
  flex-shrink:0;overflow:hidden;
  transition:.2s;
}
.lnav-logo:hover{transform:rotate(-5deg) scale(1.08)}
.lnav-name{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:18px;color:var(--l-tx);letter-spacing:-.5px}
.lnav-name span{color:var(--l-sky)}
/* ── COOL LOGO TEXT ── */
.sc-logo{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.5px;display:inline-flex;align-items:baseline;gap:5px;}
.sc-logo .sc-sahl{background:linear-gradient(135deg,#38bdf8,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sc-logo .sc-compta{background:linear-gradient(135deg,#0ea5e9,#0369a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lnav-sc-logo{font-size:21px;}
.side-sc-logo{font-size:17px;}
.lnav-links{display:flex;align-items:center;gap:3px}
.lnav-link{
  padding:7px 15px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--l-soft);cursor:pointer;transition:.15s;border:none;background:none;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.lnav-link:hover{background:var(--l-bg3);color:var(--l-sky)}
a.lnav-link{text-decoration:none;display:inline-flex;align-items:center}
.lnav-cta{
  background:linear-gradient(135deg,var(--l-sky),#0284c7);
  color:#fff;
  padding:9px 22px;border-radius:10px;
  font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:13.5px;;
  cursor:pointer;border:none;transition:.2s;
  box-shadow:0 4px 18px rgba(14,165,233,.32);
  position:relative;overflow:hidden;
}
.lnav-cta::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:.2s}
.lnav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,165,233,.4)}
.lnav-cta:hover::after{background:rgba(255,255,255,.08)}

.lnav-burger{
  display:none;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--l-border);
  background:var(--l-bg2);
  color:var(--l-tx);
  font-size:18px;
  cursor:pointer;
}
.lnav-overlay{
  position:fixed;inset:0;
  background:rgba(12,30,46,.35);
  backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:.2s ease;
  z-index:1999;
}
.lnav-mobile{
  position:fixed;top:12px;right:12px;left:12px;
  max-width:520px;margin-left:auto;
  background:rgba(255,255,255,.97);
  border:1px solid var(--l-border);
  border-radius:16px;
  padding:12px;
  transform:translateY(-10px);
  opacity:0;pointer-events:none;
  transition:.2s ease;
  z-index:2000;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(12,30,46,.15);
}
.lnav-mobile .lnav-link{color:var(--l-soft)}
.lnav-mobile .lnav-link:hover{background:var(--l-bg3);color:var(--l-sky)}
.lnav-mobile a.lnav-link{text-decoration:none;display:block}
.lnav-mobile .lnav-link, .lnav-mobile .lnav-cta{width:100%;text-align:left;margin-top:6px}
.lnav-mobile .lnav-cta{text-align:center}
.lnav-mobile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lnav-mobile-title{font-weight:800;color:var(--l-tx)}
.lnav-mclose{
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--l-border);
  background:var(--l-bg2);
  color:var(--l-tx);cursor:pointer;
}
.lnav-sep{height:1px;background:var(--l-border2);margin:10px 0}
body.lnav-open .lnav-overlay{opacity:1;pointer-events:auto}
body.lnav-open .lnav-mobile{opacity:1;pointer-events:auto;transform:translateY(0)}
@media (max-width: 860px){
  .lnav-desktop{display:none}
  .lnav-burger{display:inline-flex;align-items:center;justify-content:center}
}

.legal-ov{
  position:fixed;inset:0;z-index:3000;
  background:rgba(12,30,46,.45);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.legal-modal{
  width:min(720px,100%);
  background:#ffffff;
  border:1px solid var(--l-border);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(12,30,46,.18);
  color:var(--l-tx);
}
.legal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.legal-title{font-weight:900}
.legal-close{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--l-border);
  background:var(--l-bg2);
  color:var(--l-tx);cursor:pointer;
}
.legal-body{padding:0 14px 14px;font-size:13px;line-height:1.7;color:var(--l-soft)}
.legal-body h4{margin:10px 0 6px;font-size:13.5px;color:var(--l-tx)}
.legal-body a{color:var(--l-sky)}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;overflow:hidden;
  padding:100px clamp(20px,5vw,80px) 90px;
  background:var(--l-bg);
}
/* Grain overlay for depth */
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;
}
/* Animated background shapes */
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;contain:layout style;isolation:isolate;transform:translateZ(0)}
.hero-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.14),transparent 70%);
  animation:orbFloat 8s ease-in-out infinite;
  animation-play-state:paused;
  will-change:transform;
  contain:strict;
  transform:translateZ(0);
}
.hero-orb:nth-child(1){width:700px;height:700px;top:-250px;right:-150px;animation-delay:0s;background:radial-gradient(circle,rgba(14,165,233,.12),rgba(56,189,248,.04),transparent 70%)}
.hero-orb:nth-child(2){width:500px;height:500px;bottom:-150px;left:-150px;animation-delay:-3s;background:radial-gradient(circle,rgba(14,165,233,.07),transparent 70%)}
.hero-orb:nth-child(3){width:250px;height:250px;top:30%;left:55%;animation-delay:-6s;background:radial-gradient(circle,rgba(56,189,248,.09),transparent 70%)}
@keyframes orbFloat{0%,100%{transform:translateZ(0) translateY(0)}50%{transform:translateZ(0) translateY(-30px)}}
.orbs-ready .hero-orb{animation-play-state:running}

/* Grid pattern overlay */
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(14,165,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.05) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.hero-grid::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,var(--l-bg) 100%);
}

.hero-inner{position:relative;z-index:1;max-width:760px}
.hero-br{display:block}
@media(max-width:480px){.hero-br{display:inline}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--l-bg3),var(--l-bg2));
  border:1.5px solid var(--l-border);
  border-radius:100px;padding:6px 16px;
  font-size:12px;font-weight:700;color:var(--l-sky);
  margin-bottom:28px;
  animation:badgePop .6s .2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop{from{transform:scale(.92) translateY(6px)}to{transform:scale(1) translateY(0)}}
.hero-dot{width:7px;height:7px;background:var(--l-sky);border-radius:50%;position:relative}
.hero-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:rgba(14,165,233,.4);animation:hpulse 2s infinite;transform:scale(0)}
@keyframes hpulse{0%{transform:scale(0);opacity:1}70%{transform:scale(2.2);opacity:0}100%{transform:scale(0);opacity:0}}

.hero-title{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;
  font-size:clamp(32px,5.5vw,62px);
  font-weight:800;color:var(--l-tx);
  letter-spacing:-2px;line-height:1.05;
  margin-bottom:22px;
  animation:titleReveal .8s .3s ease forwards;
}
@keyframes titleReveal{from{transform:translateY(18px)}to{transform:translateY(0)}}
.hero-title .grad{
  background:linear-gradient(135deg,var(--l-sky),#0284c7,var(--l-sky3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradShift 4s ease infinite;
  filter:brightness(1);
}
@keyframes gradShift{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

.hero-sub{
  font-size:17px;color:var(--l-muted);line-height:1.75;max-width:560px;
  margin-bottom:36px;
  animation:subReveal .8s .5s ease forwards;
}
@keyframes subReveal{from{transform:translateY(12px)}to{transform:translateY(0)}}
.hero-btns{display:flex;flex-wrap:wrap;gap:13px;align-items:center;animation:btnsReveal .8s .7s ease forwards}
@keyframes btnsReveal{from{transform:translateY(8px)}to{transform:translateY(0)}}
.hbtn-p{
  background:linear-gradient(135deg,var(--l-sky),#0284c7);
  color:#fff;padding:14px 30px;border-radius:12px;
  font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:15px;;
  cursor:pointer;border:none;transition:.25s;
  box-shadow:0 8px 28px rgba(14,165,233,.38);
  display:flex;align-items:center;gap:8px;
  position:relative;overflow:hidden;
}
.hbtn-p::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:.25s}
.hbtn-p:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(14,165,233,.45)}
.hbtn-p:hover::before{opacity:1}
.hbtn-o{
  background:#fff;color:var(--l-sky);padding:14px 30px;border-radius:12px;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;;
  cursor:pointer;border:2px solid var(--l-border);transition:.2s;
  box-shadow:0 2px 12px rgba(14,165,233,.08);
}
.hbtn-o:hover{border-color:var(--l-sky);background:var(--l-bg3);transform:translateY(-2px)}
.hero-trust{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap;animation:btnsReveal .8s .9s ease forwards}
.htrust{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--l-muted)}
.htrust-ico{color:var(--l-sky);font-size:15px}
.hsep{width:1px;height:18px;background:var(--l-border)}

/* Floating stat cards in hero */
.hero-stats{
  position:relative;z-index:1;
  display:flex;gap:16px;margin-top:64px;
  flex-wrap:wrap;
  animation:statsReveal 1s 1s ease forwards;
}
@keyframes statsReveal{from{transform:translateY(14px)}to{transform:translateY(0)}}
.hstat{
  background:linear-gradient(145deg,#fff,#f8fbff);
  border:1.5px solid var(--l-border2);border-radius:16px;
  padding:20px 24px;flex:1;min-width:160px;
  box-shadow:0 4px 24px rgba(14,165,233,.08);
  transition:.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
}
.hstat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--l-sky),#38bdf8,var(--l-sky3));transform:scaleX(0);transform-origin:left;transition:.35s}
.hstat:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(14,165,233,.15);border-color:rgba(14,165,233,.2)}
.hstat:hover::before{transform:scaleX(1)}
.hstat-val{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:26px;;color:var(--l-tx);letter-spacing:-1px}
.hstat-val span{font-size:14px;color:var(--l-sky);font-weight:700}
.hstat-lbl{font-size:12px;color:var(--l-muted);margin-top:4px;font-weight:500}

/* ═══════════ SECTIONS ═══════════ */
.lsec{padding:80px clamp(20px,5vw,80px)}
.lsec-alt{background:var(--l-bg2)}
.lsec-lbl{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
  color:var(--l-sky);margin-bottom:12px;
}
.lsec-lbl-dot{width:5px;height:5px;background:var(--l-sky);border-radius:50%;position:relative}
.lsec-lbl-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(14,165,233,.4);animation:hpulse 2s infinite;transform:scale(0)}
.lsec-title{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;
  font-size:clamp(26px,3.5vw,40px);font-weight:800;
  color:var(--l-tx);letter-spacing:-.8px;line-height:1.1;margin-bottom:14px;
}
.lsec-title .sky{color:var(--l-sky)}
.lsec-sub{font-size:15px;color:var(--l-muted);line-height:1.75;max-width:540px}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}

/* ═══════════ FEATURES ═══════════ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.feat-card{
  background:linear-gradient(145deg,#fff,#fafcff);
  border:1.5px solid var(--l-border2);border-radius:20px;
  padding:30px;transition:.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
  box-shadow:0 2px 16px rgba(14,165,233,.04);
}
.feat-card::before{
  content:'';position:absolute;inset:-1px;border-radius:20px;padding:1.5px;
  background:linear-gradient(135deg,transparent 40%,var(--l-sky),#38bdf8);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:.3s;pointer-events:none;
}
.feat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--l-sky),#38bdf8,var(--l-sky3));
  transform:scaleX(0);transform-origin:left;transition:.3s;
}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(14,165,233,.12)}
.feat-card:hover::before{opacity:1}
.feat-card:hover::after{transform:scaleX(1)}
.feat-ico{
  width:54px;height:54px;
  background:linear-gradient(135deg,var(--l-bg3),var(--l-bg2));
  border:1.5px solid var(--l-border);border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;
  transition:.3s cubic-bezier(.4,0,.2,1);
}
.feat-card:hover .feat-ico{background:linear-gradient(135deg,var(--l-sky),#0284c7);border-color:var(--l-sky);transform:scale(1.08) rotate(-5deg);box-shadow:0 6px 18px rgba(14,165,233,.25)}
.feat-title{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:16px;;color:var(--l-tx);margin-bottom:9px}
.feat-desc{font-size:13.5px;color:var(--l-muted);line-height:1.7}

/* ═══════════ REGIME BADGE (app) ═══════════ */
.regime-badge{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:linear-gradient(135deg,var(--bg),var(--card));
  border:1.5px dashed var(--br);border-radius:10px;
  padding:8px 12px;margin:0 9px 8px;transition:.2s;
}
.regime-badge:hover{border-color:var(--p);background:var(--p25)}

/* ═══════════ PLAN BADGE (app) ═══════════ */
.plan-bar{
  background:linear-gradient(135deg,var(--p25),#dff2fc);
  border:1.5px solid var(--p50);border-radius:10px;
  padding:10px 14px;margin:0 9px 12px;
  display:flex;align-items:center;gap:9px;cursor:pointer;transition:.2s;
}
.plan-bar:hover{background:var(--p50);border-color:#7dd3fc}
.plan-bar-ico{font-size:16px}
.plan-bar-name{font-size:11px;font-weight:700;color:var(--pd);flex:1}
.plan-bar-sub{font-size:10px;color:var(--muted)}
.plan-bar-up{font-size:10px;font-weight:700;color:#fff;background:var(--p);padding:2px 8px;border-radius:20px;white-space:nowrap}

/* ═══════════ PRICING ═══════════ */

/* ═══════════ CALCULATOR ═══════════ */

/* ═══════════ FOOTER ═══════════ */
.lfooter{
  border-top:1px solid var(--l-border2);
  background:linear-gradient(145deg,#fafcff,var(--l-bg));
  padding:40px clamp(20px,5vw,80px) 28px;
  position:relative;
}
.lfooter::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--l-sky),#38bdf8,var(--l-sky),transparent);
  opacity:.3;
}
.lfoot-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px}
.lfoot-copy{font-size:12px;color:var(--l-muted);margin-top:5px}
.lfoot-links{display:flex;gap:8px;flex-wrap:wrap}
.lfoot-lnk{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(145deg,#fff,#fafcff);
  border:1.5px solid var(--l-border2);border-radius:10px;
  padding:8px 14px;font-size:12px;font-weight:600;color:var(--l-soft);
  text-decoration:none;transition:.25s cubic-bezier(.4,0,.2,1);
}
.lfoot-lnk:hover{border-color:rgba(14,165,233,.3);color:var(--l-sky);background:rgba(14,165,233,.04);transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,165,233,.08)}
.lfoot-disc{font-size:11px;color:var(--l-muted);margin-top:18px;opacity:.6;line-height:1.65}

/* ═══════════ UPGRADE GATE ═══════════ */
.gate-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(255,255,255,.7);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:afadeIn .2s ease;
}
.gate-box{
  background:#fff;border-radius:24px;
  border:1.5px solid var(--l-border);
  padding:40px 36px;width:480px;max-width:100%;
  box-shadow:0 40px 100px rgba(14,165,233,.15);
  animation:aslideUp .3s cubic-bezier(.34,1.56,.64,1) both;
  text-align:center;
}
.gate-icon{
  width:64px;height:64px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--l-bg3),#dbeafe);
  border:1.5px solid var(--l-border);border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.gate-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:22px;;color:var(--l-tx);margin-bottom:8px;letter-spacing:-.5px}
.gate-sub{font-size:14px;color:var(--l-muted);line-height:1.7;margin-bottom:24px}
.gate-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.gate-plan{
  background:var(--l-bg2);border:1.5px solid var(--l-border2);border-radius:14px;
  padding:16px;text-align:left;cursor:pointer;transition:.2s;
}
.gate-plan:hover{border-color:var(--l-sky);background:var(--l-bg3);transform:translateY(-2px)}
.gate-plan-name{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:14px;;color:var(--l-tx);margin-bottom:3px}
.gate-plan-price{font-size:20px;font-weight:800;color:var(--l-sky);font-family:'Outfit',sans-serif}
.gate-plan-price span{font-size:12px;color:var(--l-muted);font-weight:500}
.gate-plan-feat{font-size:11.5px;color:var(--l-muted);margin-top:6px;line-height:1.5}
.gate-close{font-size:13px;color:var(--l-muted);cursor:pointer;background:none;border:none;font-family:'Plus Jakarta Sans',sans-serif;transition:.15s}
.gate-close:hover{color:var(--l-sky)}

/* AUTH MODAL */
.auth-overlay{position:fixed;inset:0;z-index:9000;background:rgba(5,13,21,.82);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px;animation:afadeIn .2s ease}
@keyframes afadeIn{from{opacity:0}to{opacity:1}}
.auth-box{background:#fff;border-radius:22px;padding:36px 38px;width:450px;max-width:100%;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:aslideUp .25s ease;position:relative}
@keyframes aslideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.auth-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:22px;;color:var(--tx);letter-spacing:-.4px;margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.auth-tabs{display:flex;gap:3px;background:var(--bg);border-radius:9px;padding:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:8px;border-radius:7px;border:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);background:none;transition:.14s}
.auth-tab.on{background:#fff;color:var(--pd);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.auth-field{margin-bottom:14px}
.auth-label{font-size:11px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;display:block}
.auth-input{width:100%;border:1.5px solid var(--br);border-radius:9px;padding:10px 13px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:500;color:var(--tx);outline:none;transition:.15s;background:var(--card)}
.auth-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.auth-btn{width:100%;background:var(--p);color:#fff;border:none;border-radius:10px;padding:13px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;;cursor:pointer;transition:.15s;box-shadow:0 4px 14px rgba(14,165,233,.3);margin-top:4px}
.auth-btn:hover{background:var(--pd);transform:translateY(-1px)}
.auth-sep{text-align:center;position:relative;margin:14px 0}
.auth-sep::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--br)}
.auth-sep span{position:relative;background:#fff;padding:0 12px;font-size:12px;color:var(--muted)}
.auth-demo{width:100%;background:var(--bg);color:var(--soft);border:1.5px solid var(--br);border-radius:10px;padding:11px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s;display:flex;align-items:center;justify-content:center;gap:8px}
.auth-demo:hover{background:var(--p25);border-color:#7dd3fc;color:var(--p)}
.auth-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}
.auth-err{background:var(--rg);border:1px solid #fecaca;border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--rd);font-weight:600;margin-bottom:14px;display:none}
.auth-plan-hint{background:var(--p50);border:1px solid #bae6fd;border-radius:9px;padding:10px 13px;font-size:12px;color:var(--pd);margin-bottom:16px;display:none}
/* Payment plan cards */
.pay-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pay-plan-card{border:1.5px solid var(--br);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;position:relative}
.pay-plan-card:hover{border-color:#7dd3fc;background:var(--p25)}
.pay-plan-card.selected{border-color:var(--p);background:var(--p50);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.pay-plan-name{font-size:13px;font-weight:800;color:var(--tx);margin-bottom:4px}
.pay-plan-price{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:var(--pd);line-height:1}
.pay-plan-price span{font-size:10px;color:var(--muted);font-weight:500;font-family:'Plus Jakarta Sans',sans-serif}
.pay-plan-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.pay-plan-feats{list-style:none;margin:8px 0 0;padding:0;font-size:10.5px;color:var(--soft);line-height:1.7}
.pay-plan-feats li::before{content:'✓ ';color:var(--p);font-weight:700}
.pay-period-toggle{display:flex;background:var(--bg);border-radius:10px;padding:3px;gap:3px;margin-bottom:18px}
.pay-period-btn{flex:1;padding:9px 12px;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);background:none;transition:.15s;font-family:'Plus Jakarta Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:6px}
.pay-period-btn.active{background:#fff;color:var(--pd);box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* Storage risk boxes */
.storage-risk{border-radius:10px;padding:11px 13px;font-size:11.5px;line-height:1.6;margin-top:10px;display:none}
.storage-risk.local{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.storage-risk.cloud{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}

/* APP STYLES */
h1,h2,h3,.ph-t,.ct,.kv,.rct,.tvas-t,.tva-echdate,.cl-title,.fst{font-family:'Outfit',sans-serif}
.sb{width:var(--sbw);height:100vh;overflow-y:auto;background:#fff;border-right:1.5px solid var(--br);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:200}
.logo-w{padding:18px 16px 12px;display:flex;align-items:center;gap:9px}
.logo-ic{width:34px;height:34px;background:linear-gradient(135deg,#0c1e2e,#0e3a5c);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 3px 10px rgba(14,165,233,.28);flex-shrink:0;overflow:hidden}
.logo-ar{font-size:9.5px;font-weight:700;color:var(--p);letter-spacing:.5px}
.co-pill{margin:0 11px 12px;background:var(--p25);border:1.5px solid var(--p50);border-radius:10px;padding:9px 11px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.18s}
.co-pill:hover{background:var(--p50)}
.co-av{width:27px;height:27px;background:linear-gradient(135deg,var(--p),var(--pd));border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;;color:#fff;flex-shrink:0}
.co-n{font-size:11.5px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-s{font-size:10px;color:var(--muted)}
.mode-toggle{margin:0 11px 11px;display:flex;background:var(--bg);border-radius:9px;padding:3px;border:1.5px solid var(--br)}
.mode-btn{flex:1;padding:5.5px;border-radius:7px;border:none;background:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:.15s;color:var(--muted)}
.mode-btn.on{background:#fff;color:var(--pd);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ng{padding:0 9px;margin-bottom:1px}
.ngl{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.1px;padding:7px 8px 3px}
.na{display:flex;align-items:center;gap:7px;padding:7.5px 9px;border-radius:8px;cursor:pointer;transition:.14s;color:var(--soft);font-size:12.5px;font-weight:500;margin-bottom:1px;position:relative}
.na:hover{background:var(--p25);color:var(--p)}
.na.on{background:var(--p50);color:var(--pd);font-weight:700}
.na.on::before{content:'';position:absolute;left:-9px;width:3px;height:60%;top:20%;background:var(--p);border-radius:0 3px 3px 0}
.nic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:13px;flex-shrink:0}
.na.on .nic{background:rgba(14,165,233,.12)}
.nbadge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1.5px 5px;border-radius:20px}
.nbadge.b{background:var(--p)}
.sbf{margin-top:auto;padding:9px;border-top:1.5px solid var(--brl)}
.local-badge{margin:0 9px 9px;background:var(--gg);border:1.5px solid #bbf7d0;border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:7px;cursor:pointer}
.lb-t{font-size:10.5px;font-weight:700;color:var(--gd)}
.lb-s{font-size:9.5px;color:#166534;margin-top:1px}
#local-size{margin-left:auto;font-size:9px;color:#86efac;font-weight:600}
.urow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:background .14s}
.urow:hover{background:var(--p25)}
.uav{width:28px;height:28px;background:linear-gradient(135deg,var(--teal),#0f766e);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.main{margin-left:var(--sbw);flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* ── Topbar ── */
.topbar{
  background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%);
  border-bottom:1px solid var(--brl);
  padding:0 18px 0 0;
  height:58px;min-height:58px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;z-index:100;
  box-shadow:0 1px 12px rgba(14,165,233,.05);
}
/* Hamburger — 3 lines */
.hamburger{
  width:48px;height:58px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  background:none;border:none;border-right:1px solid var(--brl);cursor:pointer;
  flex-shrink:0;margin-right:14px;transition:background .15s;
}
.hamburger:hover{background:var(--p25)}
.hbr-line{display:block;width:17px;height:2px;background:var(--soft);border-radius:2px;transition:all .2s}
.hamburger:hover .hbr-line{background:var(--p)}
/* Title stack */
.tbl{display:flex;align-items:center;gap:0}
.tb-title-wrap{display:flex;flex-direction:column;justify-content:center;gap:1px}
.tb-breadcrumb{display:flex;align-items:center;gap:3px;line-height:1}
.tbc{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.tbsep{font-size:10px;color:var(--brl);font-weight:400}
.tbp{font-size:15px;font-weight:800;color:var(--tx);letter-spacing:-.4px;line-height:1.1;white-space:nowrap}
/* Right actions */
.tbr{display:flex;align-items:center;gap:8px}
.btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:600;transition:.15s}
.btn-p{background:var(--p);color:#fff;box-shadow:0 3px 10px rgba(14,165,233,.28)}
.btn-p:hover{background:var(--pd);transform:translateY(-1px)}
.btn-g{background:var(--card);color:var(--tx);border:1.5px solid var(--br)}
.btn-g:hover{background:var(--p25);border-color:#7dd3fc;color:var(--p)}
.notif{width:36px;height:36px;background:var(--bg);border:1.5px solid var(--br);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;position:relative;transition:.15s}
.notif:hover{background:var(--p25);border-color:#7dd3fc}
.ndot{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--red);border-radius:50%;border:2px solid #fff}

/* ── App disclaimer banner ── */
.app-disc-bar{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#fffbeb,#fef9ec);
  border-bottom:1px solid #fde68a;
  padding:6px 18px;
  font-size:11.5px;font-weight:600;color:var(--ad);
  flex-shrink:0;
}
.adb-icon{font-size:13px;flex-shrink:0}
.adb-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.adb-close{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--ad);font-size:16px;line-height:1;opacity:.6;
  padding:0 2px;flex-shrink:0;transition:opacity .15s;
}
.adb-close:hover{opacity:1}

/* ── Page height — flex fill ── */
.page{display:none;padding:18px 20px 32px;overflow-y:auto;flex:1;min-height:0;animation:pgfu .3s ease both}
.page.on{display:block;opacity:1;flex:1;min-height:0}
@keyframes pgfu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.ph{margin-bottom:16px}
.ph-t{font-size:21px;font-weight:800;color:var(--tx);letter-spacing:-.4px}
.ph-s{font-size:13px;color:var(--muted);margin-top:2px}
.alert{border-radius:11px;padding:11px 14px;display:flex;align-items:flex-start;gap:9px;margin-bottom:16px}
.alert.danger{background:#fff5f5;border:1.5px solid #fecaca}
.alert.warn{background:var(--ag);border:1.5px solid #fde68a}
.alert.info{background:var(--p50);border:1.5px solid #bae6fd}
.alert.success{background:var(--gg);border:1.5px solid #bbf7d0}
.aico{font-size:17px;flex-shrink:0;margin-top:1px}
.at{font-size:12.5px;font-weight:700}
.alert.danger .at{color:var(--rd)}.alert.warn .at{color:var(--ad)}.alert.info .at{color:var(--pd)}.alert.success .at{color:var(--gd)}
.as{font-size:12px;margin-top:2px;color:var(--soft)}
.cl-card{background:var(--card);border-radius:13px;border:1.5px solid var(--br);padding:16px 18px;margin-bottom:16px}
.cl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cl-title{font-size:14px;font-weight:700;color:var(--tx)}
.cl-prog{font-size:11.5px;color:var(--muted)}
.cl-bar{height:5px;background:var(--br);border-radius:10px;margin-bottom:14px;overflow:hidden}
.cl-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--p),var(--teal));transition:width .5s ease}
.cl-items{display:flex;flex-direction:column;gap:7px}
.cl-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;border:1.5px solid var(--br);cursor:pointer;transition:.15s}
.cl-item:hover{border-color:#7dd3fc}
.cl-item.done{background:var(--gg);border-color:#bbf7d0}
.cl-item.done .cl-chk{background:var(--green);border-color:var(--green);color:#fff}
.cl-item.done .cl-txt{text-decoration:line-through;color:var(--muted)}
.cl-chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;transition:.15s}
.cl-txt{font-size:12.5px;font-weight:500;color:var(--tx);flex:1}
.cl-done{text-align:center;padding:9px;background:var(--gg);border-radius:9px;border:1.5px solid #bbf7d0;font-size:13px;font-weight:700;color:var(--gd);display:none}
.cl-portal{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--p);background:var(--p50);padding:5px 11px;border-radius:7px;text-decoration:none;margin-top:10px;transition:.14s}
.cl-portal:hover{background:var(--p);color:#fff}
#det{display:none}
.kpi{background:var(--card);border-radius:12px;padding:15px;border:1.5px solid var(--br);transition:.2s}
.kpi:hover{box-shadow:0 4px 18px rgba(14,165,233,.09);transform:translateY(-1px);border-color:#7dd3fc}
.kt{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kl{font-size:11.5px;color:var(--soft);font-weight:500}
.ki{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.ki.b{background:var(--p50)}.ki.g{background:var(--gg)}.ki.r{background:var(--rg)}.ki.a{background:var(--ag)}
.kv{font-size:21px;font-weight:700;color:var(--tx);letter-spacing:-.6px}
.ku{font-size:11.5px;font-weight:500;color:var(--muted)}
.ktr{font-size:11px;font-weight:600;margin-top:3px}
.ktr.up{color:var(--green)}.ktr.na{color:var(--muted)}
.card{background:var(--card);border-radius:12px;border:1.5px solid var(--br);overflow:hidden}
.ch{padding:14px 17px 10px;display:flex;align-items:flex-start;justify-content:space-between}
.ct{font-size:14px;font-weight:700;color:var(--tx)}
.cs{font-size:11px;color:var(--muted);margin-top:2px}
.clink{font-size:11.5px;color:var(--p);font-weight:600;background:none;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.or{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--brl);gap:9px}
.or:last-child{border-bottom:none}
.od{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.od.done{background:var(--green)}.od.urg{background:var(--red)}.od.soon{background:var(--amber)}.od.pend{background:var(--br)}
.oi{flex:1}
.on_{font-size:12.5px;font-weight:600;color:var(--tx)}
.os{font-size:10.5px;color:var(--muted)}
.pill{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pill.done{background:var(--gg);color:var(--gd)}.pill.urg{background:var(--rg);color:var(--rd)}.pill.soon{background:var(--ag);color:var(--ad)}.pill.pend{background:var(--bg);color:var(--soft);border:1px solid var(--br)}
.cw{background:linear-gradient(135deg,#0c1e2e,#0e3a5c);border-radius:12px;padding:16px;color:#fff}
.cw-t{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:14px;;color:#fff;margin-bottom:2px}
.cw-s{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:12px}
.cw-f{margin-bottom:8px}
.cw-l{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.cw-i{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:8px 11px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:#fff;outline:none;transition:.14s}
.cw-i:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.cw-i::placeholder{color:rgba(255,255,255,.3)}
.cw-res{background:rgba(0,0,0,.25);border-radius:9px;padding:11px;margin-top:10px}
.cw-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.cw-rl{font-size:11.5px;color:rgba(255,255,255,.6)}
.cw-rv{font-size:12.5px;font-weight:700;color:#fff}
.cw-rv.hl{font-size:16px;color:#38bdf8}
.cw-div{height:1px;background:rgba(255,255,255,.1);margin:6px 0}
.cw-peda{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.5}
.cw-sel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:3px 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;color:#38bdf8;outline:none;cursor:pointer;-webkit-appearance:none}
.cw-sel option{background:#0f2035;color:#fff}
.saisie-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ir-layout,.cnss-layout,.tvalayout{display:grid;grid-template-columns:1fr 280px;gap:15px}
.tvamain{display:flex;flex-direction:column;gap:13px}
.fsec{background:var(--card);border-radius:12px;border:1.5px solid var(--br);padding:16px}
.fst{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.fsico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}
.field{margin-bottom:11px}
.fl{font-size:11px;font-weight:700;color:var(--soft);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.fi,.fselect{width:100%;border:1.5px solid var(--br);border-radius:8px;padding:8px 11px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:500;color:var(--tx);outline:none;transition:.14s;background:var(--card)}
.fi:focus,.fselect:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.rcard{background:linear-gradient(135deg,var(--p25),#dff2fc);border:1.5px solid var(--p50);border-radius:12px;padding:17px}
.rct{font-size:13.5px;font-weight:700;color:var(--pd);margin-bottom:11px}
.rcrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(14,165,233,.12)}
.rcrow:last-child{border-bottom:none}
.rcl{font-size:12px;color:var(--soft)}
.rcv{font-size:13px;font-weight:700;color:var(--tx)}
.rcv.big{font-size:18px;color:var(--p)}.rcv.red{color:var(--red)}.rcv.green{color:var(--green)}
.rcsep{height:1px;background:rgba(14,165,233,.15);margin:4px 0}
.ttable{padding:0 17px 12px}
.ttr{display:grid;grid-template-columns:1fr 130px 120px;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--brl)}
.ttr:first-child{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding-bottom:6px}
.ttr:last-child{border-bottom:none}
.ttcat{font-size:12.5px;color:var(--tx);font-weight:500}
.ttcat span{font-size:10px;color:var(--muted);display:block}
.ttinput{width:100%;border:1.5px solid var(--br);border-radius:7px;padding:7px 10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--tx);outline:none;transition:.14s;text-align:right}
.ttinput:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.tttva{font-size:13px;font-weight:700;color:var(--p);text-align:right}
.tttva.total{font-size:14.5px;color:var(--tx)}
.tvasm{background:var(--card);border-radius:12px;border:1.5px solid var(--br);padding:17px;position:sticky;top:64px}
.tvas-t{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:11px}
.tvas-r{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--brl)}
.tvas-r:last-child{border-bottom:none}
.tvas-l{font-size:12px;color:var(--soft)}
.tvas-v{font-size:13px;font-weight:700;color:var(--tx)}
.tvas-v.cr{color:var(--green)}.tvas-v.db{color:var(--red)}.tvas-v.big{font-size:18px}
.tvas-sep{height:1px;background:var(--br);margin:4px 0}
.tva-echbox{background:var(--rg);border:1.5px solid #fecaca;border-radius:9px;padding:10px;margin-top:11px;text-align:center}
.tva-echlbl{font-size:9.5px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tva-echdate{font-size:19px;font-weight:800;color:var(--red);margin-top:2px}
.tva-genbtn{width:100%;background:var(--p);color:#fff;border:none;border-radius:9px;padding:11px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:13.5px;;cursor:pointer;margin-top:11px;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.tva-genbtn:hover{background:var(--pd)}
.disclaimer{background:var(--ag);border:1.5px solid #fde68a;border-radius:9px;padding:9px 13px;font-size:11px;color:var(--ad);line-height:1.6;margin-bottom:13px}
.sal-table{padding:0 17px 12px}
.str{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--brl);font-size:12px}
.str.head{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.str:last-child{border-bottom:none}
.str-n{font-weight:600;color:var(--tx)}.str-v{font-weight:700;color:var(--tx);text-align:right}
.str-v.r{color:var(--red)}.str-v.g{color:var(--green)}.str-v.b{color:var(--p)}
.bar-table{padding:0 17px 12px}
.bar-r{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--brl)}
.bar-r:last-child{border-bottom:none}
.bar-range{min-width:170px;font-size:12px;color:var(--soft)}
.bar-rate{min-width:32px;font-size:13px;font-weight:700;color:var(--p);text-align:center}
.bar-vis{flex:1;height:6px;background:var(--br);border-radius:10px;overflow:hidden}
.bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--p),var(--teal))}
/* ── CALENDRIER ── */
.cal-layout{display:grid;grid-template-columns:1fr 260px;gap:14px;height:calc(100vh - 130px);overflow:hidden}
.cal-main{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.cal-sidebar{display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-nav-btn{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--br);background:var(--card);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.14s;color:var(--tx)}
.cal-nav-btn:hover{background:var(--p25);border-color:#7dd3fc}
.cal-nav-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:17px;;color:var(--tx);min-width:160px}
.cal-nav-today{padding:5px 12px;border-radius:7px;border:1.5px solid var(--br);background:var(--card);font-size:12px;font-weight:600;cursor:pointer;color:var(--soft);transition:.14s}
.cal-nav-today:hover{background:var(--p25);border-color:#7dd3fc;color:var(--p)}
.cal-legend{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600}
.cal-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:0 1px}
.cal-grid-days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:3px;overflow:hidden;min-height:0}
.cal-day{background:var(--card);border:1.5px solid var(--br);border-radius:9px;padding:6px 7px;cursor:pointer;transition:.14s;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:0}
.cal-day:hover{border-color:#7dd3fc;background:var(--p25)}
.cal-day.today{border-color:var(--p);background:rgba(14,165,233,.04)}
.cal-day.today .cal-day-num{background:var(--p);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.cal-day.other-month{opacity:.3;cursor:default;pointer-events:none}
.cal-day.selected{border-color:var(--p);box-shadow:0 0 0 2px rgba(14,165,233,.2)}
.cal-day-num{font-size:12px;font-weight:700;color:var(--tx);line-height:1;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.cal-evt-pill{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:.1s}
.cal-evt-pill:hover{filter:brightness(.92)}
.cal-evt-pill.late{background:#fee2e2;color:#dc2626}
.cal-evt-pill.pending{background:#fef3c7;color:#b45309}
.cal-evt-pill.done{background:#dcfce7;color:#15803d}
.cal-evt-pill.perso{background:#dbeafe;color:#1d4ed8}
.cal-more{font-size:9px;color:var(--muted);font-weight:600;cursor:pointer}
/* Sidebar calendrier */
.cal-sb-card{background:var(--card);border:1.5px solid var(--br);border-radius:12px;padding:14px}
.cal-sb-title{font-size:12px;font-weight:800;color:var(--tx);margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px}
.cal-sb-evt{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1.5px solid var(--br);cursor:pointer;transition:.14s}
.cal-sb-evt:hover{border-color:#7dd3fc;background:var(--p25)}
.cal-sb-evt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.cal-sb-evt-date{font-size:10px;font-weight:700;color:var(--muted)}
.cal-sb-evt-title{font-size:12px;font-weight:600;color:var(--tx);line-height:1.3}
.cal-sb-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700;margin-top:3px}
.cal-sb-badge.late{background:#fee2e2;color:#dc2626}
.cal-sb-badge.pending{background:#fef3c7;color:#b45309}
.cal-sb-badge.done{background:#dcfce7;color:#15803d}
.cal-sb-badge.perso{background:#dbeafe;color:#1d4ed8}
/* Modal */
.cal-modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(5,13,21,.7);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.cal-modal-overlay.open{display:flex}
.cal-modal-box{background:#fff;border-radius:16px;padding:28px;width:400px;max-width:100%;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.cal-modal-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:18px;;color:var(--tx);margin-bottom:18px}
.cal-modal-field{margin-bottom:12px}
.cal-modal-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.cal-modal-input{width:100%;border:1.5px solid var(--br);border-radius:8px;padding:9px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--tx);background:var(--bg);transition:.14s;outline:none;box-sizing:border-box;resize:vertical}
.cal-modal-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.12)}
.cal-modal-select{width:100%;border:1.5px solid var(--br);border-radius:8px;padding:9px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--tx);background:var(--bg);outline:none;cursor:pointer;box-sizing:border-box}
.cal-status-btns{display:flex;gap:6px}
.cal-status-btn{flex:1;padding:7px 10px;border-radius:7px;border:1.5px solid var(--br);background:var(--bg);font-size:11.5px;font-weight:600;cursor:pointer;transition:.14s;color:var(--soft)}
.cal-status-btn.active[data-status="pending"]{background:#fef3c7;border-color:#f59e0b;color:#b45309}
.cal-status-btn.active[data-status="done"]{background:#dcfce7;border-color:#22c55e;color:#15803d}
.cal-status-btn.active[data-status="late"]{background:#fee2e2;border-color:#ef4444;color:#dc2626}
@media(max-width:900px){
  .cal-layout{grid-template-columns:1fr;height:auto;overflow:visible}
  .cal-main{overflow:visible}
  .cal-grid-days{grid-auto-rows:80px}
}
/* ── FIN CALENDRIER ── */
.co-modal{position:fixed;inset:0;z-index:9990;background:rgba(12,30,46,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.co-modal-box{background:#fff;border-radius:16px;padding:22px;width:380px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.co-modal-t{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:16px;;color:var(--tx);margin-bottom:14px}
.co-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:220px;overflow-y:auto}
.co-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--br);border-radius:9px;cursor:pointer;transition:.14s}
.co-row:hover{border-color:#7dd3fc;background:var(--p25)}
.co-row.active{border-color:var(--p);background:var(--p50)}
.co-row-av{width:28px;height:28px;background:linear-gradient(135deg,var(--p),var(--pd));border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;;color:#fff;flex-shrink:0}
.co-row-name{flex:1;font-size:13px;font-weight:600;color:var(--tx)}
.co-row-acts{display:flex;gap:4px}
.co-icon-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:3px;color:var(--muted)}
.co-icon-btn:hover{color:var(--red)}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}.saisie-grid,.ent-grid,.ir-layout,.cnss-layout,.tvalayout{grid-template-columns:1fr}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}.lnav-links .lnav-link{display:none}}
@media(max-width:700px){#fact-kpis,#bilan-kpis{grid-template-columns:repeat(2,1fr) !important}}

/* ═══════════ HAMBURGER MOBILE ═══════════ */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;font-size:22px;color:var(--tx);z-index:301}
.sb-overlay{display:none;position:fixed;inset:0;z-index:199;background:rgba(12,30,46,.45);backdrop-filter:blur(4px)}
@media(max-width:768px){
  .hamburger{display:flex;align-items:center;justify-content:center}
  .sb{transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:none}
  .sb.open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.15)}
  .sb-overlay.open{display:block}
  .main{margin-left:0 !important}
  .topbar{padding:0 12px 0 0}
  .page{padding:14px 14px 32px}
  .tb-hide-mobile{display:none !important}
  .tvalayout,.cnss-layout,.ir-layout{grid-template-columns:1fr}
  .saisie-grid,.ent-grid{grid-template-columns:1fr}
  .hero{padding:60px 20px 50px}
  .hero-stats{flex-direction:column}
  .lnav{height:56px;padding:0 16px}
  .lnav-links .lnav-link{display:none}
  .hero-btns{flex-direction:column;width:100%}
  .hbtn-p,.hbtn-o{width:100%;justify-content:center}
  .gate-plans{grid-template-columns:1fr}
}

/* ═══════════ FLASH ANIMATION FOR UPDATED VALUES ═══════════ */
@keyframes valueFlash{0%{opacity:1}100%{opacity:0}}
.value-flash{position:relative;border-radius:4px}
.value-flash::after{content:'';position:absolute;inset:0;background:rgba(14,165,233,.15);border-radius:4px;animation:valueFlash .6s ease forwards;pointer-events:none}

/* ═══════════ ANIMATED COUNTER ═══════════ */
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════ TRUST BAND ═══════════ */

/* ═══════════ PREVIEW / SCREENSHOT ═══════════ */
.preview-sec{padding:80px clamp(20px,5vw,80px);background:#fff;overflow:hidden;position:relative}
.preview-sec::before{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(14,165,233,.08),transparent 70%);
  pointer-events:none;
}
.preview-frame{
  max-width:920px;margin:44px auto 0;
  background:linear-gradient(145deg,#0c1e2e,#0e3a5c);
  border-radius:20px;padding:4px;
  box-shadow:
    0 50px 120px rgba(14,165,233,.2),
    0 20px 50px rgba(0,0,0,.1),
    0 0 0 1px rgba(14,165,233,.15);
  position:relative;
  transform:perspective(1200px) rotateX(2deg);
  transition:.4s cubic-bezier(.4,0,.2,1);
}
.preview-frame:hover{transform:perspective(1200px) rotateX(0deg);box-shadow:0 60px 140px rgba(14,165,233,.25),0 25px 60px rgba(0,0,0,.12),0 0 0 1px rgba(14,165,233,.2)}
.preview-topbar{
  background:rgba(255,255,255,.08);border-radius:16px 16px 0 0;
  padding:10px 18px;display:flex;align-items:center;gap:8px;
}
.preview-dot{width:10px;height:10px;border-radius:50%}
.preview-dot.r{background:#ef4444}.preview-dot.y{background:#f59e0b}.preview-dot.g{background:#22c55e}
.preview-url{
  flex:1;background:rgba(255,255,255,.06);border-radius:6px;
  padding:5px 14px;font-size:11px;color:rgba(255,255,255,.4);
  text-align:center;margin-left:12px;
}
.preview-body{
  background:var(--l-bg);border-radius:0 0 16px 16px;
  padding:24px;min-height:300px;
  display:grid;grid-template-columns:180px 1fr;gap:16px;
}
.prev-sidebar{
  background:#fff;border-radius:12px;padding:14px;
  border:1px solid var(--l-border2);
}
.prev-sb-item{
  padding:7px 10px;border-radius:7px;font-size:11px;font-weight:600;
  color:var(--l-muted);margin-bottom:3px;display:flex;align-items:center;gap:7px;
}
.prev-sb-item.active{background:var(--l-bg3);color:var(--l-sky)}
.prev-main{display:flex;flex-direction:column;gap:12px}
.prev-card{
  background:#fff;border-radius:12px;padding:16px;
  border:1px solid var(--l-border2);
}
.prev-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.prev-kpi{
  background:var(--l-bg2);border-radius:10px;padding:12px;text-align:center;
}
.prev-kpi-val{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:18px;;color:var(--l-sky)}
.prev-kpi-lbl{font-size:9px;color:var(--l-muted);margin-top:3px;font-weight:600}
.prev-bar{height:6px;background:var(--l-border2);border-radius:10px;overflow:hidden;margin-top:10px}
.prev-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--l-sky),#38bdf8);animation:prevBarGrow 2s ease both;transform-origin:left center;width:var(--pw,70%)}
@keyframes prevBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.prev-pulse{
  position:absolute;top:20px;right:20px;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);
  border-radius:20px;padding:4px 12px;
  font-size:10px;font-weight:700;color:#22c55e;
  display:flex;align-items:center;gap:5px;
}
.prev-pulse::before{content:'';width:6px;height:6px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:hpulse-green 2s infinite}
@keyframes hpulse-green{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* ═══════════ TESTIMONIALS ═══════════ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.testi-card{
  background:linear-gradient(145deg,#fff,#f8fbff);
  border:1.5px solid var(--l-border2);border-radius:20px;
  padding:30px 28px 26px;transition:.3s cubic-bezier(.4,0,.2,1);position:relative;
  box-shadow:0 2px 20px rgba(14,165,233,.04);overflow:hidden;
}
.testi-card::before{
  content:'"';position:absolute;top:12px;right:18px;
  font-family:'Outfit',serif;font-size:72px;font-weight:900;
  color:rgba(14,165,233,.06);line-height:1;pointer-events:none;
}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(14,165,233,.12);border-color:rgba(14,165,233,.25)}
.testi-stars{display:flex;gap:2px;margin-bottom:14px;font-size:13px;filter:drop-shadow(0 1px 2px rgba(245,158,11,.3))}
.testi-text{font-size:13.5px;color:var(--l-soft);line-height:1.8;margin-bottom:18px;position:relative;z-index:1}
.testi-author{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid var(--l-border2)}
.testi-av{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;;color:#fff;
  flex-shrink:0;box-shadow:0 3px 12px rgba(0,0,0,.15);
}
.testi-name{font-size:13px;font-weight:700;color:var(--l-tx)}
.testi-role{font-size:11.5px;color:var(--l-muted);margin-top:1px}
.testi-verified{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--l-sky);margin-top:3px}

/* ═══════════ NUMBERS COUNTER ═══════════ */
.numbers-sec{
  padding:64px clamp(20px,5vw,80px);
  background:linear-gradient(135deg,#f0f9ff,#e8f4fd,#f0f9ff);
  border-top:1px solid var(--l-border2);border-bottom:1px solid var(--l-border2);
  position:relative;overflow:hidden;
}
.numbers-sec::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230ea5e9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.numbers-grid{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;position:relative;z-index:1}
.number-item{text-align:center;min-width:120px}
.number-val{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(34px,4vw,50px);
  font-weight:900;letter-spacing:-2px;line-height:1;
  background:linear-gradient(135deg,#0ea5e9,#0284c7,#0369a1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.number-val span{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.number-lbl{font-size:12.5px;color:var(--l-muted);margin-top:8px;font-weight:600}
.number-sep{width:1px;background:linear-gradient(180deg,transparent,var(--l-border),transparent);align-self:stretch}

/* ═══════════ FAQ ═══════════ */
.faq-list{max-width:720px;margin:48px auto 0;display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:linear-gradient(145deg,#fff,#fafcff);
  border:1.5px solid var(--l-border2);border-radius:16px;
  overflow:hidden;transition:.3s cubic-bezier(.4,0,.2,1);
}
.faq-item:hover{border-color:var(--l-border);box-shadow:0 4px 16px rgba(14,165,233,.05)}
.faq-item.open{border-color:rgba(14,165,233,.4);box-shadow:0 8px 30px rgba(14,165,233,.1);background:linear-gradient(145deg,#f0f9ff,#fff)}
.faq-q{
  padding:20px 24px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;gap:14px;
}
.faq-q-text{font-size:14.5px;font-weight:700;color:var(--l-tx);flex:1;transition:.2s}
.faq-item.open .faq-q-text{color:var(--l-sky)}
.faq-arrow{
  width:30px;height:30px;border-radius:50%;
  background:var(--l-bg2);border:1.5px solid var(--l-border2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--l-muted);transition:.35s cubic-bezier(.4,0,.2,1);flex-shrink:0;
}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:linear-gradient(135deg,var(--l-sky),#0284c7);color:#fff;border-color:var(--l-sky);box-shadow:0 3px 10px rgba(14,165,233,.3)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .35s;
  padding:0 24px;
}
.faq-item.open .faq-a{max-height:300px;padding:0 24px 22px}
.faq-a-text{font-size:13.5px;color:var(--l-muted);line-height:1.85}

/* ═══════════ FINAL CTA ═══════════ */
.cta-sec{
  padding:90px clamp(20px,5vw,80px);
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c,#0c1e2e);
  text-align:center;position:relative;overflow:hidden;
}
.cta-sec::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(14,165,233,.2),transparent 55%),
    radial-gradient(circle at 80% 70%,rgba(56,189,248,.15),transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(14,165,233,.05),transparent 80%);
  pointer-events:none;
  animation:ctaShift 10s ease-in-out infinite alternate;
}
@keyframes ctaShift{0%{opacity:.8;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
.cta-sec::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events:none;
}
.cta-inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.cta-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25);
  border-radius:100px;padding:7px 18px;
  font-size:12px;font-weight:700;color:var(--l-sky3);
  margin-bottom:28px;backdrop-filter:blur(8px);
}
.cta-title{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;
  font-size:clamp(28px,4.5vw,42px);font-weight:800;
  color:#fff;letter-spacing:-1.2px;line-height:1.15;margin-bottom:18px;
}
.cta-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:36px}
.cta-btns{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}
.cta-btn-p{
  background:linear-gradient(135deg,var(--l-sky),#0284c7);
  color:#fff;padding:16px 38px;border-radius:14px;
  font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:15px;;
  cursor:pointer;border:none;transition:.3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 32px rgba(14,165,233,.4),0 0 0 0 rgba(14,165,233,.2);
  display:flex;align-items:center;gap:8px;
  position:relative;overflow:hidden;
}
.cta-btn-p::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-100%);transition:.5s;
}
.cta-btn-p:hover::before{transform:translateX(100%)}
.cta-btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(14,165,233,.5),0 0 0 4px rgba(14,165,233,.15)}
.cta-guarantees{display:flex;justify-content:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.cta-g{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.4);
  padding:5px 12px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}

/* ═══════════ RESPONSIVE NEW SECTIONS ═══════════ */
@media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}.preview-body{grid-template-columns:1fr}.prev-sidebar{display:none}.numbers-grid{gap:30px}}
@media(max-width:600px){.testi-grid{grid-template-columns:1fr}.numbers-grid{gap:20px}.numbers-grid .number-sep{display:none}.prev-kpi-grid{grid-template-columns:1fr}.cta-btns{flex-direction:column;align-items:center}}

/* ── Employés (Saisie mensuelle) ── */
.empwrap{border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:10px;background:rgba(15,23,42,.02)}
.empwrap .str{grid-template-columns: 1.2fr .9fr .7fr .3fr}
.empwrap .str.head{opacity:.95}
.empwrap input.emp-i{width:100%;padding:9px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.28);background:transparent;color:var(--tx);font-size:12px}
.empwrap input.emp-i:focus{outline:none;border-color:rgba(14,165,233,.6);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.empwrap .emp-del{border:none;background:transparent;cursor:pointer;font-size:16px;opacity:.8}
.empwrap .emp-del:hover{opacity:1}

.imp-prev{
  background:var(--p25);
  border:1px dashed var(--l-border);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  color:var(--soft);
  white-space:pre-wrap;
  line-height:1.45;
}
.imp-prev .ok{color:var(--gd);font-weight:800}

.devtests{margin-top:10px;border:1px dashed rgba(148,163,184,.35);border-radius:14px;padding:10px}
.devtests summary{cursor:pointer;font-weight:800;font-size:12px;color:var(--muted)}
.devtests .tres{font-size:12px;margin-top:8px;color:var(--tx)}
.devtests .trow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(148,163,184,.15)}
.devtests .trow:last-child{border-bottom:none}
/* ── UI Mode (Standard vs Cabinet) ── */

/* Accessibility: screen-reader only */

/* Segmented control */
.seg-btn{border:none;background:transparent;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;color:var(--muted);cursor:pointer;transition:.15s}
.seg-btn:hover{color:var(--text-primary)}
.seg-btn.active{background:var(--card);color:var(--text-primary);box-shadow:0 2px 10px rgba(15,23,42,.08)}

/* Buttons */
.btn-ghost{background:transparent;border:1.5px solid var(--br);color:var(--muted)}
.btn-ghost:hover{background:rgba(148,163,184,.12);color:var(--text-primary);transform:translateY(-1px)}

/* Cabinet Journal */
.jr-table{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:860px}
.jr-table thead th{font-size:11px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;font-weight:900;padding:0 10px 6px;white-space:nowrap}
.jr-table tbody tr{background:var(--card);border:1px solid rgba(148,163,184,.18)}
.jr-table tbody tr td{padding:8px 10px;vertical-align:middle}
.jr-table tbody tr{border-radius:14px}
.jr-table tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.jr-table tbody tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.jr-table .fi,.jr-table .fselect{height:34px}
.jr-table .fi{border-radius:10px}
.jr-table .fselect{border-radius:10px}
.jr-actions{display:flex;justify-content:flex-end}

/* Import box + History */
.importbox{border:1px dashed rgba(56,189,248,.55);background:rgba(14,165,233,.04)}
.importbox .btn{white-space:nowrap}
.histwrap table{width:100%;border-collapse:collapse}
.histwrap th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:10px;border-bottom:1px solid rgba(148,163,184,.18)}
.histwrap td{padding:10px;border-bottom:1px solid rgba(148,163,184,.12);font-size:13px}
.histwrap tr{cursor:pointer}
.histwrap tr:hover{background:rgba(148,163,184,.08)}
.histwrap .num{text-align:right;font-variant-numeric:tabular-nums}

.hist-status{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(148,163,184,.18)}
.hist-status.pay{background:rgba(239,68,68,.10);color:var(--red);border-color:rgba(239,68,68,.22)}
.hist-status.credit{background:rgba(34,197,94,.10);color:var(--gd);border-color:rgba(34,197,94,.22)}
.hist-status.zero{background:rgba(148,163,184,.08);color:var(--muted)}

/* Cabinet panel (IS) */
.cab-panel{margin-top:10px;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.02)}
.cab-panel .cab-title{font-weight:900;margin-bottom:6px}
.cab-panel .cab-sub{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}

.hero-title,.hero-badge,.hero-sub,.hero-btns,.hero-trust,.hero-card-wrap,.lnav{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-title,.hero-badge,.hero-sub,.hero-btns,.hero-trust,.hero-card-wrap{animation:none!important}}

/* ═══════════ IMPROVED TOAST ═══════════ */
.sc-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
  z-index:99999;
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c);
  color:#fff;padding:14px 24px;border-radius:14px;
  font-size:13.5px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 16px 48px rgba(0,0,0,.3),0 0 0 1px rgba(14,165,233,.2);
  display:flex;align-items:center;gap:10px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
  opacity:0;pointer-events:none;max-width:90vw;
  backdrop-filter:blur(12px);
}
.sc-toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.sc-toast-bar{position:absolute;bottom:0;left:8px;right:8px;height:3px;border-radius:0 0 14px 14px;background:var(--l-sky);transform-origin:left;animation:toastBar 3s linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ═══════════ SAVE FEEDBACK BADGE ═══════════ */
.save-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--gd);
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  padding:4px 10px;border-radius:20px;
  animation:savePop .4s cubic-bezier(.34,1.56,.64,1);
  transition:opacity .3s ease;
}
@keyframes savePop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ═══════════ ONBOARDING WIZARD ═══════════ */
.ob-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(5,13,21,.85);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:afadeIn .3s ease;
}
.ob-box{
  background:#fff;border-radius:24px;padding:0;width:520px;max-width:100%;
  box-shadow:0 40px 120px rgba(0,0,0,.4);
  animation:aslideUp .35s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.ob-header{
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c);
  padding:28px 32px 22px;color:#fff;position:relative;overflow:hidden;
}
.ob-header::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 80% 20%,rgba(14,165,233,.3),transparent 50%);
  pointer-events:none;
}
.ob-step-dots{display:flex;gap:6px;margin-bottom:14px;position:relative;z-index:1}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:.3s}
.ob-dot.active{background:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,.5)}
.ob-dot.done{background:#22c55e}
.ob-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:22px;;position:relative;z-index:1}
.ob-sub{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;position:relative;z-index:1}
.ob-body{padding:28px 32px 32px}
.ob-field{margin-bottom:16px}
.ob-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.ob-field input,.ob-field select{
  width:100%;border:1.5px solid var(--br);border-radius:10px;
  padding:11px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
  color:var(--tx);background:var(--bg);outline:none;transition:.14s;
}
.ob-field input:focus,.ob-field select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,165,233,.12)}
.ob-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-choice{
  padding:14px;border:1.5px solid var(--br);border-radius:12px;
  cursor:pointer;transition:.2s;text-align:center;
}
.ob-choice:hover{border-color:#7dd3fc;background:var(--p25)}
.ob-choice.selected{border-color:var(--p);background:var(--p50);box-shadow:0 0 0 3px rgba(14,165,233,.12)}
.ob-choice-ico{font-size:24px;margin-bottom:6px}
.ob-choice-lbl{font-size:13px;font-weight:700;color:var(--tx)}
.ob-choice-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ob-actions{display:flex;gap:10px;margin-top:24px}
.ob-btn-next{
  flex:1;background:linear-gradient(135deg,var(--l-sky),#0284c7);color:#fff;
  border:none;border-radius:10px;padding:12px;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:14px;;cursor:pointer;
  transition:.2s;box-shadow:0 4px 16px rgba(14,165,233,.3);
}
.ob-btn-next:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,165,233,.4)}
.ob-btn-skip{
  background:transparent;border:1.5px solid var(--br);color:var(--muted);
  border-radius:10px;padding:12px 20px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  transition:.15s;
}
.ob-btn-skip:hover{border-color:var(--p);color:var(--tx)}

/* ═══════════ PWA INSTALL BANNER ═══════════ */
.pwa-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9500;
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c);color:#fff;
  padding:14px 20px;display:flex;align-items:center;gap:14px;
  box-shadow:0 -4px 30px rgba(0,0,0,.3);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.pwa-banner.show{transform:translateY(0)}
.pwa-banner-text{flex:1;font-size:13px;font-weight:600}
.pwa-banner-btn{
  background:var(--l-sky);color:#fff;border:none;border-radius:8px;
  padding:8px 16px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;;cursor:pointer;
}
.pwa-banner-close{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:16px}

/* ═══════════ VIDEO DEMO SECTION ═══════════ */

@media(max-width:768px){
  .ob-box{width:100%}
  .ob-choice-grid{grid-template-columns:1fr}
  .ob-header{padding:20px 20px 16px}
  .ob-body{padding:20px}
}

/* ═══════════ DASHBOARD — DKPI CARDS ═══════════ */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dash-kpis-new{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.dkpi-card{background:var(--card);border-radius:14px;border:1.5px solid var(--br);padding:16px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.dkpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,165,233,.1)}
.dkpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0}
.dkpi-blue::before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.dkpi-red::before{background:linear-gradient(90deg,#ef4444,#f87171)}
.dkpi-amber::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.dkpi-green::before{background:linear-gradient(90deg,#22c55e,#4ade80)}
.dkpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dkpi-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.dkpi-blue .dkpi-icon{background:#e0f2fe}
.dkpi-red .dkpi-icon{background:#fef2f2}
.dkpi-amber .dkpi-icon{background:#fffbeb}
.dkpi-green .dkpi-icon{background:#f0fdf4}
.dkpi-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:20px;background:var(--bg);color:var(--muted)}
.dkpi-tag-red{background:#fef2f2;color:#b91c1c}
.dkpi-tag-amber{background:#fffbeb;color:#b45309}
.dkpi-tag-green{background:#f0fdf4;color:#15803d}
.dkpi-label{font-size:11.5px;font-weight:600;color:var(--soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.dkpi-val{font-size:24px;font-weight:800;color:var(--tx);letter-spacing:-.8px;line-height:1}
.dkpi-unit{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.dkpi-prog{height:4px;background:var(--br);border-radius:10px;overflow:hidden;margin-top:10px}
.dkpi-prog-fill{height:100%;border-radius:10px;transition:width .6s ease}
.dkpi-blue .dkpi-prog-fill{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.dkpi-red .dkpi-prog-fill{background:linear-gradient(90deg,#ef4444,#f87171)}
.dkpi-amber .dkpi-prog-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.dkpi-green .dkpi-prog-fill{background:linear-gradient(90deg,#22c55e,#4ade80)}
.dkpi-prog-lbl{font-size:9.5px;color:var(--muted);font-weight:600;margin-top:4px}

/* ═══════════ DASHBOARD — RESULT STRIP ═══════════ */
.dash-result-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;background:var(--card);border:1.5px solid var(--br);border-radius:14px;padding:16px 22px;margin-bottom:14px;gap:8px}
.dash-res-item{display:flex;align-items:center;gap:11px;cursor:pointer;transition:.15s;border-radius:9px;padding:6px 8px}
.dash-res-item:hover{background:var(--bg)}
.dash-res-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.dash-res-ico-green{background:#f0fdf4}
.dash-res-ico-red{background:#fef2f2}
.dash-res-ico-amber{background:#fffbeb}
.dash-res-label{font-size:12px;font-weight:700;color:var(--tx)}
.dash-res-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.dash-res-val{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-left:auto}
.dash-res-sep{width:1px;height:48px;background:var(--brl)}
.dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ═══════════ HEALTH SCORE ═══════════ */
.hs-badge{font-size:13px;font-weight:800;padding:4px 14px;border-radius:20px;letter-spacing:-.3px}
.hs-badge.excellent{background:#f0fdf4;color:#15803d}
.hs-badge.bon{background:#fffbeb;color:#b45309}
.hs-badge.attention{background:#fef2f2;color:#b91c1c}
.hs-bar-wrap{height:8px;background:var(--br);border-radius:10px;overflow:hidden;margin-bottom:12px}
.hs-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#22c55e,#4ade80);transition:width .8s cubic-bezier(.4,0,.2,1)}
.hs-items{display:flex;flex-direction:column;gap:7px}
.hs-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--soft)}
.hs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hs-dot-ok{background:#22c55e}
.hs-dot-warn{background:#f59e0b}
.hs-dot-bad{background:#ef4444}
.hs-dot-pend{background:var(--br)}

/* ═══════════ PRICING TEASER (landing) ═══════════ */

/* ═══════════ HERO TRUST BADGES ═══════════ */
.hero-trust-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:4px}
.htb{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--l-soft);background:rgba(14,165,233,.06);border:1px solid rgba(14,165,233,.15);padding:4px 10px;border-radius:20px}

/* ═══════════ SIDEBAR ICON COLORS ═══════════ */
.nic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:13px;flex-shrink:0;background:var(--brl);transition:.15s}
.na:hover .nic{background:rgba(14,165,233,.1)}
.na.on .nic{background:rgba(14,165,233,.15)}
/* category colors */
.nic-blue{background:rgba(14,165,233,.1) !important}
.nic-red{background:rgba(239,68,68,.1) !important}
.nic-amber{background:rgba(245,158,11,.1) !important}
.nic-green{background:rgba(34,197,94,.1) !important}
.nic-teal{background:rgba(20,184,166,.1) !important}
.nic-purple{background:rgba(139,92,246,.1) !important}

/* ═══════════ SKELETON LOADER ═══════════ */
@keyframes skeletonLoad{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ═══════════ TOPBAR CONTEXTUAL ACTIONS ═══════════ */

/* ═══════════ DARK MODE — enhanced ═══════════ */

/* ═══════════ PRICING PAGE — glow popular card ═══════════ */

/* ═══════════ RESPONSIVE — new dashboard ═══════════ */
@media(max-width:900px){.dash-kpis-new{grid-template-columns:repeat(2,1fr)}.dash-result-strip{grid-template-columns:1fr}.dash-res-sep{display:none}.dash-two-col{grid-template-columns:1fr}}
@media(max-width:600px){.dash-kpis-new{grid-template-columns:1fr}}

/* ═══════════ HOW IT WORKS — redesign ═══════════ */
.hiw-sec{padding:80px clamp(20px,5vw,80px);background:linear-gradient(135deg,var(--l-bg2),#f0f9ff)}
.hiw-inner{max-width:960px;margin:0 auto}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.hiw-steps::before{content:'';position:absolute;top:32px;left:calc(16.67% + 24px);right:calc(16.67% + 24px);height:2px;background:linear-gradient(90deg,#0ea5e9,#38bdf8,#0ea5e9);z-index:0;pointer-events:none}
.hiw-step-card{background:#fff;border:1.5px solid var(--l-border2);border-radius:20px;padding:28px 22px;text-align:center;position:relative;z-index:1;transition:.3s}
.hiw-step-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,165,233,.1);border-color:rgba(14,165,233,.25)}
.hiw-num{width:36px;height:36px;background:linear-gradient(135deg,var(--l-sky),#0284c7);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:14px;color:#fff;margin:0 auto 16px;box-shadow:0 4px 14px rgba(14,165,233,.35)}
.hiw-ico{font-size:28px;margin-bottom:12px}
.hiw-step-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:16px;color:var(--l-tx);margin-bottom:8px}
.hiw-step-desc{font-size:13px;color:var(--l-muted);line-height:1.6;margin-bottom:14px}
.hiw-step-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--l-sky);background:var(--l-bg3);padding:4px 12px;border-radius:100px;border:1px solid var(--l-border2)}
@media(max-width:700px){.hiw-steps{grid-template-columns:1fr}.hiw-steps::before{display:none}}

/* ═══════════ BENTO GRID ═══════════ */
.bento-sec{padding:80px clamp(20px,5vw,80px);background:#fff}
.bento-inner{max-width:1100px;margin:0 auto}
.bento-header{margin-bottom:48px}
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:16px}
.bento-card{border-radius:20px;padding:28px;position:relative;overflow:hidden;transition:.3s}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.bento-lg{grid-column:span 1;grid-row:span 2}
.bento-sm{grid-column:span 1}
.bento-ico{font-size:32px;margin-bottom:14px}
.bento-card-title{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:16px;margin-bottom:8px}
.bento-card-desc{font-size:13px;line-height:1.6}
.bento-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.bento-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:rgba(255,255,255,.5);backdrop-filter:blur(4px)}
/* Bento colors */
.bento-blue{background:linear-gradient(145deg,#e0f2fe,#bae6fd);border:1.5px solid #7dd3fc}
.bento-blue .bento-card-title{color:#0369a1}
.bento-blue .bento-card-desc{color:#0284c7}
.bento-blue .bento-pill{color:#0369a1;border:1px solid #7dd3fc}
.bento-green{background:linear-gradient(145deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac}
.bento-green .bento-card-title{color:#15803d}
.bento-green .bento-card-desc{color:#16a34a}
.bento-amber{background:linear-gradient(145deg,#fffbeb,#fef3c7);border:1.5px solid #fde68a}
.bento-amber .bento-card-title{color:#b45309}
.bento-amber .bento-card-desc{color:#d97706}
.bento-purple{background:linear-gradient(145deg,#faf5ff,#ede9fe);border:1.5px solid #c4b5fd}
.bento-purple .bento-card-title{color:#6d28d9}
.bento-purple .bento-card-desc{color:#7c3aed}
.bento-teal{background:linear-gradient(145deg,#f0fdfa,#ccfbf1);border:1.5px solid #5eead4}
.bento-teal .bento-card-title{color:#0f766e}
.bento-teal .bento-card-desc{color:#0d9488}
.bento-red{background:linear-gradient(145deg,#fff1f2,#fecdd3);border:1.5px solid #fda4af}
.bento-red .bento-card-title{color:#be123c}
.bento-red .bento-card-desc{color:#e11d48}
@media(max-width:900px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-lg{grid-row:span 1}}
@media(max-width:600px){.bento-grid{grid-template-columns:1fr}}

/* ═══════════ FOOTER — enhanced ═══════════ */
.lfooter{
  background:linear-gradient(135deg,#0c1e2e,#0e3a5c);
  padding:48px clamp(20px,5vw,80px) 32px;
  position:relative;
  overflow:hidden;
}
.lfooter::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(14,165,233,.08),transparent 60%);pointer-events:none}
.lfooter::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(14,165,233,.5),transparent)}
.lfoot-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative;z-index:1}
.lfoot-brand{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.lfoot-copy{font-size:12.5px;color:rgba(255,255,255,.45);margin-top:4px;line-height:1.6}
.lfoot-desc{font-size:12px;color:rgba(255,255,255,.3);margin-top:8px;line-height:1.7}
.lfoot-links{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lfoot-lnk{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  padding:5px 11px;border-radius:8px;text-decoration:none;transition:.15s;
}
.lfoot-lnk:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);border-color:rgba(14,165,233,.3);transform:translateY(-1px)}
.lfoot-disc{font-size:11px;color:rgba(255,255,255,.25);margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);line-height:1.7;position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════════
   LANDING REDESIGN v2 — Clean Light Hero · Trust Strip · Visual Polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO: Clean white/sky gradient ── */
.hero{
  background:linear-gradient(160deg,#eaf6ff 0%,#ffffff 45%,#f0f9ff 100%) !important;
  border-bottom:1px solid #c7e9fb !important;
  padding:80px clamp(20px,5vw,80px) 80px !important;
}
.hero-grid{display:none}
.hero-grid::after{display:none}
.hero-orb:nth-child(1){background:radial-gradient(circle,rgba(14,165,233,.13),rgba(56,189,248,.06),transparent 70%)}
.hero-orb:nth-child(2){background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%)}
.hero-orb:nth-child(3){background:radial-gradient(circle,rgba(56,189,248,.1),transparent 70%)}

/* Hero text → dark on light */
.hero-badge{
  background:linear-gradient(135deg,#ddf1fd,#f0f9ff) !important;
  border:1.5px solid rgba(14,165,233,.35) !important;
  color:#0369a1 !important;
}
.hero-dot{background:#0ea5e9}
.hero-title{color:#0c1e2e !important}
.hero-title .grad{
  background:linear-gradient(135deg,#0ea5e9,#0284c7,#0369a1) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.hero-sub{color:#3d5a73 !important}
.hero-trust-badges .htb{
  background:rgba(14,165,233,.07) !important;
  border-color:rgba(14,165,233,.22) !important;
  color:#1e3a5f !important;
}
.hero-trust .htrust{color:#64899e !important}
.hsep{background:#c7e9fb !important}
/* Outline button → clean for light bg */
.hbtn-o{
  background:#fff !important;
  border:2px solid #bae6fd !important;
  color:#0284c7 !important;
}
.hbtn-o:hover{background:#e0f2fe !important;border-color:#0ea5e9 !important;color:#0369a1 !important;transform:translateY(-2px)}
/* Hero card: always visible */
.hero-card-wrap{opacity:1 !important;animation:none !important}

/* Reduce top empty space in hero */
.hero{padding-top:60px !important;padding-bottom:60px !important}
.hero>div{min-height:min(calc(100vh - 68px), 780px) !important}
/* Floating badge backgrounds work on dark bg already (they're white cards) */

/* ── REVEAL: make visible by default ─── */
/* Elements that haven't been observed yet shouldn't be invisible */
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none}
/* Keep subtle fade-in for elements that GET the visible class */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px)}
  .reveal.visible{opacity:1;transform:none}
}

/* ── NAV: White glassmorphism ── */
.lnav{
  background:rgba(255,255,255,.95) !important;
  border-bottom:1px solid #d4e9f7 !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:0 1px 16px rgba(14,165,233,.07) !important;
}
.lnav-link{color:#1e3a5f !important}
.lnav-link:hover{background:#e0f2fe !important;color:#0284c7 !important}
a.lnav-link{color:#1e3a5f !important}
.lnav-cta{
  background:linear-gradient(135deg,#0ea5e9,#0284c7) !important;
  box-shadow:0 4px 16px rgba(14,165,233,.35) !important;
}
.lnav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,165,233,.5) !important}
.sc-sahl{
  background:linear-gradient(135deg,#0ea5e9,#0284c7) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
  color:unset !important;
}
.sc-compta{
  background:linear-gradient(135deg,#0369a1,#0c1e2e) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
  color:unset !important;
}

/* ── TRUST STRIP ── */
.trust-strip{
  background:#fff;
  border-bottom:1px solid #e8f4fd;
  padding:0 clamp(20px,5vw,80px);
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;
  overflow:hidden;
}
.ts-item{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:#334155;
  padding:16px 28px;
  border-right:1px solid #e2e8f0;
  white-space:nowrap;
}
.ts-item:last-child{border-right:none}
.ts-ico{font-size:17px}
@media(max-width:700px){.ts-item{padding:12px 14px;font-size:11.5px;border:none}}

/* ═══════════ MOBILE UX BOOST ═══════════ */
@media(max-width:480px){
  /* Nav: bigger touch targets */
  .lnav{height:52px;padding:0 12px}
  .lnav-burger{width:44px;height:44px;font-size:20px}
  .lnav-mobile .lnav-link,.lnav-mobile .lnav-cta{padding:14px 16px;font-size:15px;min-height:44px}
  .lnav-mobile .lnav-cta{font-size:16px;font-weight:800;padding:16px}

  /* Hero: compact, CTA visible without scroll */
  .hero{padding:32px 16px 28px !important}
  .hero>div{padding:24px 0 24px !important;gap:24px !important}
  .hero-badge{font-size:11px;padding:5px 12px;margin-bottom:16px}
  .hero-title{font-size:28px !important;letter-spacing:-1.5px;margin-bottom:14px;line-height:1.1}
  .hero-sub{font-size:14px !important;line-height:1.6;margin-bottom:20px;max-width:100% !important}
  .hero-trust-badges{gap:6px;margin-bottom:0}
  .htb{font-size:10px;padding:3px 8px}
  .hero-btns{gap:10px;margin-top:4px}
  .hbtn-p{padding:16px 24px;font-size:16px;width:100%;justify-content:center;border-radius:14px;min-height:52px}
  .hbtn-o{padding:14px 24px;font-size:15px;width:100%;justify-content:center;text-align:center;border-radius:14px;min-height:48px}
  .hero-trust{gap:8px;margin-top:16px !important;justify-content:center}
  .htrust{font-size:11px}
  .hsep{height:14px}

  /* Trust strip: scrollable on mobile */
  .trust-strip{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;padding:0}
  .ts-item{flex-shrink:0;padding:12px 16px;font-size:12px}

  /* Features: tighter cards */
  .feat-card{padding:20px 16px}
  .feat-ico{font-size:28px;margin-bottom:10px}
  .feat-title{font-size:15px}
  .feat-desc{font-size:12.5px}

  /* Pricing: bigger CTA buttons */
  .pts-sec{padding:48px 12px}
  .pts-title{font-size:24px !important;letter-spacing:-1px}
  .pts-subtitle{font-size:13px}
  .pts-card{padding:24px 18px 26px}
  .pts-price{font-size:36px}
  .pts-free{font-size:32px}
  .pts-btn{padding:16px;font-size:15px;min-height:50px;border-radius:14px}
  .pts-feats li{font-size:13px}
  .pts-footer{gap:6px 12px;margin-top:32px}
  .pts-gtag{font-size:12px}

  /* Testimonials: compact */
  .testi-card{padding:20px}
  .testi-text{font-size:13.5px}
  .testi-name{font-size:13px}
  .testi-role{font-size:11px}

  /* FAQ: bigger touch targets */
  .faq-q{padding:16px;min-height:48px}
  .faq-q-text{font-size:14px}
  .faq-a{padding:0 16px 14px}
  .faq-a-text{font-size:13px}

  /* Section titles */
  .lsec-title{font-size:22px !important;letter-spacing:-1px}
  .lsec-sub{font-size:13px !important}
  .lsec{padding:48px 16px !important}
  .lsec-alt{padding:48px 16px !important}

  /* Footer */
  .lfooter{padding:28px 16px 20px}
  .lfoot-inner{gap:16px}
  .lfoot-disc{padding-bottom:80px}
}

/* ── Sticky Mobile CTA ── */
.mobile-sticky-cta{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(14,165,233,.15);
  padding:10px 12px;
  gap:8px;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.msc-btn{
  flex:1;
  background:linear-gradient(135deg,var(--l-sky),#0284c7);
  color:#fff;border:none;border-radius:12px;
  padding:14px 16px;font-size:15px;font-weight:800;
  cursor:pointer;min-height:48px;
  box-shadow:0 4px 16px rgba(14,165,233,.3);
}
.msc-demo{
  background:var(--l-bg2);color:var(--l-tx);
  border:1.5px solid var(--l-border);border-radius:12px;
  padding:14px 16px;font-size:14px;font-weight:700;
  cursor:pointer;min-height:48px;white-space:nowrap;
}
@media(max-width:768px){
  .mobile-sticky-cta{display:flex}
}
@media(min-width:769px){
  .mobile-sticky-cta{display:none !important}
}
[data-theme="dark"] .mobile-sticky-cta{background:rgba(15,23,42,.95);border-top-color:rgba(14,165,233,.2)}
[data-theme="dark"] .msc-demo{background:#1e293b;color:#e2e8f0;border-color:#334155}

/* ── SECTIONS: Tighter padding ── */
.lsec{padding:64px clamp(20px,5vw,80px) !important}
.hiw-sec{padding:64px clamp(20px,5vw,80px) !important}
.bento-sec{padding:64px clamp(20px,5vw,80px) !important}
.preview-sec{padding:64px clamp(20px,5vw,80px) !important}

/* ── SECTION LABELS: Better pill style ── */
.lsec-lbl{
  background:linear-gradient(135deg,#eff6ff,#e0f2fe) !important;
  border:1.5px solid rgba(14,165,233,.22) !important;
  color:#0284c7 !important;
  padding:5px 16px !important;
  border-radius:100px !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  display:inline-flex !important;
}

/* ── FEATURES CARDS: Colored top border ── */
.feat-grid{gap:20px !important}
.feat-card{
  border-top:3px solid #e2e8f0 !important;
  padding:26px 22px !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 2px 12px rgba(0,0,0,.04) !important;
  transition:all .22s ease !important;
}
.feat-card:nth-child(1){border-top-color:#0ea5e9 !important}
.feat-card:nth-child(2){border-top-color:#22c55e !important}
.feat-card:nth-child(3){border-top-color:#f59e0b !important}
.feat-card:nth-child(4){border-top-color:#8b5cf6 !important}
.feat-card:nth-child(5){border-top-color:#ef4444 !important}
.feat-card:nth-child(6){border-top-color:#14b8a6 !important}
.feat-card:hover{transform:translateY(-4px) !important;box-shadow:0 12px 32px rgba(14,165,233,.12) !important}
.feat-ico{font-size:30px !important;margin-bottom:14px !important;display:block !important}
.feat-title{font-size:15px !important;font-weight:800 !important;color:#0f172a !important;margin-bottom:8px !important}
.feat-desc{font-size:13.5px !important;line-height:1.65 !important;color:#64748b !important}

/* ── HOW IT WORKS: Blue gradient bg ── */
.hiw-sec{background:linear-gradient(135deg,#f0f7ff 0%,#e8f4ff 100%) !important}
.hiw-step-card{box-shadow:0 2px 16px rgba(14,165,233,.06) !important}

/* ── BENTO CARDS: Dark vivid backgrounds + white text ── */
.bento-card{border-radius:24px !important;padding:32px !important}
.bento-card-title{font-size:17px !important;font-weight:800 !important;color:#fff !important;margin:10px 0 8px !important}
.bento-card-desc{font-size:13.5px !important;color:rgba(255,255,255,.75) !important;line-height:1.65 !important}
.bento-ico{font-size:34px !important}
.bento-pill{background:rgba(255,255,255,.18) !important;color:#fff !important;border:1px solid rgba(255,255,255,.2) !important;font-weight:700 !important}
/* Override pale pastels → rich dark gradients so white text is readable */
.bento-blue{background:linear-gradient(145deg,#0369a1,#0284c7) !important;border-color:#38bdf8 !important}
.bento-blue .bento-card-title,.bento-blue .bento-card-desc{color:#fff !important}
.bento-green{background:linear-gradient(145deg,#15803d,#16a34a) !important;border-color:#4ade80 !important}
.bento-green .bento-card-title,.bento-green .bento-card-desc{color:#fff !important}
.bento-amber{background:linear-gradient(145deg,#b45309,#d97706) !important;border-color:#fbbf24 !important}
.bento-amber .bento-card-title,.bento-amber .bento-card-desc{color:#fff !important}
.bento-purple{background:linear-gradient(145deg,#6d28d9,#7c3aed) !important;border-color:#a78bfa !important}
.bento-purple .bento-card-title,.bento-purple .bento-card-desc{color:#fff !important}
.bento-teal{background:linear-gradient(145deg,#0f766e,#0d9488) !important;border-color:#2dd4bf !important}
.bento-teal .bento-card-title,.bento-teal .bento-card-desc{color:#fff !important}
.bento-red{background:linear-gradient(145deg,#be123c,#e11d48) !important;border-color:#fb7185 !important}
.bento-red .bento-card-title,.bento-red .bento-card-desc{color:#fff !important}

/* ── NUMBERS / STATS SECTION ── */
.numbers-sec{
  background:linear-gradient(135deg,#080f1d,#0e2a4a);
  padding:52px clamp(20px,5vw,80px);
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
}
.num-item{
  display:flex;flex-direction:column;align-items:center;
  padding:16px 48px;
  border-right:1px solid rgba(255,255,255,.1);
  min-width:150px;
}
.num-item:last-child{border-right:none}
.num-val{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;
  font-size:38px;color:#fff;letter-spacing:-2px;line-height:1;margin-bottom:6px;
}
.num-val em{color:#38bdf8;font-style:normal}
.num-lbl{font-size:12.5px;color:rgba(255,255,255,.55);font-weight:600;text-align:center}
@media(max-width:700px){
  .num-item{border:none;padding:12px 20px}
  .num-val{font-size:28px}
  .numbers-sec{padding:36px 20px}
}

/* ── TESTIMONIALS: Cleaner cards ── */
.testi-grid{gap:20px !important}
.testi-card{
  border:1.5px solid #e8f0f8 !important;
  background:#fff !important;
  border-radius:20px !important;
  padding:28px !important;
  box-shadow:0 2px 16px rgba(0,0,0,.04) !important;
  transition:all .22s ease !important;
}
.testi-card::before{display:none !important}
.testi-card:hover{border-color:rgba(14,165,233,.2) !important;box-shadow:0 8px 32px rgba(14,165,233,.08) !important;transform:translateY(-3px) !important}

/* ── PRICING TEASER: Stronger accent ── */

/* ── CTA SECTION: Keep dark, add glow ── */

/* ── LSEC-TITLE: Bolder ── */
.lsec-title{
  font-size:clamp(26px,3.8vw,44px) !important;
  letter-spacing:-1.5px !important;
  line-height:1.1 !important;
}

/* ── PREVIEW SECTION: Dark card ── */
.preview-sec{background:#f8faff}
.preview-frame{
  border-radius:20px !important;
  box-shadow:0 30px 80px rgba(14,165,233,.15),0 0 0 1px rgba(14,165,233,.1) !important;
  overflow:hidden !important;
}

@media(max-width:700px){.lfoot-inner{grid-template-columns:1fr}}

/* ── FIX: Old numbers section — texte invisible sur fond sombre ── */
.numbers-sec .number-val{
  background:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
}
.numbers-sec .number-val span{
  background:none !important;
  -webkit-text-fill-color:#38bdf8 !important;
  color:#38bdf8 !important;
}
.numbers-sec .number-lbl{color:rgba(255,255,255,.62) !important}
.numbers-sec .number-sep{background:rgba(255,255,255,.12) !important}

/* ── FIX: Hero UI card sur fond clair ── */
.hero-ui-card{
  background:rgba(255,255,255,.92) !important;
  border:1.5px solid rgba(14,165,233,.18) !important;
  box-shadow:0 24px 80px rgba(14,165,233,.15),0 8px 32px rgba(0,0,0,.06) !important;
  backdrop-filter:blur(16px) !important;
}
/* Floating badges hero — already white, just ensure visibility */
.hero-kpi-lbl{color:#64899e !important}
.hero-kpi-val{color:#0ea5e9}

/* ── Mobile nav burger — dark text on white nav ── */
.lnav-burger{
  background:#f0f9ff !important;
  border-color:#bae6fd !important;
  color:#0c1e2e !important;
}
.lnav-mobile-title{color:#0c1e2e !important}

/* ═══════════════════════════════════════════════════════════════
   PRICING SECTION — pts-* (4 plans : Découverte / Essentiel AE /
   Business / Cabinet)
═══════════════════════════════════════════════════════════════ */
.pts-sec{
  background:linear-gradient(180deg,#f8faff 0%,#ffffff 55%,#f0f8fe 100%);
  padding:96px clamp(20px,5vw,80px);
}
.pts-inner{max-width:1240px;margin:0 auto}

/* HEAD */
.pts-head{text-align:center;margin-bottom:56px}
.pts-eyebrow{
  display:inline-block;
  background:rgba(14,165,233,.1);color:#0369a1;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 18px;border-radius:20px;margin-bottom:20px;
}
.pts-title{
  font-size:clamp(28px,4vw,46px);font-weight:800;color:#0c1e2e;
  letter-spacing:-2px;line-height:1.1;margin:0 0 14px;
}
.pts-title span{color:#0ea5e9}
.pts-subtitle{color:#6b8aa0;font-size:16px;margin:0}

/* GRID */
.pts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  align-items:start;
}

/* CARD BASE */
.pts-card{
  background:#fff;
  border:1.5px solid #e4edf5;
  border-radius:20px;
  padding:28px 22px 30px;
  position:relative;
  transition:box-shadow .25s,transform .25s;
}
.pts-card:hover{
  box-shadow:0 16px 48px rgba(14,165,233,.12);
  transform:translateY(-4px);
}

/* BADGE */
.pts-badge{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:5px 12px;border-radius:14px;margin-bottom:14px;
}
.pts-badge-ae{background:rgba(16,185,129,.12);color:#059669}
.pts-badge-pop{background:rgba(255,255,255,.22);color:#fff}

/* PLAN NAME */
.pts-plan{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0369a1;margin-bottom:10px;
}
.pts-plan-w{color:rgba(255,255,255,.7)}

/* PRICE */
.pts-free{
  font-size:40px;font-weight:800;color:#0c1e2e;
  letter-spacing:-2px;line-height:1;margin-bottom:6px;
}
.pts-price{
  font-size:44px;font-weight:800;color:#0c1e2e;
  letter-spacing:-2.5px;line-height:1;margin-bottom:6px;
}
.pts-price span,.pts-free span{
  font-size:15px;font-weight:600;letter-spacing:0;
  color:#7b96ab;margin-left:3px;vertical-align:middle;
}
.pts-price-w{color:#fff}
.pts-price-w span{color:rgba(255,255,255,.6)}

/* DESC */
.pts-desc{font-size:13px;color:#7b96ab;margin-bottom:18px}
.pts-desc-w{color:rgba(255,255,255,.65)}

/* SEPARATOR */
.pts-sep{height:1px;background:#eef3f7;margin-bottom:18px}
.pts-sep-ae{background:rgba(16,185,129,.2)}
.pts-sep-pop{background:rgba(255,255,255,.2)}
.pts-sep-cab{background:rgba(255,255,255,.15)}

/* FEATURES */
.pts-feats{
  list-style:none;padding:0;margin:0 0 26px;
  display:flex;flex-direction:column;gap:10px;
}
.pts-feats li{
  font-size:13.5px;color:#374151;
  padding-left:22px;position:relative;line-height:1.4;
}
.pts-feats li::before{
  content:'✓';
  position:absolute;left:0;top:0;
  color:#0ea5e9;font-weight:700;font-size:13px;
}
.pts-feats-w li{color:rgba(255,255,255,.88)}
.pts-feats-w li::before{color:rgba(255,255,255,.65)}
.pts-no{text-decoration:line-through;opacity:.4}
.pts-no::before{content:'–' !important;color:#aaa !important}

/* BUTTONS */
.pts-btn{
  width:100%;padding:13px 16px;
  border:none;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:all .2s;letter-spacing:.01em;line-height:1;
}
.pts-btn-ghost{
  background:#f0f7ff;color:#0369a1;
  border:1.5px solid #c5dff5;
}
.pts-btn-ghost:hover{background:#e0f0ff;border-color:#93c5e8}
.pts-btn-ae{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.32);
}
.pts-btn-ae:hover{box-shadow:0 6px 24px rgba(16,185,129,.44);transform:translateY(-1px)}
.pts-btn-pop{
  background:#fff;color:#0369a1;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.pts-btn-pop:hover{background:#f0f8ff;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.pts-btn-cab{
  background:rgba(255,255,255,.12);color:#fff;
  border:1.5px solid rgba(255,255,255,.22);
}
.pts-btn-cab:hover{background:rgba(255,255,255,.2)}

/* ── CARD VARIANTS ── */

/* Essentiel AE — subtle green tint */
.pts-ae{
  border-color:#a7f3d0;
  background:linear-gradient(160deg,#f0fdf8 0%,#ffffff 100%);
}
.pts-ae .pts-plan{color:#059669}

/* Business POP — blue gradient, elevated */
.pts-pop{
  background:linear-gradient(160deg,#0369a1 0%,#0ea5e9 65%,#38bdf8 100%);
  border:none;
  box-shadow:0 20px 60px rgba(14,165,233,.35),0 0 0 2px rgba(14,165,233,.25);
  transform:translateY(-10px) scale(1.025);
}
.pts-pop:hover{
  box-shadow:0 28px 80px rgba(14,165,233,.42);
  transform:translateY(-14px) scale(1.025);
}

/* Cabinet — dark navy */
.pts-cab{
  background:linear-gradient(160deg,#0c1e2e 0%,#0f2a42 100%);
  border:none;
  box-shadow:0 12px 40px rgba(8,15,29,.35);
}

/* FOOTER */
.pts-footer{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 24px;margin-top:48px;
}
.pts-gtag{font-size:14px;color:#4b7a96;font-weight:500}
.pts-dot{color:#c4d8e8;font-size:20px;line-height:1}
.pts-more{font-size:14px;color:#0ea5e9;font-weight:600;text-decoration:none}
.pts-more:hover{text-decoration:underline}

/* RESPONSIVE */
@media(max-width:1100px){
  .pts-grid{grid-template-columns:repeat(2,1fr)}
  .pts-pop{transform:none}
  .pts-pop:hover{transform:translateY(-4px)}
}
@media(max-width:580px){
  .pts-grid{grid-template-columns:1fr}
  .pts-pop{transform:none;box-shadow:0 12px 40px rgba(14,165,233,.3)}
}

/* ═══════════════════════════════════════════════════════════════
   APP INTERIOR DESIGN v2 — polish sidebar, cards, topbar, pages
═══════════════════════════════════════════════════════════════ */

/* ── Sidebar — refined visual hierarchy ── */
.sb{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:2px 0 24px rgba(14,165,233,.06) !important;
}
.logo-w{
  padding:20px 16px 14px !important;
  border-bottom:1px solid var(--brl);
  margin-bottom:6px;
}
.na{
  border-radius:10px !important;
  padding:8px 10px !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  transition:all .16s cubic-bezier(.4,0,.2,1) !important;
}
.na.on{
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(14,165,233,.06)) !important;
  color:var(--pd) !important;
  font-weight:700 !important;
  box-shadow:0 2px 8px rgba(14,165,233,.1) !important;
}
.na.on::before{
  background:linear-gradient(180deg,#0ea5e9,#0369a1) !important;
  width:3px !important;
  border-radius:0 3px 3px 0 !important;
}
.na:hover{
  background:rgba(14,165,233,.07) !important;
  color:var(--pd) !important;
  transform:translateX(2px) !important;
}
.nic{
  border-radius:8px !important;
  transition:all .16s ease !important;
}
.na.on .nic{
  background:rgba(14,165,233,.15) !important;
}
.ngl{
  font-size:9.5px !important;
  letter-spacing:1.2px !important;
  color:var(--muted) !important;
  padding:10px 10px 4px !important;
}
.sbf{
  border-top:1px solid var(--brl) !important;
  padding:10px 9px !important;
}
.co-pill{
  border-radius:12px !important;
  transition:all .18s ease !important;
}
.co-pill:hover{
  box-shadow:0 4px 14px rgba(14,165,233,.12) !important;
}

/* ── Topbar override (v2) ── */
.topbar{
  background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%) !important;
  border-bottom:1px solid var(--brl) !important;
  box-shadow:0 1px 16px rgba(14,165,233,.06) !important;
  padding:0 18px 0 0 !important;
}

/* ── Cards — subtle hover lift ── */
.card{
  border-radius:14px !important;
  border:1px solid var(--brl) !important;
  transition:box-shadow .2s,border-color .2s !important;
}
.card:hover{
  border-color:var(--br) !important;
  box-shadow:0 4px 20px rgba(14,165,233,.07) !important;
}
.fsec{
  border-radius:14px !important;
  border:1px solid var(--brl) !important;
  transition:box-shadow .2s !important;
}
.fsec:hover{
  box-shadow:0 4px 20px rgba(14,165,233,.07) !important;
}

/* ── Page header — accent gradient line ── */
.ph{
  padding-bottom:16px !important;
  border-bottom:1px solid var(--brl) !important;
  margin-bottom:20px !important;
}
.ph-t{
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-.5px !important;
  color:var(--tx) !important;
}
.ph-s{
  font-size:12.5px !important;
  color:var(--muted) !important;
  margin-top:3px !important;
}

/* ── Form inputs — polished focus ── */
.fi:focus,.fselect:focus{
  border-color:var(--p) !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.12) !important;
  outline:none !important;
}
.fi,.fselect{
  border-radius:9px !important;
  background:var(--bg) !important;
  transition:border-color .15s,box-shadow .15s !important;
}
.fi:hover,.fselect:hover{
  border-color:#93c5e8 !important;
}

/* ── FST (form section title) ── */
.fst{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:var(--tx) !important;
  margin-bottom:16px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid var(--brl) !important;
}
.fsico{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  flex-shrink:0 !important;
}

/* ── KPI progress bars — smoother ── */
.dkpi-prog{
  height:4px !important;
  background:var(--brl) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  margin:10px 0 6px !important;
}
.dkpi-prog-fill{
  height:100% !important;
  border-radius:10px !important;
  transition:width .6s cubic-bezier(.4,0,.2,1) !important;
}
.dkpi-blue .dkpi-prog-fill{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.dkpi-red .dkpi-prog-fill{background:linear-gradient(90deg,#ef4444,#f97316)}
.dkpi-amber .dkpi-prog-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.dkpi-green .dkpi-prog-fill{background:linear-gradient(90deg,#22c55e,#14b8a6)}
.dkpi-prog-lbl{
  font-size:10px !important;
  color:var(--muted) !important;
  font-weight:600 !important;
}

/* ── Checklist items ── */
.cl-item{
  border-radius:10px !important;
  transition:all .15s ease !important;
}
.cl-item:hover{
  border-color:#7dd3fc !important;
  background:rgba(14,165,233,.03) !important;
}
.cl-item.done{
  background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(20,184,166,.04)) !important;
}

/* ── Buttons — subtle improvements ── */
.btn{
  border-radius:9px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}
.btn-p{
  box-shadow:0 3px 12px rgba(14,165,233,.3) !important;
}
.btn-p:hover{
  box-shadow:0 5px 18px rgba(14,165,233,.4) !important;
  transform:translateY(-1px) !important;
}

/* ── Disclaimer bar ── */

/* ════════════════════════════════════════════════════════════════
   APP INTERIOR DESIGN v3 — refined polish, light-only
════════════════════════════════════════════════════════════════ */

/* ── Body background — subtle texture ── */
body,.main{background:var(--bg) !important}

/* ── Page padding ── */
.page{padding:20px 22px 36px !important}

/* ── Page headers ── */
.ph{margin-bottom:16px !important}
.ph-t{
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-.5px !important;
  color:var(--tx) !important;
}
.ph-s{font-size:12.5px !important;color:var(--muted) !important;margin-top:3px !important}

/* ── Cards ── */
.card{
  background:#fff !important;
  border:1px solid var(--brl) !important;
  border-radius:14px !important;
  box-shadow:0 1px 4px rgba(14,165,233,.04),0 4px 16px rgba(12,30,46,.05) !important;
  transition:box-shadow .18s,border-color .18s !important;
}
.card:hover{
  box-shadow:0 2px 8px rgba(14,165,233,.08),0 8px 24px rgba(12,30,46,.08) !important;
  border-color:var(--br) !important;
}

/* ── Section titles inside cards ── */
.sec-title,.ct{
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--soft) !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
}

/* ── KPI / stat values ── */
.dkpi-val{
  font-size:24px !important;
  font-weight:900 !important;
  letter-spacing:-.8px !important;
  line-height:1.1 !important;
  color:var(--tx) !important;
}
.dkpi-label{
  font-size:11px !important;
  font-weight:600 !important;
  color:var(--muted) !important;
  margin-top:2px !important;
}

/* ── Tables ── */
table{border-collapse:collapse !important;width:100% !important}
thead th{
  background:var(--bg) !important;
  color:var(--soft) !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  padding:9px 12px !important;
  border-bottom:1.5px solid var(--brl) !important;
  white-space:nowrap !important;
}
tbody td{
  padding:9px 12px !important;
  font-size:12.5px !important;
  color:var(--tx) !important;
  border-bottom:1px solid var(--brl) !important;
  transition:background .12s !important;
}
tbody tr:hover td{background:var(--p25) !important}
tbody tr:last-child td{border-bottom:none !important}

/* ── Form labels ── */
.fl,label.fl{
  font-size:11.5px !important;
  font-weight:700 !important;
  color:var(--soft) !important;
  letter-spacing:.01em !important;
  margin-bottom:4px !important;
  display:block !important;
}

/* ── Inputs ── */
.fi,.fselect{
  border-radius:9px !important;
  border:1.5px solid var(--br) !important;
  background:#fff !important;
  color:var(--tx) !important;
  font-size:13px !important;
  padding:9px 11px !important;
  transition:border-color .15s,box-shadow .15s !important;
  width:100% !important;
}
.fi:focus,.fselect:focus{
  outline:none !important;
  border-color:var(--p) !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.12) !important;
}

/* ── Modals ── */
.ob-box{
  border-radius:18px !important;
  border:1px solid var(--brl) !important;
  box-shadow:0 24px 64px rgba(12,30,46,.18) !important;
  padding:24px !important;
}
.ob-title{
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:-.4px !important;
  color:var(--tx) !important;
}

/* ── Sidebar logo area ── */

/* ── Sidebar nav label groups ── */
.ng{margin-bottom:8px !important}

/* ── Nav items ── */
.na{
  padding:7px 10px !important;
  border-radius:9px !important;
  margin:1px 4px !important;
  transition:all .13s !important;
}
.na:hover{background:var(--p25) !important;color:var(--p) !important}
.na.on{
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(14,165,233,.06)) !important;
  color:var(--pd) !important;
}

/* ── Regime badge ── */
#regime-badge{
  border-radius:10px !important;
  border:1.5px solid var(--br) !important;
  background:linear-gradient(135deg,var(--card),var(--bg)) !important;
  margin:6px 8px !important;
  padding:7px 10px !important;
}

/* ── Footer local badge ── */
.local-badge{
  border-radius:11px !important;
  background:linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
  border-color:#a7f3d0 !important;
}

/* ── Tag / badge chips ── */
.tag,.badge{
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:700 !important;
  padding:2px 7px !important;
}

/* ── Alert / info boxes ── */
.alert,.note{
  border-radius:12px !important;
  padding:12px 14px !important;
  font-size:12.5px !important;
  border-left:3px solid currentColor !important;
}

/* ── Checklist ── */
.cl-item{
  border-radius:10px !important;
  padding:9px 11px !important;
  border:1px solid var(--brl) !important;
  background:#fff !important;
  transition:all .15s !important;
}
.cl-item.done{
  background:linear-gradient(135deg,#f0fdf4,#f7fffe) !important;
  border-color:#bbf7d0 !important;
}

/* ── Dashboard chart wrapper ── */

/* ── Section separators ── */
.fst{
  border:none !important;
  border-top:1px solid var(--brl) !important;
  margin:14px 0 !important;
}

/* ── Topbar title ── */
.tbp{color:var(--tx) !important;font-weight:800 !important}
.tbc{color:var(--muted) !important}

/* ── Disclaimer bar ── */
.app-disc-bar{
  background:linear-gradient(90deg,#fffbeb 0%,#fef3c7 100%) !important;
  border-bottom:1.5px solid #fde68a !important;
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--br);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── Admin panel tabs ── */
.adm-tab{
  padding:8px 14px;border:none;background:none;
  font-size:12px;font-weight:600;cursor:pointer;
  color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-2px;white-space:nowrap;transition:color .15s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.adm-tab:hover{color:var(--tx)}
.adm-tab-on{
  border-bottom:2px solid var(--p) !important;
  color:var(--p) !important;
  font-weight:700 !important;
}

/* ── Admin stat cards ── */
.adm-kpi{
  background:#fff;
  border:1px solid var(--brl);
  border-radius:12px;
  padding:14px;
  text-align:center;
  transition:box-shadow .15s;
}
.adm-kpi:hover{box-shadow:0 4px 16px rgba(14,165,233,.1)}
.adm-kpi-ico{font-size:20px;margin-bottom:4px}
.adm-kpi-val{font-size:19px;font-weight:900;letter-spacing:-.5px;line-height:1.1}
.adm-kpi-lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.03em}

/* ── Admin stat bar ── */
.adm-stat-bar{height:8px;background:var(--brl);border-radius:10px;overflow:hidden;margin-top:4px}
.adm-stat-bar-fill{height:100%;border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ════════════════════════════════════════════════
   DARK MODE — data-theme="dark" on <html>
   Couleurs riches, texte toujours visible
   ════════════════════════════════════════════════ */

/* ── Toggle button dans la sidebar ── */
.dm-toggle{
  margin:0 9px 8px;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 11px;
  border-radius:9px;
  background:var(--bg);
  border:1.5px solid var(--br);
  cursor:pointer;
  transition:.15s;
}
.dm-toggle:hover{background:var(--p25);border-color:#7dd3fc}
.dm-toggle-label{font-size:11px;font-weight:600;color:var(--soft);display:flex;align-items:center;gap:6px}
.dm-toggle-pill{
  width:36px;height:20px;border-radius:20px;
  background:var(--br);
  position:relative;transition:.2s;flex-shrink:0;
}
.dm-toggle-pill::after{
  content:'';position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
[data-theme="dark"] .dm-toggle-pill{background:var(--p)}
[data-theme="dark"] .dm-toggle-pill::after{left:calc(100% - 17px)}

/* ── Variables dark ── */
[data-theme="dark"]{
  --bg:#0f172a;
  --card:#1e293b;
  --tx:#e2e8f0;
  --soft:#b0c4d8;
  --muted:#94a3b8;
  --br:#2d4a66;
  --brl:#1e3a5f;
  --text-primary:#e2e8f0;
  --lb:#60a5fa;

  /* Primary — bleu ciel vif pour ressortir sur fond sombre */
  --p:#38bdf8;
  --pd:#7dd3fc;
  --p50:#0c2a47;
  --p25:#071929;
  --sky:#38bdf8;

  /* Sémantiques */
  --teal:#2dd4bf;--tg:#042f2e;
  --green:#4ade80;--gg:#052e16;--gd:#86efac;
  --red:#f87171;--rg:#2d0f0f;--rd:#fca5a5;
  --amber:#fbbf24;--ag:#2d1b0f;--ad:#fcd34d;

  /* Landing vars (not visible in dark mode but kept coherent) */
  --l-bg:#0f172a;--l-bg2:#0c2a47;--l-bg3:#071929;
  --l-tx:#e2e8f0;--l-soft:#94a3b8;--l-muted:#64748b;
  --l-border:#2d4a66;--l-border2:#1e3a5f;
}

/* ── Sidebar (important requis car v2 utilise !important) ── */
[data-theme="dark"] .sb{background:#0f1f30 !important;border-right-color:#2d4a66 !important;box-shadow:2px 0 24px rgba(0,0,0,.4) !important}
[data-theme="dark"] .sbf{border-top-color:#2d4a66 !important;border-top-width:1px !important}
[data-theme="dark"] .logo-w{border-bottom-color:#2d4a66 !important}
[data-theme="dark"] .mode-btn.on{background:#1e3a5f !important;color:#7dd3fc !important}
[data-theme="dark"] .na{color:#94a3b8 !important}
[data-theme="dark"] .na:hover{background:rgba(56,189,248,.08) !important;color:#38bdf8 !important}
[data-theme="dark"] .na.on{background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(56,189,248,.06)) !important;color:#7dd3fc !important;box-shadow:0 2px 8px rgba(56,189,248,.1) !important}
[data-theme="dark"] .na.on::before{background:linear-gradient(180deg,#38bdf8,#0284c7) !important}
[data-theme="dark"] .na.on .nic{background:rgba(56,189,248,.18) !important}
[data-theme="dark"] .ngl{color:#64748b !important}
[data-theme="dark"] .local-badge{background:#052e16;border-color:#166534}
[data-theme="dark"] .lb-s{color:#86efac}
[data-theme="dark"] #local-size{color:#4ade80}

/* ── Topbar (important requis car v2 utilise !important) ── */
[data-theme="dark"] .topbar{
  background:linear-gradient(180deg,#1e293b 0%,#172135 100%) !important;
  border-bottom-color:#2d4a66 !important;
  box-shadow:0 1px 16px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .ndot{border-color:#1e293b}

/* ── Main content area ── */
[data-theme="dark"] body{color:var(--tx)}
[data-theme="dark"] #view-app{background:#0f172a}

/* ── Cards (v3 utilise background:#fff !important) ── */
[data-theme="dark"] .card{background:#1e293b !important;border-color:#2d4a66 !important;box-shadow:0 1px 4px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2) !important}
[data-theme="dark"] .card:hover{border-color:#2d5a80 !important;box-shadow:0 2px 8px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3) !important}
[data-theme="dark"] .kpi{background:#1e293b !important;border-color:#2d4a66 !important}
[data-theme="dark"] .cl-card{background:#1e293b !important}
[data-theme="dark"] .fsec{background:#1e293b !important;border-color:#2d4a66 !important}

/* ── Inputs (v3 utilise background:#fff !important) ── */
[data-theme="dark"] .fi,[data-theme="dark"] .fselect{
  background:#172135 !important;
  color:#e2e8f0 !important;
  border-color:#2d4a66 !important;
}
[data-theme="dark"] .fi:focus,[data-theme="dark"] .fselect:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.14) !important;
}
[data-theme="dark"] .fi:hover,[data-theme="dark"] .fselect:hover{
  border-color:#3a6080 !important;
}
[data-theme="dark"] .fi::placeholder{color:#64748b !important}

/* ── Nav items (v3 override) ── */
[data-theme="dark"] .na:hover{background:rgba(56,189,248,.08) !important;color:#38bdf8 !important}
[data-theme="dark"] .na.on{background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(56,189,248,.06)) !important;color:#7dd3fc !important}

/* ── Boutons ── */
[data-theme="dark"] .btn-g{background:#1e293b;color:#e2e8f0;border-color:#2d4a66}
[data-theme="dark"] .btn-g:hover{background:#243347;border-color:#38bdf8;color:#38bdf8}
[data-theme="dark"] .pay-period-btn.active{background:#1e3a5f;color:#7dd3fc}
[data-theme="dark"] .mode-btn{color:#94a3b8}

/* ── Formulaires & inputs ── */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#1e293b !important;
  color:#e2e8f0 !important;
  border-color:#2d4a66 !important;
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#64748b !important}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.12) !important;
}

/* ── Tables ── */
[data-theme="dark"] table{color:#e2e8f0}
[data-theme="dark"] thead tr,[data-theme="dark"] .tbl-head,[data-theme="dark"] th{background:#172135 !important;color:#94a3b8 !important}
[data-theme="dark"] tbody tr:hover{background:#243347 !important}
[data-theme="dark"] td{border-color:#2d4a66 !important}
[data-theme="dark"] .tvas-r{border-bottom-color:#2d4a66}

/* ── Modals / overlay ── */
[data-theme="dark"] .modal-card,[data-theme="dark"] .auth-box,[data-theme="dark"] .pay-modal,[data-theme="dark"] .gate-card{
  background:#1e293b !important;
  border-color:#2d4a66 !important;
}
[data-theme="dark"] .auth-tabs{background:#172135}
[data-theme="dark"] .auth-tab.on{background:#1e293b;color:#38bdf8}
[data-theme="dark"] .auth-input{background:#172135 !important;color:#e2e8f0 !important;border-color:#2d4a66 !important}

/* ── Page header ── */
[data-theme="dark"] .ph-t{color:#e2e8f0}
[data-theme="dark"] .app-disc-bar{background:linear-gradient(90deg,#2d1b0f,#251605);border-bottom-color:#92400e}

/* ── Alert boxes ── */
[data-theme="dark"] .alert.info{background:#071929;border-color:#0c4a6e}
[data-theme="dark"] .alert.success{background:#052e16;border-color:#14532d}
[data-theme="dark"] .alert.warn{background:#2d1b0f;border-color:#92400e}
[data-theme="dark"] .alert.danger{background:#2d0f0f;border-color:#7f1d1d}

/* ── Tableaux TVA / CNSS / IR ── */
[data-theme="dark"] .tvas-t{color:#e2e8f0}
[data-theme="dark"] .tvasm{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .tvas-r .tvas-l{color:#94a3b8}
[data-theme="dark"] .tvas-sep{background:#2d4a66}

/* ── Dashboard KPI ── */
[data-theme="dark"] .dkpi-tag{background:#172135;color:#94a3b8}
[data-theme="dark"] .dash-res-item:hover{background:#243347}

/* ── Calendar ── */
[data-theme="dark"] .cal-sb-card{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .cal-sb-evt{background:#172135;border-color:#2d4a66}
[data-theme="dark"] .cal-modal-input,[data-theme="dark"] .cal-modal-select{background:#172135;border-color:#2d4a66;color:#e2e8f0}
[data-theme="dark"] .cal-status-btn{background:#172135;border-color:#2d4a66;color:#94a3b8}

/* ── Section fichiers ── */
[data-theme="dark"] .sf-zone{background:#172135;border-color:#2d4a66}
[data-theme="dark"] .sf-zone:hover{background:#1e3a5f;border-color:#38bdf8}

/* ── Parrainage widget (dark) ── */
[data-theme="dark"] .dash-ref-mini{background:linear-gradient(135deg,#2d1b0f 0%,#1f1505 100%) !important;border-color:#92400e !important;box-shadow:0 4px 16px rgba(0,0,0,.3) !important}
[data-theme="dark"] .dash-ref-mini::before{background:radial-gradient(circle,rgba(251,191,36,.12) 0%,transparent 70%)}
[data-theme="dark"] .dash-ref-mini:hover{box-shadow:0 10px 28px rgba(217,119,6,.25) !important;border-color:#f59e0b !important}
[data-theme="dark"] .dash-ref-title{color:#fcd34d !important}
[data-theme="dark"] .dash-ref-chip{background:#422006 !important;border-color:#92400e !important;color:#fbbf24 !important}
[data-theme="dark"] .dash-ref-progress{background:#422006 !important}
[data-theme="dark"] .dash-ref-tip{color:#fcd34d !important}
[data-theme="dark"] .dash-ref-link-box{background:#1c1306 !important;border-color:#92400e !important;color:#fbbf24 !important}
[data-theme="dark"] .dash-ref-link-box:hover{border-color:#f59e0b !important;color:#fde68a !important}
[data-theme="dark"] .dash-ref-link-box.is-empty{color:#d97706 !important}
[data-theme="dark"] .dash-ref-counts span{color:#fbbf24 !important}

/* ── Suivi dossiers ── */
[data-theme="dark"] .suivi-card{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .suivi-card-header:hover{background:#243347}
[data-theme="dark"] .suivi-badge.todo{background:#172135;color:#94a3b8;border-color:#2d4a66}

/* ── Admin panel ── */
[data-theme="dark"] .adm-kpi{background:#172135;border-color:#2d4a66}
[data-theme="dark"] .adm-kpi-val{color:#e2e8f0}
[data-theme="dark"] .adm-stat-bar{background:#2d4a66}

/* ── Scrollbars ── */
[data-theme="dark"] ::-webkit-scrollbar{width:6px;height:6px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#0f172a}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2d4a66;border-radius:3px}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#38bdf8}

/* ── Corps complet — !important requis (v2/v3 utilisent !important) ── */
[data-theme="dark"] .cw{background:linear-gradient(135deg,#0c2a47,#0e3a5c)}
[data-theme="dark"] .or{border-bottom-color:#2d4a66}
/* cl-item: v3 force background:#fff !important → on doit surenchérir */
[data-theme="dark"] .cl-item{background:#172135 !important;border-color:#2d4a66 !important;color:#e2e8f0 !important}
[data-theme="dark"] .cl-item:hover{background:#1e293b !important;border-color:#3a6080 !important}
[data-theme="dark"] .cl-item.done{background:linear-gradient(135deg,rgba(74,222,128,.08),rgba(45,212,191,.05)) !important;border-color:#14532d !important}
[data-theme="dark"] .cl-txt{color:#e2e8f0 !important}
[data-theme="dark"] .cl-chk{border-color:#2d4a66 !important}
[data-theme="dark"] .cl-bar{background:#2d4a66}
[data-theme="dark"] .plan-bar{background:#172135 !important;border-color:#2d4a66 !important}
[data-theme="dark"] .seg-btn{background:#172135 !important;border-color:#2d4a66 !important;color:#94a3b8 !important}
[data-theme="dark"] .seg-btn.active{background:#1e3a5f !important;color:#38bdf8 !important}
[data-theme="dark"] .storage-risk.local{background:#2d1b0f;border-color:#92400e;color:#fcd34d}
[data-theme="dark"] .storage-risk.cloud{background:#052e16;border-color:#14532d;color:#86efac}
/* Modal paiement / onboarding */
[data-theme="dark"] .ob-box{background:#1e293b !important;border-color:#2d4a66 !important}
[data-theme="dark"] .ob-body{background:#1e293b}
[data-theme="dark"] .ob-field label{color:#94a3b8 !important}
/* Dashboard icônes pastel → dark */
[data-theme="dark"] .dash-res-ico-green{background:#052e16}
[data-theme="dark"] .dash-res-ico-red{background:#2d0f0f}
[data-theme="dark"] .dash-res-ico-amber{background:#2d1b0f}
/* Referral link dans dashboard — override déplacé dans index.html inline style */
/* Payment modal file input */
[data-theme="dark"] #pay-proof-input{background:#1e293b !important;color:#e2e8f0 !important;border-color:#2d4a66 !important}
/* Email template preview panel */
[data-theme="dark"] #fae-preview{background:#1e293b !important;color:#e2e8f0 !important;border-color:#2d4a66 !important}

/* ════════════════════════════════════════════════
   DARK MODE — complément (couvre tous les #fff CSS)
   ════════════════════════════════════════════════ */

/* Loader */
[data-theme="dark"] #app-loader{background:#0f172a}
[data-theme="dark"] #app-loader .al-spinner{border-color:#1e3a5f;border-top-color:#38bdf8}
[data-theme="dark"] #app-loader .al-text{color:#94a3b8}

/* Auth modal */
[data-theme="dark"] .auth-box{background:#1e293b;box-shadow:0 40px 100px rgba(0,0,0,.7)}
[data-theme="dark"] .auth-tab{color:#94a3b8}
[data-theme="dark"] .auth-tab.on{background:#1e3a5f;color:#38bdf8}
[data-theme="dark"] .auth-sep span{background:#1e293b;color:#64748b}
[data-theme="dark"] .auth-input{background:#172135;border-color:#2d4a66;color:#e2e8f0}
[data-theme="dark"] .auth-label{color:#94a3b8}

/* Paiement */
[data-theme="dark"] .pay-period-btn.active{background:#1e3a5f;color:#7dd3fc}
[data-theme="dark"] .pay-plan-card{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .pay-plan-card.selected{border-color:#38bdf8}
[data-theme="dark"] .pay-plan-name{color:#e2e8f0}
[data-theme="dark"] .pay-plan-price{color:#e2e8f0}

/* Sidebar mode toggle */
[data-theme="dark"] .mode-btn.on{background:#1e3a5f;color:#7dd3fc}

/* Modals calendrier / entreprise */
[data-theme="dark"] .cal-modal-box,[data-theme="dark"] .co-modal-box{
  background:#1e293b;box-shadow:0 30px 80px rgba(0,0,0,.6)
}
[data-theme="dark"] .co-modal-title{color:#e2e8f0}
[data-theme="dark"] .co-modal-input{background:#172135;border-color:#2d4a66;color:#e2e8f0}

/* Gate (paywall) */
[data-theme="dark"] .gate-overlay{background:rgba(0,0,0,.75)}
[data-theme="dark"] .gate-card{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .gate-title{color:#e2e8f0}
[data-theme="dark"] .gate-sub{color:#94a3b8}

/* Plan bar (barre abonnement) */
[data-theme="dark"] .plan-bar{background:#172135;border-top-color:#2d4a66}
[data-theme="dark"] .plan-bar-t{color:#e2e8f0}
[data-theme="dark"] .plan-badge{color:#94a3b8}

/* Topbar components */
[data-theme="dark"] .topbar-title{color:#e2e8f0}
[data-theme="dark"] .notif{background:#1e293b;border-color:#2d4a66;color:#94a3b8}
[data-theme="dark"] .notif-panel{background:#1e293b;border-color:#2d4a66;box-shadow:0 8px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .notif-item{border-bottom-color:#2d4a66}
[data-theme="dark"] .notif-item:hover{background:#243347}

/* Tables dans les pages */
[data-theme="dark"] .tbl-row{background:#1e293b}
[data-theme="dark"] .tbl-row:nth-child(even){background:#172135}
[data-theme="dark"] .tbl-row:hover{background:#243347}
[data-theme="dark"] .tbl-th{background:#172135;color:#94a3b8;border-color:#2d4a66}
[data-theme="dark"] .tbl-td{border-color:#2d4a66;color:#e2e8f0}

/* Formulaires saisie */
[data-theme="dark"] .field-group{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .field-label{color:#94a3b8}
[data-theme="dark"] .field-hint{color:#64748b}
[data-theme="dark"] .form-section{background:#1e293b;border-color:#2d4a66}

/* Sections TV A, CNSS, IS */
[data-theme="dark"] .tvas-box{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .tvas-v{color:#e2e8f0}
[data-theme="dark"] .tva-echbox{border-color:#92400e}

/* Historique */
[data-theme="dark"] .hist-row{border-bottom-color:#2d4a66}
[data-theme="dark"] .hist-row:hover{background:#243347}
[data-theme="dark"] .hist-month{color:#94a3b8}

/* Factures */
[data-theme="dark"] .fac-row{background:#1e293b;border-color:#2d4a66}
[data-theme="dark"] .fac-row:hover{background:#243347}

/* Smart Import / OCR */
[data-theme="dark"] .import-zone{background:#172135;border-color:#2d4a66}
[data-theme="dark"] .import-zone:hover{border-color:#38bdf8;background:#1e3a5f}

/* Toast notification */
[data-theme="dark"] .sc-toast{background:#1e293b;color:#e2e8f0;border-color:#2d4a66;box-shadow:0 4px 20px rgba(0,0,0,.5)}

/* Modals JS-générées (inline background:#fff) */
[data-theme="dark"] .sc-modal-inner,
[data-theme="dark"] .data-modal-box,
[data-theme="dark"] .onboarding-box {
  background:#1e293b !important;
  color:#e2e8f0 !important;
}

/* Cibler les éléments avec inline style background:#fff dans l'app */
[data-theme="dark"] #view-app [style*="background:#fff"]:not([class*="landing"]):not([class*="lnav"]):not([class*="lsec"]):not([class*="lhero"]),
[data-theme="dark"] #view-app [style*="background: #fff"]:not([class*="landing"]) {
  background:#1e293b !important;
}

/* Fix texte noir sur fond sombre (inline color) */
[data-theme="dark"] #view-app [style*="color:#0c1e2e"],
[data-theme="dark"] #view-app [style*="color: #0c1e2e"],
[data-theme="dark"] #view-app [style*="color:#1e293b"] {
  color:#e2e8f0 !important;
}
[data-theme="dark"] #view-app [style*="color:#334155"] {
  color:#cbd5e1 !important;
}

/* Fix borders sur fond sombre */
[data-theme="dark"] #view-app [style*="border:1.5px solid #d4e9f7"],
[data-theme="dark"] #view-app [style*="border: 1.5px solid #d4e9f7"],
[data-theme="dark"] #view-app [style*="border:1px solid var(--br)"] {
  border-color:#2d4a66 !important;
}

/* Fix backgrounds pastels clair (p50, gg, ag, rg) — déjà couverts par vars mais certains sont en dur */
[data-theme="dark"] #view-app [style*="background:#e0f2fe"] { background:#0c2a47 !important; color:#7dd3fc !important; }
[data-theme="dark"] #view-app [style*="background:#f0fdf4"] { background:#052e16 !important; color:#86efac !important; }
[data-theme="dark"] #view-app [style*="background:#fffbeb"] { background:#2d1b0f !important; color:#fcd34d !important; }
[data-theme="dark"] #view-app [style*="background:#fef2f2"] { background:#2d0f0f !important; color:#fca5a5 !important; }

/* Fix des header de tableaux gris clair */
[data-theme="dark"] [style*="background:var(--bg)"] { background:var(--bg) !important; }