/* =========================
   0) Variables & Reset
   ========================= */
:root{
  /* Couleurs & surfaces */
  --section-12:#EDEDEE;     /* Section 1 & 2 */
  --section-rest:#fdfcf9;   /* Autres sections */
  --section-verif:#005f73;  /* Avis */
  --surface:#ffffff;
  --surface-soft:rgba(255,255,255,.9);

  --ink:#1a2433;
  --ink-soft:#3d4a5e;
  --muted:#646f82;
  --accent:#005f73;
  --amber:#ee9b00;

  /* UI tokens */
  --radius-sm:12px; --radius:20px; --radius-lg:28px; --radius-xl:36px;
  --shadow-sm:0 14px 36px -22px rgba(18,32,51,.24);
  --shadow-md:0 26px 72px -44px rgba(18,32,51,.24);
  --shadow-lg:0 48px 120px -54px rgba(18,32,51,.28);
  --stroke:1px solid rgba(18,32,51,.08);
  --stroke-strong:1px solid rgba(18,32,51,.14);
  --timing:cubic-bezier(.23,.7,.26,1);
  --font-sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Spacing + cards */
  --space-xs:10px; --space-sm:16px; --space-md:24px; --space-lg:32px;
  --card-r:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--section-rest)}
body{
  margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;letter-spacing:-.005em;
  color:var(--ink);background:var(--section-rest);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.nav-open{overflow:hidden}
::selection{background:rgba(17,124,118,.16)}
main{display:block;overflow:hidden}
img{display:block;width:100%;height:auto;border-radius:inherit;object-fit:cover}
a{color:inherit;text-decoration:none;transition:color .25s var(--timing)}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid rgba(148,210,189,.6);outline-offset:3px;border-radius:10px;
}
.is-contents{display:contents;}
.bold { font-weight: 700; display: inline; }

/* =========================
   1) Grille & Typo
   ========================= */
.container{width:min(1240px,100% - 36px);margin-inline:auto}
.section{padding-block:clamp(56px,8vw,100px);position:relative;background:var(--section-rest);background-image:none}
.section.is-compact{padding-block:clamp(50px,7.5vw,90px)}
.section.is-tight{padding-block:clamp(42px,6.6vw,76px)}
.section + .section{padding-top:clamp(26px,4.5vw,50px)}

h1,h2,h3{letter-spacing:-.01em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.7rem,4vw,3.7rem);line-height:1.04;font-weight:900;margin-bottom:18px}
h2{font-size:clamp(2.1rem,3vw,2.85rem);line-height:1.08;font-weight:800;margin-bottom:18px}
h3{font-size:clamp(1.16rem,1.9vw,1.38rem);font-weight:700}
.lead{font-size:1.06rem;color:var(--muted);max-width:58ch;margin:2px 0 0}
.highlight{
  display:inline-flex;align-items:center;border-radius:999px;padding:4px 14px;
  background:rgba(17,124,118,.12);color:var(--accent);
  font-size:.78em;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
}

/* =========================
   2) Navbar & Overlay
   ========================= */
.navbar{
  position:sticky;top:0;z-index:1400;
  background:#ffffffcc;backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:var(--stroke);
  transition:background .35s var(--timing),box-shadow .35s var(--timing);
}
.navbar.scrolled{background:#fff;box-shadow:0 18px 48px -42px rgba(18,32,51,.32)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding-block:18px;gap:32px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.brand img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:24px;font-size:.94rem;color:var(--ink-soft);flex-wrap:wrap}
.nav-links a{position:relative;padding:6px 0;font-weight:600}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-8px;width:100%;height:2px;border-radius:999px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--timing)
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--accent)}
.dropdown{position:relative}
.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
  pointer-events:auto;
}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:238px;
  background:var(--surface);border:var(--stroke);border-radius:18px;box-shadow:var(--shadow-md);
  padding:14px;display:none;flex-direction:column;gap:4px;
}
.dropdown.open .dropdown-menu{display:flex}
.dropdown-menu a{padding:10px 14px;border-radius:12px;font-weight:600;color:var(--ink-soft);transition:background .25s var(--timing),color .25s var(--timing)}
.dropdown-menu a:hover{background:rgba(17,124,118,.12);color:var(--accent)}
.nav-theme{display:flex;align-items:center;gap:12px;margin-left:auto;position:relative;z-index:1110}
.nav-actions{display:flex;align-items:center;gap:18px;margin-left:32px}
.nav-lang{font-weight:600;font-size:.92rem;color:var(--ink-soft);transition:color .25s var(--timing)}
.nav-lang:hover{color:var(--accent)}
.nav-menu{display:flex;align-items:center;gap:32px;margin-left:auto;flex:1;justify-content:flex-end}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  width:46px;
  height:46px;
  border:1px solid rgba(17,124,118,.22);
  border-radius:14px;
  background:rgba(255,255,255,.75);
  box-shadow:none;
  backdrop-filter:blur(8px) saturate(1.05);
  cursor:pointer;
  transition:background .3s var(--timing),border-color .3s var(--timing),box-shadow .3s var(--timing),transform .3s var(--timing)
}
.nav-toggle:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 40px -28px rgba(18,32,51,.35);
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--accent);
  border-radius:999px;
  transition:transform .35s var(--timing),opacity .35s var(--timing),background .35s var(--timing)
}
.nav-toggle.is-active{
  background:#fff;
  border-color:rgba(17,124,118,.28);
  box-shadow:0 18px 48px -30px rgba(17,124,118,.32);
}
.nav-toggle.is-active span{background:var(--accent)}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-overlay{
  position:fixed;inset:0;background:rgba(18,32,51,.3);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--timing);z-index:1090;
}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}

