/* ============================================================
   VANTEX — Premium landing v2  (full redesign, WIP)
   Direction: premium fintech · warm-paper canvas · deep emerald
   Type: Clash Display (headlines) + Satoshi (body)
   Texture: ledger grid + grain · layered depth (no hue change)
   Image slots are intentional EMPTY upload zones.
   ============================================================ */

:root {
  /* Brand emerald */
  --e-950:#022c22; --e-900:#064e3b; --e-800:#065f46; --e-700:#047857;
  --e-600:#059669; --e-500:#10b981; --e-400:#34d399; --e-300:#6ee7b7; --e-100:#d1fae5; --e-50:#ecfdf5;

  /* Ink & neutrals (green-tinted, warm paper) */
  --ink:#0a1712;          /* near-black, faint green */
  --ink-2:#16241d;
  --paper:#f4f3ee;        /* warm canvas — the depth base */
  --paper-2:#eeede6;
  --surface:#ffffff;
  --line:#e6e4db;         /* warm hairline */
  --line-2:#d9d7cc;
  --muted:#6b7670;        /* warm slate */
  --muted-2:#9aa39d;
  --gold:#c79a3a;         /* sparing accent */

  /* Depth */
  --sh-sm:0 1px 2px rgb(10 23 18 / .06);
  --sh-md:0 6px 16px -6px rgb(10 23 18 / .12), 0 2px 6px -2px rgb(10 23 18 / .08);
  --sh-lg:0 22px 48px -16px rgb(10 23 18 / .20), 0 8px 18px -10px rgb(10 23 18 / .12);
  --sh-xl:0 48px 100px -30px rgb(10 23 18 / .38), 0 16px 36px -18px rgb(10 23 18 / .18);
  --sh-e:0 30px 70px -22px rgb(6 78 59 / .5);

  --r:1.5rem;
  --maxw:80rem;
  --display:'Clash Display','Satoshi',system-ui,sans-serif;
  --body:'Satoshi',system-ui,-apple-system,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4 { font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.04; letter-spacing:-0.02em; }
::selection { background:rgba(16,185,129,.22); }
a { text-decoration:none; color:inherit; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

/* ── Grain overlay (premium paper feel) ── */
body::after {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ledger grid texture ── */
.ledger {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(10,23,18,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,23,18,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 78%);
}
.aura { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aura::before,.aura::after {
  content:''; position:absolute; border-radius:50%; filter:blur(100px); opacity:.5;
  animation:drift 22s ease-in-out infinite alternate;
}
.aura::before { width:50rem; height:50rem; top:-22rem; right:-14rem;
  background:radial-gradient(circle at 30% 30%, rgba(52,211,153,.5), transparent 60%); }
.aura::after { width:42rem; height:42rem; bottom:-24rem; left:-14rem; animation-delay:-8s;
  background:radial-gradient(circle at 70% 70%, rgba(6,95,70,.4), transparent 62%); }
@keyframes drift { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(3rem,2rem) scale(1.12);} }

/* ── Type helpers ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--body);
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--e-700);
}
.eyebrow::before { content:''; width:1.6rem; height:1px; background:linear-gradient(90deg,transparent,var(--e-500)); }
.eyebrow.c { justify-content:center; }
.grad { background:linear-gradient(112deg,var(--e-800) 0%, var(--e-500) 52%, var(--e-400) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.display { font-family:var(--display); }
.lead { font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--muted); font-weight:500; line-height:1.6; }

/* ── Flag chip ── */
.flag {
  width:1.15rem; height:.8rem; border-radius:2px; object-fit:cover; display:inline-block;
  box-shadow:0 0 0 1px rgba(10,23,18,.08), 0 1px 2px rgba(10,23,18,.15);
}

/* ── Badge / pill ── */
.badge {
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .85rem;
  background:var(--surface); border:1px solid var(--line); border-radius:9999px;
  font-size:.78rem; font-weight:600; color:var(--ink); box-shadow:var(--sh-sm);
}
.tag {
  display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .8rem; border-radius:9999px;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--e-50); border:1px solid var(--e-100); color:var(--e-800);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.55rem; border-radius:9999px; font-family:var(--body); font-weight:700; font-size:.95rem;
  cursor:pointer; border:none; overflow:hidden; white-space:nowrap;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease; }
.btn-e { background:linear-gradient(180deg,#0a8a61,var(--e-800)); color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--sh-e); }
.btn-e::after { content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); transition:left .65s ease; }
.btn-e:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 34px 80px -22px rgb(6 78 59 / .6); }
.btn-e:hover::after { left:150%; }
.btn-ink { background:linear-gradient(180deg,#1e2c24,var(--ink)); color:#fff;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px -10px rgba(10,23,18,.65), 0 2px 6px -2px rgba(10,23,18,.4); }
.btn-ink::after { content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-18deg); transition:left .65s ease; }
.btn-ink:hover { transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 32px -12px rgba(10,23,18,.7), 0 4px 10px -4px rgba(10,23,18,.45); }
.btn-ink:hover::after { left:150%; }
.btn-ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover { transform:translateY(-2px); border-color:var(--e-400); color:var(--e-800); box-shadow:var(--sh-md); }
.btn-light { background:#fff; color:var(--e-900); box-shadow:var(--sh-md); }
.btn-light:hover { transform:translateY(-2px); background:var(--e-50); }

/* ============================================================
   TOPBAR + NAV
   ============================================================ */
.topbar { background:linear-gradient(90deg,var(--e-900),var(--e-700)); color:var(--e-50); font-size:.8rem; font-weight:600; }
.topbar .mini { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  padding:.08rem .5rem; border-radius:9999px; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.nav { position:sticky; top:0; z-index:1000; background:rgba(244,243,238,.72);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s ease, background .3s ease; }
.nav.scrolled { box-shadow:0 12px 34px -22px rgb(10 23 18 / .35); background:rgba(244,243,238,.88); }
.nav-link { position:relative; font-size:.875rem; font-weight:600; color:var(--muted); transition:color .2s ease; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--e-500); border-radius:2px; transition:width .25s ease; }
.nav-link:hover { color:var(--e-800); } .nav-link:hover::after { width:100%; }

/* ============================================================
   EMPTY UPLOAD SLOTS  (browser + phone frames)
   ============================================================ */
.win { position:relative; background:var(--surface); border-radius:1.3rem; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-xl); }
.win-bar { display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  background:linear-gradient(180deg,#fbfbf8,#f1f0ea); border-bottom:1px solid var(--line); }
.win-dots { display:flex; gap:.4rem; }
.win-dots i { width:.7rem; height:.7rem; border-radius:50%; display:block; }
.win-dots i:nth-child(1){background:#ff5f57;} .win-dots i:nth-child(2){background:#febc2e;} .win-dots i:nth-child(3){background:#28c840;}
.win-url { flex:1; max-width:20rem; margin:0 auto; text-align:center; font-size:.72rem; font-weight:600; color:var(--muted-2);
  background:#fff; border:1px solid var(--line); border-radius:9999px; padding:.3rem .9rem; }

.phone { position:relative; width:100%; max-width:17.5rem; margin:0 auto; border-radius:2.6rem; padding:.65rem;
  background:linear-gradient(165deg,#1d2a24,#0a1712); box-shadow:var(--sh-xl), inset 0 0 0 1px rgba(255,255,255,.06); }
.phone::before { content:''; position:absolute; top:.9rem; left:50%; transform:translateX(-50%);
  width:30%; height:.4rem; background:#0a1712; border-radius:9999px; z-index:3; }
.phone-screen { border-radius:2rem; overflow:hidden; background:#fff; aspect-ratio:9/19; }

/* the empty drop zone */
.drop { position:relative; width:100%; height:100%; min-height:11rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.7rem; text-align:center; padding:1.5rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(16,185,129,.07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(10,23,18,.025) 0 14px, transparent 14px 28px);
  border:1.5px dashed var(--line-2); border-radius:.9rem;
  color:var(--muted); transition:border-color .3s ease, background .3s ease;
}
.win .drop, .phone-screen .drop { border:none; border-radius:0; }
.drop:hover { border-color:var(--e-400); }
.drop .ic { width:2.9rem; height:2.9rem; border-radius:.8rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--e-50),var(--e-100)); color:var(--e-700); box-shadow:var(--sh-sm); font-size:1.1rem; }
.drop b { font-family:var(--body); font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:.01em; }
.drop small { font-size:.68rem; color:var(--muted-2); font-weight:600; }
.drop .dim { font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--e-700);
  background:var(--e-50); border:1px solid var(--e-100); padding:.15rem .55rem; border-radius:9999px; }
.drop-dark { color:#8fbfaa; background:
    radial-gradient(circle at 50% 38%, rgba(52,211,153,.12), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px); }
.drop-dark .ic { background:rgba(52,211,153,.14); color:var(--e-300); }
.drop-dark b { color:#eafff5; } .drop-dark small { color:#7fae99; }

/* glow under hero product */
.glow { position:absolute; left:50%; bottom:-8%; transform:translateX(-50%); width:72%; height:60%;
  background:radial-gradient(ellipse at center, rgba(16,185,129,.4), transparent 70%); filter:blur(70px); z-index:-1; }

/* ============================================================
   CARDS / BENTO
   ============================================================ */
.card { background:var(--surface); border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--sh-md);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; }
.card:hover { transform:translateY(-6px); box-shadow:var(--sh-xl); border-color:rgba(16,185,129,.4); }

.icon { width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--e-50),var(--e-100)); color:var(--e-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px -8px rgba(6,95,70,.45); font-size:1.15rem; }

.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; }
.bento > * { grid-column:span 6; }
@media (min-width:768px){
  .sp2{grid-column:span 2;} .sp3{grid-column:span 3;} .sp4{grid-column:span 4;} .sp6{grid-column:span 6;}
}

/* ============================================================
   DARK PANEL
   ============================================================ */
.panel { position:relative; overflow:hidden; color:#fff; border-radius:2.25rem; border:1px solid rgba(52,211,153,.18);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,.18), transparent 50%),
    radial-gradient(120% 120% at 100% 100%, rgba(6,95,70,.4), transparent 55%),
    linear-gradient(160deg,#06140f,#02160f 58%,#03120c);
  box-shadow:var(--sh-xl); }
.panel .ledger {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 75%); }
.stat { font-family:var(--display); font-size:clamp(2.6rem,5.5vw,3.8rem); font-weight:600; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg,#fff,#a7f3d0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ============================================================
   PRICING
   ============================================================ */
.price { position:relative; background:var(--surface); border-radius:var(--r); border:1px solid var(--line);
  box-shadow:var(--sh-md); transition:transform .4s ease, box-shadow .4s ease; display:flex; flex-direction:column; }
.price:hover { transform:translateY(-6px); box-shadow:var(--sh-xl); }
.price-feat { background:linear-gradient(165deg,#05402e,var(--e-950) 72%); border:1px solid rgba(52,211,153,.3);
  box-shadow:var(--sh-e); color:#fff; }
.ptoggle.active { background:#fff; color:var(--e-800); box-shadow:var(--sh-sm); }
.amount { font-family:var(--display); font-weight:600; letter-spacing:-.02em; }

/* ============================================================
   MARQUEE / MOTION
   ============================================================ */
.marq { display:flex; gap:3.5rem; width:max-content; animation:marq 30s linear infinite; }
@keyframes marq { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marq-mask { -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
                     mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.float { animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.pulse-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--e-500); box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.45);} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}

.hide-sb::-webkit-scrollbar{display:none;} .hide-sb{-ms-overflow-style:none; scrollbar-width:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .aura::before,.aura::after,.float,.marq,.pulse-dot{animation:none;}
}

/* ── FAQ accordion (native details) ── */
.faq-item { border:1px solid var(--line); background:var(--surface); border-radius:1rem; box-shadow:var(--sh-sm);
  overflow:hidden; transition:box-shadow .3s ease, border-color .3s ease; }
.faq-item[open] { box-shadow:var(--sh-md); border-color:rgba(16,185,129,.35); }
.faq-item summary { list-style:none; cursor:pointer; padding:1.2rem 1.4rem; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { transition:transform .3s ease; color:var(--e-600); flex-shrink:0; }
.faq-item[open] summary .chev { transform:rotate(180deg); }
.faq-item .faq-body { padding:0 1.4rem 1.25rem; color:var(--muted); line-height:1.65; }

/* ── Proof stat strip ── */
.proof-num { font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.8rem,3.5vw,2.4rem); color:var(--e-800); line-height:1; }

/* ── Reports mini-dashboard (CSS only) ── */
.chart { display:flex; align-items:flex-end; gap:.5rem; height:9rem; }
.chart .bar { flex:1; border-radius:.4rem .4rem 0 0; background:linear-gradient(180deg,var(--e-400),var(--e-600)); min-height:6%; }
.chart .bar.peak { background:linear-gradient(180deg,var(--e-300),var(--e-500)); box-shadow:0 0 0 2px var(--e-100), var(--sh-sm); }
.chart-x { display:flex; gap:.5rem; margin-top:.6rem; }
.chart-x span { flex:1; text-align:center; font-size:.6rem; font-weight:700; color:var(--muted-2); }
.prog { height:.5rem; border-radius:9999px; background:var(--e-50); overflow:hidden; }
.prog > i { display:block; height:100%; border-radius:9999px; background:linear-gradient(90deg,var(--e-600),var(--e-400)); }
.mini-stat { background:var(--paper); border:1px solid var(--line); border-radius:.9rem; padding:.85rem 1rem; }

/* ── Comparison (ancienne méthode vs Vantex) ── */
.vs-old { background:var(--paper-2); border:1px dashed var(--line-2); border-radius:var(--r); }
.vs-new { background:linear-gradient(165deg,#05402e,var(--e-950) 75%); border:1px solid rgba(52,211,153,.3); border-radius:var(--r); box-shadow:var(--sh-e); color:#fff; }
.vs-li { display:flex; align-items:flex-start; gap:.75rem; font-weight:600; }
.vs-x { color:var(--muted-2); } .vs-x .ic { color:#c2685f; }
.vs-c .ic { color:var(--e-400); }
.vs-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:9999px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* ── Premium social links ── */
.social { position:relative; width:2.9rem; height:2.9rem; border-radius:.95rem; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid transparent; color:#fff; box-shadow:var(--sh-sm); font-size:1.05rem; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.social::before { content:''; position:absolute; inset:0; z-index:0; }
.social i { position:relative; z-index:1; transition:transform .35s ease; }
.social:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.social:hover i { transform:scale(1.12); }
.social-fb::before { background:#1877f2; }
.social-ig::before { background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.social-wa::before { background:#25d366; }

/* ── Carousel dots (a-propos) ── */
.carousel-dot { width:8px; height:8px; border-radius:9999px; background:rgba(255,255,255,.5); border:none; padding:0; cursor:pointer; transition:all .3s ease; position:relative; flex-shrink:0; }
.carousel-dot::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:44px; min-height:44px; }
.carousel-dot.active { width:20px; background:var(--e-400); }

/* ── Section rhythm ── */
.sec { padding:3.75rem 0; } @media(min-width:768px){ .sec{ padding:5.25rem 0; } }
.divider { border-top:1px solid var(--line); }

@media (max-width:640px){
  .btn{ padding:.75rem 1.3rem; font-size:.9rem; }
}