/* =========================
   3) Boutons
   ========================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:18px;
  font-weight:700;font-size:.96rem;line-height:1;border:1px solid transparent;
  transition:transform .3s var(--timing),box-shadow .3s var(--timing),background .3s var(--timing),color .3s var(--timing),border-color .3s var(--timing);
  cursor:pointer;will-change:transform;
}
.btn:hover{transform:translateY(-2px); color:white}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 18px 50px -30px rgba(17,124,118,.5)}
.btn-outline{background:#fff;color:var(--accent);border-color:rgba(17,124,118,.24);box-shadow:0 22px 58px -44px rgba(18,32,51,.22)}
.btn-outline:hover{background:var(--accent); color:white}

.plan-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px;
  background:var(--surface);
  border:var(--stroke);
  border-radius:999px;
  flex-wrap:wrap;
}
.plan-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:18px;
  font-weight:700;font-size:.96rem;line-height:1;border:1px solid var(--accent);background:var(--surface);color:var(--accent);cursor:pointer;
  transition:transform .3s var(--timing), box-shadow .3s var(--timing), background-color .3s var(--timing), color .3s var(--timing), border-color .3s var(--timing);
  will-change:transform;
  text-align:center;
}
.plan-btn:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,95,115,.25) }
.plan-btn:hover .badge-save{ background:rgba(17,124,118,.18) }
.plan-btn.is-active .badge-save{ background:rgba(255,255,255,.20); color:#fff; border-color:rgba(255,255,255,.45) }
.plan-btn.is-active{background:var(--accent);color:#fff}
#exemples .plan-switch{display:flex;background:transparent;padding:0;justify-content:center;align-items:center;gap:12px;margin-inline:auto;border:none}
#exemples .plan-switch .plan-btn{min-width:150px}
#exemples .plan-switch .plan-btn[data-rev="influence"]{
  border-color:var(--amber);
  color:var(--amber);
}
#exemples .plan-switch .plan-btn[data-rev="influence"]:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:#fff;
}
#exemples .plan-switch .plan-btn[data-rev="influence"].is-active{
  background:var(--amber);
  border-color:var(--amber);
  color:#fff;
  box-shadow:0 12px 32px -18px rgba(238,155,0,.45);
}
#tarifs .plan-switch{display:flex;margin:0 0 12px;margin-inline:auto;justify-content:center;min-height:48px;width:100%;max-width:420px}
#tarifs .plan-switch .plan-btn{flex:1 1 180px;min-width:150px}
#tarifs .plan-switch.plan-switch--ghost{
  visibility:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  border:none;
  background:transparent;
}
#exemples .muted{text-align:center;margin-top:24px}
#exemples .muted a{color:var(--accent);font-weight:700}

/* =========================
   4) Hero & Metrics
   ========================= */
.hero{padding-top:clamp(92px,11vw,156px);padding-bottom:clamp(10px,2.5vw,22px)}
.hero,.metrics{background:var(--section-12) !important;background-image:none !important}
.hero-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(44px,6vw,80px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-tag{margin:0;color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}
.hero-note{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:48ch}
.hero-visual{position:relative;display:grid;gap:22px;isolation:isolate}
.hero-gallery{position:relative;display:grid;gap:18px}
.hero-gallery .frame{position:relative;padding:26px;box-shadow:var(--shadow-lg);overflow:hidden;background:#fff;border-radius:26px;border:var(--stroke)}
.hero-gallery .floating-card{
  position:absolute;top:70%;right:60%;width:46%;background:var(--surface-soft);
  border:var(--stroke);backdrop-filter:blur(5px);border-radius:22px;padding:16px 18px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;align-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(15px);color:#fff;pointer-events:none;
}
.hero-gallery .floating-card strong{font-size:1.26rem;color:var(--accent);font-weight:800}
.metrics-trusted-title {
  text-align: center;
  font-weight: 700;
  font-size: 2.5rem;
  margin: 0;
  color:var(--accent);
  line-height: 1.3;
}

/* Responsive titre métriques */
@media (max-width: 768px) {
  .metrics-trusted-title { font-size: 1.4rem; }
}

/* Metrics cards */
.metrics{position:relative;overflow:hidden}
.metric-card{
  background:#fff;border:var(--stroke);border-radius:var(--card-r);box-shadow:var(--shadow-sm);padding:42px 32px;text-align:center;
  position:relative;overflow:hidden;transition:transform .3s var(--timing),box-shadow .3s var(--timing);z-index:1;
}
.metric-value{font-size:2.6rem;font-weight:900;color:var(--accent);line-height:1;}
.metric-label{margin:0;color:var(--ink-soft);font-size:1rem;}
.metric-card:hover{transform:translateY(-4px);box-shadow:0 26px 70px -48px rgba(18,32,51,.26)}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}

/* =========================
   4bis) Section fusionnée Metrics + Entreprises
   ========================= */
.metrics-trusted{
  padding-top:clamp(12px,2.5vw,22px);
  padding-bottom:clamp(36px,6vw,72px);
  background:var(--section-12) !important;
  z-index:5;
}
.metrics-trusted .metrics-grid{ margin-top: clamp(22px, 4vw, 40px); margin-bottom:clamp(12px,4vw,24px)}
.metrics-trusted .trusted{background:transparent !important;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:6px}
.metrics-trusted .scroller[data-speed="slow"]{ --_animation-duration: 120s; }
.metrics-trusted .logo-track .scroller__inner{padding-block:.5rem}
.metrics-trusted .metric-card{box-shadow:0 18px 48px -44px rgba(18,32,51,.22)}
.metrics-trusted .logo-wrap img{ mix-blend-mode: multiply; }
.metrics-trusted .logo-track{ margin-bottom: clamp(36px, 6vw, 72px); }
.metrics-trusted .logo-wrap{ background:#eef2f7; padding:10px 16px; border-radius:14px; }
.metrics-trusted .logo-wrap img{ mix-blend-mode:multiply; filter:contrast(1.06) saturate(1.04); }

/* =========================
   5) Process
   ========================= */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:28px}
.process-card{
  padding:30px;border-radius:var(--card-r);border:var(--stroke);background:#fff;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:14px;
}
.process-card h3{color:var(--accent)}
.process-card p{margin:0;color:var(--muted)}

/* =========================
   6) Map & Compare
   ========================= */
.map-section{background:var(--section-rest) !important;background-image:none !important}
.map-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
.map-column{display:flex;flex-direction:column;gap:24px;height:auto}
.map-copy{display:flex;flex-direction:column;gap:14px;color:var(--muted)}
.map-shell{height:100%;min-height:0;border-radius:30px;border:var(--stroke);background:#fff;box-shadow:var(--shadow-md);overflow:hidden}
#creators-map{width:100%;height:100%;min-height:0}

/* Colonne droite (metrics) */
.map-right{ display:flex; flex-direction:column; gap:22px; align-self:stretch; }

.compare-column{display:flex;align-items:stretch;height:100%}
.compare{height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,48px);margin-top:0;border-radius:0;border:none;background:transparent;box-shadow:none}
.compare-column .metrics-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  grid-auto-rows:1fr;
  gap:22px;
  margin:0;
  align-content:start;
}
.compare-column .metric-card{display:flex;flex-direction:column;justify-content:center;min-height:120px}
.compare-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px;height:100%}
.compare-card{
  display:flex;flex-direction:column;gap:20px;padding:26px;border-radius:24px;border:1px solid rgba(17,124,118,.18);
  background:#fff;box-shadow:0 18px 52px -42px rgba(18,32,51,.24);
  transition:transform .35s var(--timing),box-shadow .35s var(--timing);min-height:0;
}
.compare-card:hover{transform:translateY(-4px);box-shadow:0 24px 64px -46px rgba(18,32,51,.26)}
.compare-card.ugc{border:1px solid rgba(215,134,43,.25)}
  .compare-card h3{line-height:1.35}
  .price-tag{display:block;font-size:.95rem;font-weight:600;color:var(--accent);margin-top:6px}
  .compare-card.ugc .price-tag{color:var(--amber)}
  .compare-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;flex:1}
  .compare-card li{display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:.94rem}
.cluster-marker{
  width:38px;
  height:38px;
  border-radius:50%;
  border:2px solid rgba(10,147,150,.32);
  background:rgba(10,147,150,.16);
  color:#0a9396;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.92rem;
  box-shadow:0 22px 58px -36px rgba(10,147,150,.35);
}
.cluster-marker span{line-height:1}

/* =========================
   6bis) PRICING — section dédiée
   ========================= */
.pricing{background:transparent}
#tarifs h2{margin-bottom:18px}
#tarifs{ height:auto; padding:clamp(24px,4vw,40px); background:transparent; }
#tarifs .price-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(280px,1fr));
  gap:24px;
  align-items:stretch;
}
#tarifs .price-card{min-height:240px}
#tarifs .price-card h3{ font-size:1.22rem; font-weight:800; text-align:center; }
#tarifs .price-num{ font-size:2.05rem; }
#tarifs .price-unit,
#tarifs .price-note,
#tarifs .price-subtitle{ font-size:.9rem; }
#tarifs .price-features li,
#tarifs .price-info li{ font-size:.92rem; }
#tarifs .price-lede{
  min-height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0 0 6px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
  line-height:1.35;
}
#tarifs .price-lede--accent{
  background:rgba(0,95,115,.10);
  border:1px solid rgba(0,95,115,.28);
  color:var(--accent);
}
#tarifs .price-lede--amber{
  background:rgba(238,155,0,.12);
  border:1px solid rgba(238,155,0,.28);
  color:var(--amber);
}

.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.price-card{ padding:18px;border-radius:20px;border:var(--stroke);background:#fff;box-shadow:var(--shadow-sm) }
.price-card.influence{border-color:rgba(0,95,115,.35)}
.price-card.ugc{border-color:rgba(238,155,0,.25)}
.price-head{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;align-items:center;text-align:center}
.price-emoji{font-size:1.6rem;line-height:1}
.price-subtitle{margin:0;color:var(--muted);font-size:.98rem}

/* === Bande prix: même ligne, jamais de wrap === */
.price-line{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;margin:8px auto 6px}
.price-line--wide{margin:32px auto 28px}
.price-num{font-weight:900;font-size:2.6rem;line-height:1;color:var(--accent);white-space:nowrap}
.price-line.ugc .price-num{color:var(--amber)}
.currency{font-weight:800;font-size:1rem;opacity:.9;margin-left:0;white-space:nowrap}
.price-unit{font-weight:700;color:var(--ink-soft);white-space:nowrap}

.price-note{margin:2px 0 0;font-size:.95rem;color:var(--ink-soft)}
.badge-save{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:rgba(17,124,118,.12);color:var(--accent);font-weight:800;font-size:.75rem;line-height:1;
}
.price-features{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.price-features li{display:flex;gap:10px;color:var(--muted)}
.price-features .is-off,
.price-info .is-off { opacity:.5; }
.price-features .is-off *,
.price-info .is-off * { text-decoration: line-through; text-decoration-thickness: 2px; }
.is-hidden{display:none !important}
.price-info{margin-top:16px;padding-top:14px;border-top:var(--stroke)}
.price-info h4{margin:0 0 8px;font-size:1rem}

/* Icônes (SVG) — taille, alignement, couleur via currentColor */
.price-features .ico,
.price-info .ico{flex:0 0 auto;line-height:0}
.price-features .ico svg,
.price-info .ico svg{
  width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;opacity:.95;margin-top:2px;
}

/* Plans “texte + features” (si utilisés) */
.plan{
  background:#fff;border:var(--stroke);border-radius:22px;box-shadow:var(--shadow-md);
  padding:24px 22px;
}
.plan + .plan{margin-top:18px}
.plan-header{display:flex;align-items:baseline;gap:10px}
.plan-price{font-size:2.6rem;font-weight:900;color:var(--accent);line-height:1}
.plan-unit{font-weight:700;color:var(--ink-soft)}
.plan-sub{margin-top:6px;color:#16a34a;font-weight:800}
.plan .divider{height:1px;background:rgba(18,32,51,.08);margin:18px 0;border-radius:999px}
.features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.feature{display:flex;align-items:flex-start;gap:12px;color:#223049}
.feature .ico{flex:0 0 auto;opacity:.95}
.feature.is-off,
.features .is-off{opacity:.45}
.feature.is-off *, .features .is-off *{
  text-decoration:line-through;
  text-decoration-thickness:2px;
}

/* Alignement strict des cartes tarifs */
#tarifs .price-grid{ --title-h:40px; --price-h:56px; --note-h:24px; }
#tarifs .price-card{ display:flex; flex-direction:column; }
#tarifs .price-card .price-head{ min-height:var(--title-h); }
#tarifs .price-card .price-line{ min-height:var(--price-h); }
#tarifs .price-card .price-note{ min-height:var(--note-h); text-align:center; }
#tarifs .price-card .price-note strong{color:var(--accent);}

.besoin-card{
  margin:clamp(28px,5vw,40px) auto 0;
  max-width:720px;
  background:#fff;
  border-radius:26px;
  border:var(--stroke);
  box-shadow:var(--shadow-md);
  padding:clamp(24px,5vw,36px);
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  text-align:center;
}
.besoin-card h3{margin:0;font-size:1.4rem;font-weight:800;color:var(--ink);}
.besoin-card p{margin:0;color:var(--ink-soft);max-width:58ch;}
.besoin-card .besoin-tagline{color:var(--ink);font-weight:700;}
.besoin-card .besoin-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}


/* =========================
   7) Logos Trusted + Tooltips
   ========================= */
.trusted{background:var(--section-rest) !important;background-image:none !important}
.trusted .container{padding-bottom:24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.trusted h2{font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-0.01em;margin-bottom:18px;}
.logo-track{ overflow: visible; position:relative; z-index:10; display:block;width:100%}
.logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:default}
.logo-wrap img{display:block;width:auto;height:80px;opacity:1;transition:opacity .3s ease}

/* Tooltip */
.offer-overlay{display:none}

/* =========================
   8) Scrollers (logos + avis)
   ========================= */
.scroller{width:100%;display:flex;position:relative}
.scroller::before,
.scroller::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  pointer-events:none;
  z-index:12;
  opacity:0;
  transition:opacity .3s var(--timing);
  background:transparent;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  mask-image:linear-gradient(to right, rgba(0,0,0,1) 25%, rgba(0,0,0,0));
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) 25%, rgba(0,0,0,0));
  mask-mode:luminance;
  -webkit-mask-mode:luminance;
}
.scroller::before{left:0}
.scroller::after{
  right:0;
  transform:scaleX(-1);
}
.scroller__inner{display:flex;width:100%;flex-wrap:nowrap;gap:1rem;padding-block:1rem}
.scroller[data-animated="true"]{overflow:hidden}
.scroller[data-animated="true"]{ overflow-x: hidden; overflow-y: visible;  position: relative; }
.scroller[data-animated="true"]::before,
.scroller[data-animated="true"]::after{opacity:1}
.trusted .scroller[data-animated="true"]{ z-index:10; }
.scroller[data-animated="true"] .scroller__inner{width:max-content;flex-wrap:nowrap;animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite}
.scroller[data-direction="right"]{--_animation-direction:reverse}
.scroller[data-direction="left"]{--_animation-direction:forwards}
.scroller[data-speed="fast"]{--_animation-duration:20s}
.scroller[data-speed="slow"]{--_animation-duration:60s}
.marquee{position:relative;overflow:visible;margin-block:0}
.verif + .section{padding-top:clamp(28px,4.8vw,44px)}

/* =========================
   9) Gallery & Phones (no shrink + overflow horizontal)
   ========================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:28px}
.gallery--compact{margin-top:18px}
.phone{
  background:#fff;border-radius:30px;padding:18px;border:var(--stroke);box-shadow:var(--shadow-sm);
  position:relative;transition:transform .3s var(--timing),box-shadow .3s var(--timing);
  display:flex;flex-direction:column;gap:16px;min-height:360px;max-height:540px;
}
.phone:hover{transform:translateY(-4px);box-shadow:0 26px 70px -48px rgba(18,32,51,.26)}
.phone .bar{height:5px;width:34%;background:#e4e6eb;border-radius:999px;margin:0 auto 16px}
.stories-slider{gap:0}
.stories-frame{flex:1;position:relative;border-radius:22px;overflow:hidden}
.stories-strip{display:flex;width:500%;height:100%;animation:stories-loop 22s ease-in-out infinite}
.stories-strip img{flex:0 0 100%}
.phone-media{width:100%;height:100%;border-radius:22px;object-fit:cover;background:#000;max-height:480px}
.phone-video .phone-media{flex:1;min-height:0;max-height:480px}
.muted{color:var(--muted);font-size:.9rem}
.muted--light{color:#bcd7df;margin-top:6px}

/* Galerie d’exemples: overflow horizontal + frames non rétrécies */
#exemples .gallery{
  display:flex !important;
  flex-wrap:nowrap;
  gap:var(--space-sm);
  justify-content:flex-start;
  align-items:stretch;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}
#exemples .gallery .phone{
  flex:0 0 clamp(260px,80vw,360px);
  max-width:420px;
  min-width:clamp(240px,70vw,320px);
  scroll-snap-align:center;
}
#exemples .gallery::-webkit-scrollbar{height:6px}
#exemples .gallery::-webkit-scrollbar-thumb{background:rgba(17,124,118,.25);border-radius:999px}
/* Sélecteur générique (autres galeries) */
.gallery .phone{flex:0 0 clamp(280px,80vw,420px)}

@media (min-width:1024px){
  #exemples .gallery{
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
    scroll-snap-type:none;
    padding-bottom:0;
  }
  #exemples .gallery .phone{
    flex:1 1 clamp(260px,28vw,360px);
    min-width:260px;
  }
}

/* =========================
   10) Vérif & Avis
   ========================= */
.verif{
  background:var(--section-verif) !important;
  color:#E8EEF5;
  position:relative;
  padding-block:clamp(48px,7vw,80px);
}
.verif .container{max-width:none;width:100%;padding-inline:clamp(24px,6vw,88px)}
.badge-verif{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  display:inline-flex;align-items:center;gap:10px;padding:40px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(15px);color:#fff;pointer-events:none;font-size:50px
}

.vcard{
  display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);
  padding:18px;border-radius:20px;min-width:320px;border:1px solid rgba(255,255,255,.12);
}
.vcard img{width:48px;height:48px;border-radius:50%}
.vcard .name{font-weight:700;color:#fff}
.vcard p{margin:4px 0 0;font-size:.9rem;color:#C9D2E3}

/* =========================
   11) CTA
   ========================= */
.cta-slab{background:var(--section-rest) !important}
.cta-container{display:grid;gap:clamp(26px,4vw,36px);align-items:start}
.cta-title{margin:0;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.1}
.cta-card{
  display:grid;
  grid-template-columns:minmax(0,min(640px,55vw)) minmax(0,1fr);
  gap:clamp(30px,5vw,54px);
  align-items:stretch;
  width:100%;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.cta-visual{
  border-radius:32px;
  overflow:hidden;
  box-shadow:none;
  display:flex;
  background:#f4f7fb;
}
.cta-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.cta-copy{display:flex;flex-direction:column;gap:20px;max-width:560px}
.cta-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;color:var(--ink-soft)}
.cta-points li{display:flex;align-items:flex-start;gap:10px}
.cta-points li::before{content:"•";font-size:1.4rem;line-height:1;color:var(--accent);margin-top:-2px}
.cta-note{margin:0;color:var(--ink-soft);font-weight:600}
#cta .hero-actions{justify-content:flex-start}

/* =========================
   12) FAQ
   ========================= */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.acc{display:flex;flex-direction:column;gap:18px}
.acc details{
  background:var(--surface);
  border:1px solid rgba(17,124,118,.08);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--timing), box-shadow .35s var(--timing), border-color .35s var(--timing);
  overflow:hidden;
  position:relative;
}
.acc details::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:5px;
  border-radius:0 4px 4px 0;
  background:rgba(17,124,118,.18);
  opacity:0;
  transform:scaleY(.6);
  transform-origin:top;
  transition:transform .4s var(--timing), opacity .35s var(--timing), background .35s var(--timing);
}
.acc details[open]{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(17,124,118,.22);
}
.acc details[open]::before{
  opacity:1;
  transform:scaleY(1);
  background:var(--accent);
}
.acc summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 26px;
  cursor:pointer;
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  background:linear-gradient(90deg, rgba(17,124,118,.06) 0%, rgba(17,124,118,.02) 100%);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{flex:1;line-height:1.4}
.acc details[open] summary{
  color:var(--accent);
  background:linear-gradient(90deg, rgba(17,124,118,.12) 0%, rgba(17,124,118,.04) 100%);
}
.acc details p{
  margin:0;
  padding:0 26px 18px;
  color:var(--muted);
}
.acc details p + p{margin-top:10px}
.acc .chev{
  flex:0 0 auto;
  transition:transform .35s var(--timing), color .35s var(--timing), opacity .35s var(--timing);
  color:var(--ink-soft);
}
.acc details[open] .chev{
  transform:rotate(-180deg);
  color:var(--accent);
}
/* =========================
   13) Footer
   ========================= */
footer{background:#132032;color:#e1e8f5;padding-block:68px 56px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;align-items:start}
.foot-grid h3{color:#f8fbff;font-size:1rem;margin-bottom:12px}
.foot-grid p{margin:6px 0;color:#c9d6ee;font-size:.92rem}
.foot-grid a{color:#f8fbff;transition:opacity .25s var(--timing)}
.foot-grid a:hover{opacity:.74}
.foot-news{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.14)}
.foot-news input{
  flex:1;border:none;background:transparent;color:#f8fbff;font-size:.9rem;padding:10px 12px;font-family:var(--font-sans);
}
.foot-news input::placeholder{color:rgba(248,251,255,.6)}
.foot-news button{
  border:none;background:#8fd4c3;color:#132032;font-weight:700;padding:10px 16px;border-radius:14px;cursor:pointer;
  transition:background .25s var(--timing),transform .25s var(--timing);
}
.foot-news button:hover{background:#abe2d4;transform:translateY(-1px)}
.socials{display:flex;gap:14px}
.socials a{display:inline-flex;padding:8px;border-radius:18px;background:rgba(255,255,255,.12);transition:background .25s var(--timing),transform .25s var(--timing)}
.socials a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.copyright{margin-top:40px;font-size:.85rem;color:#94a3b8}

/* =========================
   14) Effets utilitaires
   ========================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--timing),transform .5s var(--timing)}
.reveal.inview{opacity:1;transform:translateY(0)}

/* =========================
   15) Media Queries
   ========================= */
/* Desktop : vrai 50/50 carte + métriques */
@media (min-width:901px){
  .map-section .map-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,3vw,40px);
  }
  .map-section .map-right{ justify-self:stretch; max-width:none; width:100%; }
  .map-section .map-shell,
  .map-section #creators-map{ width:100%; height:100%; }
  .map-section .map-right .metrics-grid{
    grid-template-columns:repeat(2,minmax(220px,1fr));
    grid-auto-rows:1fr;
    gap:22px;
  }
}

@media (max-width:900px){
  .map-section .map-shell,
  .map-section #creators-map,
  .map-section .map-copy{ display:none !important; }
  .map-section .map-grid{ grid-template-columns:1fr; }

  .nav-bar{gap:16px}
  .nav-toggle{display:flex}
  .nav-menu{
    position:fixed;
    inset:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:32px;
    padding:clamp(96px,14vw,128px) clamp(20px,8vw,42px) 48px;
    background:rgba(253,252,249,.94);
    backdrop-filter:blur(20px) saturate(1.05);
    border:none;
    box-shadow:none;
    transform:translateY(-18px);
    opacity:0;
    pointer-events:none;
    transition:opacity .32s var(--timing),transform .36s var(--timing);
    z-index:1200;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
  }
  .nav-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .nav-links{
    flex-direction:column;
    gap:6px;
    width:100%;
    align-items:stretch;
    padding:0;
    border-radius:0;
    border:none;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  .nav-links a{
    position:relative;
    padding:14px 0;
    width:100%;
    border-radius:0;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(17,124,118,.12);
    font-weight:600;
    font-size:1.08rem;
    letter-spacing:-.01em;
    color:var(--ink);
    padding-left:22px;
    transition:color .3s var(--timing);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-links a::after{display:none}
  .nav-links a::marker{display:none}
  .nav-links a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%) scaleY(0);
    width:3px;
    height:70%;
    border-radius:999px;
    background:var(--accent);
    opacity:0;
    transition:transform .3s var(--timing),opacity .3s var(--timing);
  }
  .nav-links a:hover{
    color:var(--accent);
  }
  .nav-links a:hover::before{
    opacity:1;
    transform:translateY(-50%) scaleY(1);
  }
  .nav-links a.active{
    color:var(--accent);
  }
  .nav-links a.active::before{
    opacity:1;
    transform:translateY(-50%) scaleY(1);
  }
  .nav-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:14px;
    margin:4px 0 0;
    padding-top:18px;
    border-top:1px solid rgba(17,124,118,.12);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--timing);
  }
  .nav-menu.open .nav-actions{opacity:1;pointer-events:auto;transition-delay:.04s}
  .dropdown-menu{position:static;min-width:100%;margin-top:6px;border-radius:12px;box-shadow:none;padding:10px 0;background:transparent;border:none}
  .dropdown-menu a{padding:10px 0;border-radius:0}
  .dropdown::after{display:none}
  .nav-lang{display:inline-block}
  .hero-gallery .floating-card{display:none}

  /* Metrics mobile : 2 x 2 propres */
  .map-section .map-right .metrics-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    overflow:visible;
  }

  /* Exemples : carrousel tactile */
  #exemples .gallery{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    padding-bottom:8px;
    justify-content:flex-start;
  }
  #exemples .gallery .phone{
    flex:0 0 clamp(280px,78vw,360px);
    min-width:280px;
    scroll-snap-align:center;
  }
  #tarifs .plan-switch{
    max-width:none;
  }
  #tarifs .plan-switch .plan-btn{
    flex:1 1 min(240px,100%);
  }
}

@media (max-width:720px){
  .container{width:min(100%,100% - 28px)}
  .navbar{border-bottom:1px solid rgba(18,32,51,.12)}
  .hero{padding-top:88px;padding-bottom:14px}
  .hero-grid{gap:38px}
  .section{padding-block:52px}
  .section + .section{padding-top:22px}
  .cta-container{gap:24px}
  .cta-title{text-align:center}
  .cta-card{grid-template-columns:1fr}
  .cta-card .hero-actions{flex-direction:row;align-items:center;justify-content:center;gap:12px}
  .cta-copy{align-items:center;text-align:center;margin-inline:auto}
  .cta-points li{justify-content:center;text-align:left}
  .cta-points li::before{margin-top:0}
  #cta .hero-actions{justify-content:center}
  .gallery{gap:22px}
  .phone{min-height:320px}
  .metrics-trusted .metrics-grid{margin-bottom:12px}
  #tarifs{padding-inline:clamp(16px,6vw,26px)}
  #tarifs .price-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    overflow-x:visible;
    scroll-snap-type:none;
    gap:clamp(18px,5vw,26px);
    padding-bottom:0;
  }
  #tarifs .price-card{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    scroll-snap-align:auto;
    padding:clamp(20px,6vw,28px);
    border-radius:22px;
  }
  #tarifs .price-head{gap:12px}
  #tarifs .price-lede{min-height:0;padding:clamp(12px,4vw,18px)}
  #tarifs .price-line{gap:12px}
  #tarifs .price-num{font-size:clamp(2.2rem,9vw,2.7rem)}
  #tarifs .price-features,
  #tarifs .price-info{gap:12px}
  #tarifs .price-features li,
  #tarifs .price-info li{font-size:.96rem}
  #tarifs .plan-switch{width:100%}
  #tarifs .plan-switch .plan-btn{flex:1 1 auto;font-size:.95rem;padding:10px 14px}
}

@media (max-width:540px){
  body{font-size:15.5px}
  h1{font-size:2.36rem}
  h2{font-size:2rem}
  .btn{width:100%;justify-content:center}
  .hero-actions{flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}
  .hero-actions .btn{ width:auto !important; flex:0 1 auto; }
  .nav-actions{gap:12px}
  .nav-lang{display:none}
  .metric-card,.process-card{padding:26px}
  .compare{padding:28px}
  .phone{min-height:280px}
  #tarifs .plan-switch .plan-btn{
    flex:1 1 100%;
    min-width:0;
  }
}

/* Mobile: carrousel horizontal pour tarifs */
@media (max-width:900px) and (min-width:721px){
  #tarifs .price-grid{
    display:flex;
    gap:var(--space-sm);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; padding-bottom:8px;
  }
  #tarifs .price-card{
    flex:0 0 84%; min-width:84%;
    scroll-snap-align:center;
  }
}

/* Micro-fallback quand la place est ultra réduite */
@media (max-width:420px){
  #tarifs .price-card .price-num{ font-size:clamp(2.1rem, 10vw, 2.6rem); }
}

/* =========================
   16) Dark Mode
   ========================= */

/* =========================
   17) Motion & Animations
   ========================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}
@keyframes stories-loop{
  0%,10%{transform:translateX(0)}
  20%,30%{transform:translateX(-100%)}
  40%,50%{transform:translateX(-200%)}
  60%,70%{transform:translateX(-300%)}
  80%,90%{transform:translateX(-400%)}
  100%{transform:translateX(0)}
}
@keyframes scroll{to{transform:translate(calc(-50% - 0.5rem))}}

/* 2) Logos : anti-pixel */
.logo-wrap img{
  height:clamp(48px,9vw,72px);
  width:auto;
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
}

/* =========================
   Pricing pages
   ========================= */
.tarifs-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.tarifs-header .location-trigger{
  margin-left:auto;
}
.btn-sm{
  padding:8px 16px;
  font-size:.85rem;
}
.pricing-hero{
  background:var(--section-12);
  padding-bottom:clamp(36px,6vw,64px);
}
.pricing-hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(32px,4vw,48px);
  align-items:start;
}
.pricing-summary{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.pricing-summary-title{margin:0;font-size:1.4rem;font-weight:700;color:var(--accent);}
.pricing-summary-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--muted);}
.pricing-note{margin-top:18px;color:var(--ink-soft);}

.pricing-section{background:var(--section-rest);}
.pricing-grid{
  display:grid;
  gap:clamp(22px,3vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;
}
.pricing-card{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  overflow:hidden;
}
.pricing-card.is-highlighted{
  border-color:rgba(17,124,118,.3);
  box-shadow:0 30px 80px -48px rgba(17,124,118,.35);
}
.pricing-card-header{display:flex;flex-direction:column;gap:10px;}
.pricing-card-header p{margin:0;color:var(--muted);}
.pricing-card-price{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:800;
  font-size:2.6rem;
  color:var(--accent);
}
.pricing-card-price .pricing-unit{
  font-size:1rem;
  color:var(--muted);
  font-weight:600;
}
.pricing-annual{
  margin:0;
  color:var(--amber);
  font-weight:600;
}
.pricing-features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  flex:1;
}
.price-ai{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(17,124,118,.08);
  color:var(--accent);
  font-weight:600;
  line-height:1.45;
}
.price-ai .badge{
  font-size:.68rem;
  letter-spacing:.1em;
  padding:6px 12px;
}
.pricing-card .btn{margin-top:auto;}
.badge{
  display:inline-flex;
  align-items:center;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,95,115,.12);
  color:var(--accent);
  width:max-content;
}
.badge-accent{
  background:var(--accent);
  color:#fff;
}

@media (max-width:768px){
  .pricing-hero-grid{grid-template-columns:1fr;}
}

/* =========================
   Tools pages
   ========================= */
.tools-grid{
  display:grid;
  gap:clamp(20px,3vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.tool-card{
  border-radius:var(--radius);
  border:var(--stroke);
  background:var(--surface);
  padding:clamp(24px,3vw,32px);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tool-card h2{margin:0;}
.tool-card p{margin:0;color:var(--muted);}
.tool-card .btn{margin-top:auto;align-self:flex-start;}
.tool-card-en{font-size:.9rem;color:var(--ink-soft);}
.tool-card h2,
.bento-card h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  margin-bottom: 0.6rem;
  max-width: 100%;
}


.tool-main{background:var(--section-rest);}
.tool-hero{background:var(--section-12);}
.tool-hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,4vw,40px);
  align-items:start;
}
.tool-hero-en{margin-top:12px;color:var(--ink-soft);font-size:.95rem;}
.tool-results{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:clamp(20px,3vw,28px);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-results-title{margin:0;font-weight:700;color:var(--accent);}
.tool-results-value{
  margin:0;
  font-size:2.8rem;
  font-weight:900;
  color:var(--accent);
}
.tool-results-note{margin:0;color:var(--muted);}
.tool-results-list{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
}
.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,540px) minmax(0,300px);
  gap:clamp(28px,4vw,48px);
  align-items:start;
}
.tool-form{
  display:grid;
  gap:18px;
  padding:clamp(24px,3vw,32px);
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.tool-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tool-field label{font-weight:600;}
.tool-field input,
.tool-field select{
  appearance:none;
  border-radius:14px;
  border:1px solid rgba(18,32,51,.16);
  padding:12px 14px;
  font-size:1rem;
  background:#fff;
  transition:border-color .25s var(--timing), box-shadow .25s var(--timing);
}
.tool-field input:focus,
.tool-field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,95,115,.12);
  outline:none;
}
.tool-side{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface-soft);
  backdrop-filter:blur(6px);
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.tool-side h2{margin:0;font-size:1.2rem;}
.tool-side-list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
}
.tool-output{
  border-radius:18px;
  background:rgba(17,124,118,.06);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--ink);
}
.tool-hashtags{
  font-weight:600;
  color:var(--accent);
}
.tool-script{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--muted);
}

@media (max-width:960px){
  .tool-layout{grid-template-columns:1fr;}
  .tool-side{order:-1;}
}

/* =========================
   Articles
   ========================= */
.articles-grid{
  display:grid;
  gap:clamp(24px,4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.article-card{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:var(--surface);
  padding:clamp(24px,3vw,32px);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-card h2{margin:0;font-size:1.3rem;}
.article-card h2 a{color:var(--ink);}
.article-card h2 a:hover{color:var(--accent);}
.article-meta{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}
.article-card p{margin:0;color:var(--muted);}
.article-card-en{font-size:.9rem;color:var(--ink-soft);}

.article-main{
  background:var(--section-rest);
  padding:clamp(56px,7vw,80px) 0;
}
.article-body{
  width:min(840px,100% - 36px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:clamp(24px,4vw,36px);
  color:var(--ink);
}
.article-header h1{margin-bottom:14px;}
.article-header p{margin:0;}
.article-excerpt{color:var(--muted);font-size:1.05rem;}
.article-hero{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.article-hero img{
  width:100%;
  height:auto;
  max-height:460px;
  object-fit:cover;
  display:block;
}
.article-body section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.article-body ul,
.article-body ol{
  margin:0;
  padding-left:22px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.article-tip{
  padding:12px 16px;
  background:rgba(17,124,118,.08);
  border-radius:16px;
  color:var(--accent);
  margin:0;
}
.article-toc{
  border-radius:var(--radius);
  border:var(--stroke);
  background:var(--surface);
  padding:18px 22px;
  box-shadow:var(--shadow-sm);
}
.article-toc p{margin:0 0 12px;font-weight:700;color:var(--accent);}
.article-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted);}
.article-callout{
  border-radius:var(--radius-lg);
  border:var(--stroke);
  background:linear-gradient(135deg, rgba(17,124,118,.85), rgba(15,98,110,.92));
  color:#fff;
  padding:clamp(28px,4vw,36px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-callout .btn{align-self:flex-start;}

.compare-table{
  position:relative;
  width:100%;
  margin:12px 0;
  font-size:.96rem;
  border-radius:18px;
  overflow-x:auto;
  overflow-y:hidden;
  box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.compare-table::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:64px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 60%, rgba(255,255,255,.98) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.compare-table.show-scroll-cue::after{
  opacity:1;
}
.compare-scroll-indicator{
  position:absolute;
  top:12px;
  right:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(15,98,110,.95);
  color:#fff;
  font-size:.82rem;
  letter-spacing:.06em;
  z-index:3;
  box-shadow:0 18px 36px -16px rgba(0,0,0,.4);
  pointer-events:auto;
  cursor:pointer;
  opacity:1;
  transform:translateX(0);
  animation:compareScrollHint 1.2s ease-in-out infinite alternate;
  border:none;
  outline:none;
}
.compare-table.hide-scroll-indicator .compare-scroll-indicator{
  opacity:0;
  pointer-events:none;
  animation:none;
}
.compare-scroll-indicator svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.compare-scroll-indicator span{
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
}
.compare-table.hide-scroll-indicator::after{
  opacity:0;
}
.compare-scroll-indicator:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 6px rgba(15,98,110,.45);
}
@keyframes compareScrollHint{
  from{transform:translateX(0);}
  to{transform:translateX(12px);}
}
.compare-table table{
  width:100%;
  border-collapse:collapse;
  min-width:1400px;
}
.compare-table thead{
  background:rgba(17,124,118,.08);
  color:var(--accent);
}
.compare-table th,
.compare-table td{
  padding:18px 20px;
  border-bottom:1px solid rgba(17,124,118,.12);
  text-align:left;
  vertical-align:top;
  line-height:1.6;
}
.compare-table th{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  background:rgba(17,124,118,.08);
  position:sticky;
  top:0;
  z-index:1;
}
.compare-table tbody tr:nth-child(even){
  background:rgba(17,124,118,.04);
}
.compare-table tbody tr:last-child td{
  border-bottom:none;
}
.compare-table td strong{
  color:var(--accent);
}
.compare-table td a{
  color:var(--accent);
  font-weight:600;
}
.compare-table table th:first-child,
.compare-table table td:first-child{min-width:160px;}
.compare-table table th:nth-child(2),
.compare-table table td:nth-child(2){min-width:220px;}
.compare-table table th:nth-child(3),
.compare-table table td:nth-child(3){min-width:240px;}
.compare-table table th:nth-child(4),
.compare-table table td:nth-child(4){min-width:210px;}
.compare-table table th:nth-child(5),
.compare-table table td:nth-child(5){min-width:190px;}
.compare-table table th:nth-child(6),
.compare-table table td:nth-child(6){min-width:210px;}
.compare-table table th:nth-child(7),
.compare-table table td:nth-child(7){min-width:210px;}
.compare-table table th:nth-child(8),
.compare-table table td:nth-child(8){min-width:220px;}
.compare-table table th:nth-child(9),
.compare-table table td:nth-child(9){min-width:240px;}
.compare-table .ai-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:.87rem;
  color:var(--muted);
  flex-wrap:wrap;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(17,124,118,.08);
}
.compare-table .ai-note .badge{
  font-size:.62rem;
  padding:5px 10px;
  letter-spacing:.08em;
}
.compare-table .ai-note .badge.badge-accent{
  background:var(--accent);
  color:#fff;
}
.compare-table tbody tr:first-child .ai-note{
  background:rgba(17,124,118,.12);
  color:var(--accent);
  border:1px solid rgba(17,124,118,.18);
}

/* =========================
   Currency selector modal
   ========================= */
.location-modal{
  position:fixed;
  inset:0;
  background:rgba(18,32,51,.58);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2400;
  padding:24px;
}
.location-modal[hidden]{display:none;}
.location-dialog{
  background:#fff;
  border-radius:28px;
  padding:clamp(26px,4vw,36px);
  max-width:420px;
  width:100%;
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:center;
}
.location-text{
  margin:0;
  color:var(--muted);
}
.location-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.location-actions .btn{
  min-width:160px;
}
body.location-modal-open{
  overflow:hidden;
}

.legal-container{
  max-width:960px;
  margin:0 auto;
  display:grid;
  gap:2rem;
}
.legal-block ul{
  padding-left:1.5rem;
  list-style:disc;
}
.legal-block li{
  margin-bottom:0.4rem;
}
.tool-hint{
  font-size:0.875rem;
  color:#64748b;
  margin-top:0.4rem;
}
.tool-result-value{
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:0.75rem;
}