:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(226,232,240,.95);
  --card:rgba(255,255,255,.92);
  --shadow:0 18px 60px rgba(15,23,42,.12);

  --accent:#2563eb;
  --accent2:#7c3aed;
  --accent3:#06b6d4;

  --radius:22px;
}

*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

.wrap{ max-width:1120px; margin:0 auto; padding: 18px 16px 90px; }
.section{ padding: 22px 0; }
.section-title{ text-align:center; margin: 18px auto 16px; max-width: 820px; }
.section-title h2{
  margin:0 0 10px;
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 1000;
  letter-spacing:-.6px;
}
.section-title p{
  margin:0;
  color:var(--muted);
  font-weight:700;
  line-height:1.7;
  font-size:14.8px;
}

.center{ text-align:center; margin-top:14px; }

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner{
  max-width:1120px;
  margin:0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
  letter-spacing:-.2px;
}
.brand__logo{
  width:36px; height:36px;
  border-radius:12px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
  font-weight:1000;
}

.nav__links{ display:flex; align-items:center; gap:10px; }
.nav__links a{
  padding:10px 10px;
  border-radius:12px;
  font-weight:900;
  font-size:13.5px;
  color:#0f172a;
  opacity:.92;
  transition: background .18s ease, transform .18s ease;
}
.nav__links a:hover{ background: rgba(37,99,235,.08); transform: translateY(-1px); }

.nav__cta{ display:flex; align-items:center; gap:10px; }

/* Burger */
.nav__burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  cursor:pointer;
  position:relative;
}
.nav__burger span{
  display:block;
  position:absolute;
  left:12px; right:12px;
  height:2px;
  background:#0f172a;
  border-radius:999px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.nav__burger span:nth-child(1){ top:15px; }
.nav__burger span:nth-child(2){ top:21px; }
.nav__burger span:nth-child(3){ top:27px; }
.nav__burger.is-open span:nth-child(1){ top:21px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ top:21px; transform: rotate(-45deg); }

.nav__mobile{
  max-width:1120px;
  margin:0 auto;
  padding: 10px 16px 16px;
  border-top:1px solid rgba(226,232,240,.9);
}
.nav__mobile a{
  display:block;
  padding: 12px 12px;
  border-radius:14px;
  font-weight:950;
  color:#0f172a;
}
.nav__mobile a:hover{ background: rgba(37,99,235,.08); }
.nav__mobileCta{
  display:grid;
  gap:10px;
  margin-top:10px;
}

/* Buttons */
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 950;
  font-size: 14px;
  letter-spacing:.2px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  box-shadow: 0 16px 42px rgba(37,99,235,.22);
}
.btn-secondary{
  background: rgba(255,255,255,.92);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); opacity:.95; }

/* HERO */
.hero{
  margin-top: 14px;
  position:relative;
  border-radius: 28px;
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(900px 320px at 60% 120%, rgba(6,182,212,.10), transparent 60%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 18px;
  padding: 22px;
  align-items:center;
}
.hero h1{
  margin: 8px 0 10px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 1000;
}
.hero h1 .grad{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15.4px;
  max-width: 62ch;
  font-weight: 650;
}

.miniwow{
  margin: 12px 0 14px;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  border: none;
  box-shadow:0 14px 40px rgba(15,23,42,.14);
  overflow:hidden;
  max-width:100%;
}
.miniwow__price{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-start;
  white-space:normal;
}
.miniwow__from{ font-size:12px; font-weight:950; color:#475569; }
.miniwow__amount{
  font-size:28px;
  font-weight:1000;
  letter-spacing:-.6px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: pricePulse 1.6s ease-in-out infinite;
}
.miniwow__per{ font-size:12px; font-weight:950; color:#64748b; }
@keyframes pricePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.04);} }

.miniwow__scroll{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.miniwow__track{
  display:inline-flex;
  gap:14px;
  white-space:nowrap;
  animation:miniwowMove 14s linear infinite;
  font-size:12px;
  font-weight:950;
  color:#0f172a;
}
.miniwow__track span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:none;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}
@keyframes miniwowMove{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }

.hero__media{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 48px rgba(15,23,42,.12);
  min-height: 260px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(600px 240px at 80% 20%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(135deg, #0f172a, #020617);
  display:grid;
  place-items:center;
  color:#fff;
}

.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 220px at 25% 20%, rgba(255,255,255,.12), transparent 55%);
  pointer-events:none;
}
.hero__media .hint{
  position:absolute;
  bottom:12px;
  left:12px;
  right:12px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  font-size: 12.8px;
  font-weight: 900;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hero__media .hint .pill{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight: 950;
  white-space:nowrap;
}

/* TRUST */
.trust{ margin: 18px auto 0; text-align:center; }
.trust__label{ font-size:12px; font-weight:950; color:#64748b; letter-spacing:.2px; margin-bottom: 12px; }
.trust__grid{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.trust-card{ display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; transition: transform .2s ease; }
.trust-logo{
  width:180px; height:90px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95);
  border-radius:16px;
  box-shadow:0 14px 36px rgba(15,23,42,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.trust-logo img{ max-width:150px; max-height:60px; object-fit:contain; transition: transform .25s ease; display:block; }
.trust-name{ font-size:13px; font-weight:900; color:#334155; }
.trust-card:hover .trust-logo{ transform: translateY(-6px) scale(1.05); box-shadow: 0 22px 56px rgba(15,23,42,.22); }
.trust-card:hover img{ transform: scale(1.08); }

/* FEATURES */
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.wowcard{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  padding: 16px;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate;
}
.wowcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(380px 180px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(380px 180px at 88% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.wowcard::after{
  content:"";
  position:absolute;
  inset:auto -120px -120px auto;
  width:260px;
  height:260px;
  background: radial-gradient(circle at center, rgba(6,182,212,.14), transparent 62%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
  z-index:0;
}
.wowcard > *{ position:relative; z-index:1; }
.wowcard:hover{ transform: translateY(-3px); border-color: rgba(99,102,241,.28); box-shadow: 0 20px 60px rgba(15,23,42,.12); }
.wowcard:hover::after{ opacity:1; }

.wowicon{
  width:54px; height:54px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 1000;
}
.wowtitle{ margin:0 0 8px; font-size: 15.8px; font-weight: 1000; letter-spacing:-.2px; }
.wowtext{ margin:0 0 10px; color: var(--muted); line-height: 1.7; font-size: 14.2px; font-weight: 650; }
.wowmore{ display:inline-flex; align-items:center; gap:8px; font-size: 12.8px; font-weight: 950; color: var(--accent); cursor:pointer; user-select:none; }

/* PACKS */
.packs-wrap{ max-width: 920px; margin: 0 auto; }
.packs-sub{ text-align:center; margin: 0 auto 18px; color:#475569; font-weight:800; font-size:14px; }
.packs{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pack{
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 48px rgba(15,23,42,.10);
  overflow:hidden;
  padding: 16px;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
  isolation:isolate;
}
.pack::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 200px at 20% 0%, rgba(37,99,235,.12), transparent 60%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.pack.pro::before{ background: radial-gradient(520px 200px at 20% 0%, rgba(124,58,237,.14), transparent 60%); }
.pack > *{ position:relative; z-index:1; }
.pack:hover{ transform: translateY(-3px); border-color: rgba(99,102,241,.28); box-shadow: 0 22px 70px rgba(15,23,42,.14); }

.pack-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.pack-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.88);
  font-weight: 950;
  font-size: 12px;
  color:#0f172a;
  white-space:nowrap;
}
.pack-badge .spark{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(37,99,235,.14);
}
.pack-title{ margin: 4px 0 2px; font-size: 18px; font-weight: 1000; letter-spacing:-.3px; }
.pack-desc{ margin: 0; color:#475569; line-height:1.65; font-size: 13.8px; font-weight: 700; }
.pack-price{ margin-top: 10px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pack-price b{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing:-.8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pack.pro .pack-price b{
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pack-price span{ font-size: 12px; font-weight: 900; color:#64748b; }

.pack-list{ margin-top: 12px; display:grid; gap: 8px; }
.pack-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-size: 13px;
  font-weight: 850;
  color:#0f172a;
  line-height: 1.35;
}
.pack-item i{
  font-style:normal;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius: 8px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
  flex:0 0 auto;
}
.pack.pro .pack-item i{ background: rgba(124,58,237,.10); color: var(--accent2); }

.pack-foot{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#475569;
  font-weight: 800;
  font-size: 12.8px;
}
.pack-foot .hint{ display:flex; align-items:center; gap:8px; opacity:.92; }
.pack-foot .pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.9);
  font-weight: 950;
  color:#0f172a;
  white-space:nowrap;
}

/* PRESTATIONS */
.mini-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.mini{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
  padding: 12px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.mini:hover{ transform: translateY(-3px); box-shadow: 0 18px 52px rgba(15,23,42,.12); }
.mini .micon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  font-weight: 1000;
  margin-bottom: 10px;
}
.mini h4{ margin:0 0 6px; font-size: 13.5px; font-weight: 1000; letter-spacing:-.1px; }
.mini p{ margin:0; color:#64748b; font-size: 12.2px; line-height: 1.55; font-weight: 700; }

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 16px;
  align-items:stretch;
}
.contact-card{
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.contact-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.12), transparent 55%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.contact-card > *{ position:relative; z-index:1; }
.contact-card h3{ margin:0 0 8px; font-size: 22px; font-weight: 1000; letter-spacing:-.4px; }
.contact-card p{ margin:0 0 14px; color:#475569; line-height: 1.75; font-weight: 750; font-size: 14.6px; }

.contact-media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
  min-height: 260px;
  background: linear-gradient(135deg, rgba(2,6,23,.75), rgba(2,6,23,.50));
  display:grid;
  place-items:center;
}
.contact-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.form{ display:grid; gap: 10px; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label{ display:block; font-size: 12px; font-weight: 950; color:#334155; margin: 2px 0 6px; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  outline:none;
  font-size: 14px;
  font-weight: 700;
  color:#0f172a;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus, textarea:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 5px rgba(37,99,235,.12);
}
textarea{ min-height: 110px; resize: vertical; }
.check{ display:flex; align-items:center; gap:10px; font-size: 12.8px; font-weight: 800; color:#475569; }
.check input{ width: 16px; height: 16px; padding:0; }
.form-hint{ margin: 6px 0 0; color:#475569; font-weight:800; font-size:13px; }

/* FAQ */
.faq{
  max-width: 820px;
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.faq__head{ padding: 18px 18px 10px; text-align:center; }
.faq__head h3{ margin:0 0 8px; font-size: 22px; font-weight: 1000; letter-spacing:-.4px; }
.faq__head p{ margin:0; color:#64748b; font-weight: 750; line-height: 1.7; font-size: 14.2px; }
.faq-item{ border-top: 1px solid rgba(226,232,240,.9); padding: 0; }
.faq-q{
  width:100%;
  background:none;
  border:0;
  cursor:pointer;
  padding: 16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  text-align:left;
  font-weight: 950;
  font-size: 14.6px;
  color:#0f172a;
}
.faq-q:hover{ color: var(--accent); }
.faq-icon{
  width:34px; height:34px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight:1000;
  color: var(--accent);
  transition: transform .2s ease;
  flex:0 0 auto;
}
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition: max-height .25s ease, opacity .25s ease;
  padding: 0 16px;
}
.faq-item.open .faq-a{ max-height: 240px; opacity: 1; padding-bottom: 16px; }
.faq-a p{ margin: 0; color:#475569; line-height: 1.7; font-weight: 750; font-size: 14px; }

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 200;
}
.modal.open{ display:flex; }
.modal__panel{
  width: min(920px, 100%);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 24px 90px rgba(15,23,42,.24);
  overflow:hidden;
  position:relative;
}
.modal__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.12), transparent 55%);
  pointer-events:none;
  opacity:.95;
}
.modal__bar{
  position:relative;
  z-index:1;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.88);
}
.modal__bar b{ font-size: 14px; font-weight: 1000; letter-spacing:-.1px; }
.modal__close{
  border:0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  width:40px; height:40px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:1000;
  color:#0f172a;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.modal__close:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,23,42,.16); }
.modal__body{
  position:relative;
  z-index:1;
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal__card{
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
  padding: 14px;
}
.modal__card h4{ margin:0 0 8px; font-size: 16px; font-weight:1000; letter-spacing:-.2px; }
.modal__card p{ margin:0; color:#475569; font-weight:750; line-height:1.7; font-size: 14px; }
.modal__list{ margin-top: 12px; display:grid; gap: 8px; }
.modal__li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-weight: 850;
  font-size: 13.2px;
  line-height:1.35;
}
.modal__li i{
  font-style:normal;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius: 8px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
  flex:0 0 auto;
}

/* REVEAL */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.is-visible{ opacity:1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; }

/* FOOTER */
.footer{
  margin-top: 40px;
  border-top:1px solid rgba(226,232,240,.9);
  padding-top: 18px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__brand b{ font-weight:1000; }
.footer__brand p{ margin:2px 0 0; color:#64748b; font-weight:800; font-size:13px; }
.footer__links{ display:flex; gap:12px; flex-wrap:wrap; }
.footer__links a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-weight:950;
  font-size:13px;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; padding: 18px; }
  .hero__media{ min-height: 280px; }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .packs{ grid-template-columns: 1fr; }
  .mini-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .contact{ grid-template-columns: 1fr; }
  .modal__body{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  /* Mobile uniquement : on masque l'image hero */
  .hero__media{ display:none; }

  /* Mobile: on masque complètement la grande photo du hero */
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:inline-block; }

  .btn{ width:100%; justify-content:center; }
  .hero__actions{ display:grid; grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .mini-grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }
  .trust__grid{ gap:18px; }
  .trust-logo{ width:150px; height:78px; }
  .trust-logo img{ max-width:130px; max-height:52px; }
  .miniwow__price{ justify-content:flex-start; }

/* Mobile v11: stop clipping / stop horizontal overflow */
body{ overflow-x:hidden; }
.wrap{ padding-left:14px; padding-right:14px; }
.hero{ overflow:hidden; } /* keep rounded corners */
.hero__grid{ padding:16px; }
.hero h1{
  font-size: clamp(24px, 8.2vw, 34px);
  line-height: 1.08;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hero p{ font-size: 14.4px; }

/* Miniwow: allow wrapping + prevent marquee from widening page */
.miniwow{ max-width:100%; overflow:hidden; }
.miniwow__price{ flex-wrap:wrap; white-space:normal; }
.miniwow__amount{ font-size:24px; }
.miniwow__scroll{ max-width:100%; overflow:hidden; }
.miniwow__track{ max-width:100%; }

}

@media (prefers-reduced-motion: reduce){
  .btn, .wowcard, .pack, .mini, .trust-logo{ transition:none !important; }
  .miniwow__track, .miniwow__amount{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}


@media (min-width: 621px){
  .hero__media{ display:grid; }
}


.hero__placeholder{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero__placeholder strong{
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.4px;
}
.hero__placeholder span{
  font-size:13px;
  font-weight:900;
  opacity:.85;
}


/* === WOW ANIMS v7 === */
html{ scroll-behavior:smooth; }

/* Nav shadow on scroll */
.nav.is-scrolled{
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
  border-bottom-color: rgba(226,232,240,.85);
}

/* Hamburger */
.nav__burger{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  display:none;
  place-items:center;
  cursor:pointer;
  padding:0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav__burger:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,23,42,.14); }
.nav__burger span{
  display:block;
  width:18px;
  height:2px;
  background:#0f172a;
  border-radius:999px;
  margin:2.2px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* Mobile menu */
.mnav{
  position:fixed; inset:0;
  display:none;
  z-index:120;
}
.mnav.open{ display:block; }
.mnav__backdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  animation: fadeIn .22s ease forwards;
}
.mnav__panel{
  position:absolute;
  top:14px; right:14px; left:14px;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.96);
  box-shadow: 0 26px 90px rgba(15,23,42,.22);
  overflow:hidden;
  transform: translateY(-10px) scale(.98);
  opacity:0;
  animation: panelIn .24s cubic-bezier(.2,.9,.2,1) forwards;
}
.mnav__top{
  padding: 14px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.9);
}
.mnav__close{
  width:42px; height:42px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:1000;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mnav__close:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,23,42,.14); }
.mnav__links{
  padding: 10px 14px;
  display:grid;
  gap:8px;
}
.mnav__links a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mnav__links a:hover{ transform: translateY(-2px); border-color: rgba(99,102,241,.28); box-shadow: 0 18px 46px rgba(15,23,42,.12); }
.mnav__cta{
  padding: 12px 14px 14px;
  display:grid;
  gap:10px;
}

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes panelIn{ to{ transform: translateY(0) scale(1); opacity:1; } }

/* Decorative blobs */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity:.20;
  transform: translate3d(0,0,0);
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.9), rgba(124,58,237,.35) 60%, transparent 70%);
  animation: floatBlob 12s ease-in-out infinite;
}
.blob.b1{ top:-180px; left:-180px; animation-delay:0s; }
.blob.b2{
  top: 15%;
  right:-220px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.9), rgba(6,182,212,.30) 60%, transparent 70%);
  animation-delay:-3s;
}
.blob.b3{
  bottom:-260px;
  left: 18%;
  width: 680px; height: 680px;
  background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.85), rgba(37,99,235,.25) 60%, transparent 70%);
  animation-delay:-6s;
}
@keyframes floatBlob{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(18px) translateX(14px) scale(1.03); }
}

/* Button shine + ripple */
.btn{
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-60%);
  transition: transform .6s ease;
  opacity:.0;
  pointer-events:none;
}
.btn:hover::before{
  transform: translateX(60%);
  opacity:.55;
}
.ripple{
  position:absolute;
  border-radius:999px;
  transform: scale(0);
  animation: ripple .55s ease-out;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform: scale(18); opacity:0; }
}

/* Stronger reveal (stagger) */
.reveal{
  opacity:0;
  transform: translateY(14px) scale(.99);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .50s ease, transform .50s cubic-bezier(.2,.9,.2,1);
}

/* Subtle 3D hover for cards (desktop only) */
@media (hover:hover) and (pointer:fine){
  .wowcard, .pack, .mini{
    transform-style: preserve-3d;
  }
}

/* Mobile: show burger, hide desktop CTA a bit tighter */
@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  .nav__burger{ display:grid; }
  .nav__cta .btn{ display:none; } /* CTA déplacés dans le menu mobile */
}

/* === ABOUT WOW v9 === */
.about__badges{
  margin: 12px 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  font-weight: 950;
  font-size: 12.6px;
  color:#0f172a;
}

/* Hero placeholder dashboard */
.hero__placeholder--big{
  width: min(520px, 92%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: 14px;
  backdrop-filter: blur(10px);
}
.hp__top{
  display:flex; align-items:center; gap:8px;
  margin-bottom: 12px;
}
.hp__dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.38);
}
.hp__label{
  margin-left:auto;
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.82);
}
.hp__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hp__tile{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.28);
  padding: 12px;
}
.hp__tile b{
  display:block;
  font-size: 13.5px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  letter-spacing:-.2px;
  margin-bottom: 4px;
}
.hp__mini{
  font-size: 11.6px;
  font-weight: 900;
  color: rgba(255,255,255,.70);
}
.hp__bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.hp__bar i{
  display:block;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.85));
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
  transform-origin:left;
  animation: barFill 1.15s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes barFill{ from{ transform: scaleX(.15);} to{ transform: scaleX(1);} }

.hp__footer{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.hp__pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 950;
}

/* Stats */
.stats-grid{
  max-width: 1040px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.stat{
  border-radius: 24px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 48px rgba(15,23,42,.10);
  padding: 16px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.stat::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(520px 200px at 88% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.stat > *{ position:relative; z-index:1; }
.stat__icon{
  width:52px; height:52px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  font-weight: 1000;
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  margin-bottom: 12px;
  font-size: 20px;
}
.stat__num{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing:-.8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}
.stat__label{
  margin-top: 6px;
  font-weight: 950;
  color:#0f172a;
  font-size: 13.4px;
}
.stat__desc{
  margin-top: 8px;
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.2px;
}

.about-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}
.about-card .wowicon{ font-size: 20px; }

/* Split section */
.split{
  max-width: 1040px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:stretch;
}
.split__title{
  margin:0 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 1000;
  letter-spacing:-.6px;
}
.split__text{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.75;
  font-size: 14.8px;
}
.chip-row{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  font-weight: 950;
  font-size: 12.6px;
  color:#0f172a;
}
.glass{
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(15,23,42,.12);
  padding: 16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.10), transparent 55%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.glass > *{ position:relative; z-index:1; }
.glass__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.glass__head b{
  font-size: 14.6px;
  font-weight: 1000;
  letter-spacing:-.2px;
}
.glass__tag{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight: 950;
  font-size: 12px;
  white-space:nowrap;
}
.glass__list{ display:grid; gap: 8px; }
.glass__item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-weight: 850;
  font-size: 13.2px;
  line-height:1.35;
}
.glass__item i{
  font-style:normal;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius: 8px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
  flex:0 0 auto;
}
.glass__foot{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mini-pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  font-weight: 950;
  font-size: 12px;
  color:#0f172a;
}

/* Timeline */
.timeline{
  max-width: 860px;
  margin: 0 auto;
  display:grid;
  gap: 10px;
}
.t-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius: 24px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 48px rgba(15,23,42,.10);
  padding: 14px 16px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.t-step::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.t-step > *{ position:relative; z-index:1; }
.t-dot{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  font-weight:1000;
  box-shadow: 0 14px 36px rgba(37,99,235,.20);
  flex:0 0 auto;
}
.t-body b{
  display:block;
  font-weight: 1000;
  letter-spacing:-.2px;
  margin-bottom: 4px;
}
.t-body p{
  margin:0;
  color:#475569;
  font-weight: 750;
  line-height: 1.65;
  font-size: 13.8px;
}

@media (max-width: 980px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  .stats-grid{ grid-template-columns: 1fr; }
}

/* Prevent rare overflow on small screens */
.hero h1, .hero p{ overflow-wrap:anywhere; }


/* Layout safety: allow grid/flex children to shrink */
.hero__grid > *{ min-width:0; }


/* === COOKIE CONSENT v12 === */
.cookie{
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 300;
  display:none;
}
.cookie.show{ display:block; }
.cookie__card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 90px rgba(15,23,42,.22);
  backdrop-filter: blur(10px);
  padding: 14px;
  overflow:hidden;
  position:relative;
  animation: cookieIn .28s cubic-bezier(.2,.9,.2,1) both;
}
.cookie__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(520px 200px at 88% 10%, rgba(124,58,237,.10), transparent 60%);
  opacity:.95;
  pointer-events:none;
}
.cookie__card > *{ position:relative; z-index:1; }

@keyframes cookieIn{
  from{ transform: translateY(12px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.cookie__top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.cookie__icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  flex:0 0 auto;
  font-size: 18px;
}
.cookie__top b{
  display:block;
  font-weight: 1000;
  letter-spacing:-.2px;
  margin: 2px 0 2px;
}
.cookie__top p{
  margin:0;
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.6px;
}

.cookie__actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cookie__btn{
  width:auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.6px;
}
.cookie__foot{
  margin-top: 10px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  color:#64748b;
  font-weight: 800;
  font-size: 12px;
}
.cookie__foot a{
  color: var(--accent);
  font-weight: 950;
}
.cookie__more{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(226,232,240,.9);
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.2px;
}

@media (max-width: 620px){
  .cookie{ inset:auto 12px 12px 12px; }
  .cookie__actions{ justify-content:stretch; }
  .cookie__btn{ width:100%; }
}



/* === HERO FLOW v14 === */
.hero__media{ display:flex; align-items:stretch; justify-content:stretch; padding:14px; }

.flow{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(226,232,240,.16);
  background:
    radial-gradient(720px 260px at 20% 0%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(720px 260px at 90% 10%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.84), rgba(2,6,23,.68));
  box-shadow:0 18px 60px rgba(2,6,23,.45);
  overflow:hidden;
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.flow::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(420px 220px at 24% 20%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(520px 260px at 78% 30%, rgba(6,182,212,.10), transparent 60%);
  pointer-events:none; opacity:.9;
}
.flow::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:38px 38px; opacity:.05; pointer-events:none;
}
.flow > *{ position:relative; z-index:1; }

.flow__head{ padding:14px 14px 10px; }
.flow__title{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.flow__title b{ color:#fff; font-weight:1000; letter-spacing:-.2px; font-size:15px; }
.flow__pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
  font-weight:950; font-size:12px; user-select:none; white-space:nowrap;
}
.flow__dot{
  width:10px; height:10px; border-radius:999px;
  background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.16);
  animation:flowPulse 1.4s ease-in-out infinite;
}
@keyframes flowPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} }
.flow__sub{ margin-top:8px; color:rgba(255,255,255,.72); font-weight:850; font-size:12.4px; line-height:1.45; }

.flow__stage{ padding:0 14px 10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flow__step{
  width:100%; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:18px; padding:10px;
  display:flex; gap:10px; align-items:center;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:0 12px 34px rgba(2,6,23,.22);
}
.flow__step:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.22); }
.flow__step.is-active{
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.9));
  border-color:rgba(255,255,255,.22);
}
.flow__ico{
  width:36px; height:36px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; flex:0 0 auto; font-size:16px;
}
.flow__k{ display:block; color:#fff; font-weight:1000; font-size:12.8px; letter-spacing:-.1px; }
.flow__d{ display:block; margin-top:2px; color:rgba(255,255,255,.70); font-weight:850; font-size:11.8px; line-height:1.25; }

.flow__progress{ padding:0 14px 12px; }
.flow__progress::before{
  content:""; display:block; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(2,6,23,.18);
}
.flow__bar{
  height:10px; border-radius:999px; margin-top:-10px; width:10%;
  background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(124,58,237,.9), rgba(6,182,212,.9));
  box-shadow:0 10px 26px rgba(37,99,235,.28);
  transition:width .6s cubic-bezier(.2,.9,.2,1);
}

.flow__card{
  margin:0 14px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 34px rgba(2,6,23,.25);
  overflow:hidden;
  padding:12px;
}
.flow__cardtop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.flow__tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:950; font-size:12px; white-space:nowrap;
}
.flow__case b{
  display:block; margin-top:8px;
  color:#fff; font-weight:1000; letter-spacing:-.2px;
  font-size:14.4px; line-height:1.2; overflow-wrap:anywhere;
}
#flowP{ display:block; margin-top:6px; color:rgba(255,255,255,.72); font-weight:850; font-size:12.2px; line-height:1.45; }

.flow__metric{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(2,6,23,.22);
  padding:10px;
  min-width:150px;
  text-align:right;
}
.flow__mK{ color:rgba(255,255,255,.70); font-weight:900; font-size:11.8px; }
.flow__mV{ margin-top:6px; color:#fff; font-weight:1000; font-size:14px; letter-spacing:-.2px; }
.flow__mS{ margin-top:4px; color:rgba(255,255,255,.66); font-weight:850; font-size:11.6px; white-space:nowrap; }

.flow__bullets{ margin-top:12px; display:grid; gap:8px; }
.flow__li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 10px; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.22);
}
.flow__liL{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.flow__b{
  width:28px; height:28px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:#fff; flex:0 0 auto; font-size:12px;
}
.flow__t b{ display:block; color:#fff; font-weight:950; font-size:12.8px; line-height:1.25; overflow-wrap:anywhere; }
.flow__t span{ display:block; margin-top:2px; color:rgba(255,255,255,.66); font-weight:850; font-size:11.8px; line-height:1.3; }
.flow__right{ color:rgba(255,255,255,.62); font-weight:900; font-size:11.5px; white-space:nowrap; flex:0 0 auto; }

.flow__controls{ margin-top:12px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.flow__btn{ width:auto; padding:10px 12px; font-size:13.6px; }

@media (max-width: 980px){ .flow__metric{ min-width:140px; } }
@media (max-width: 620px){
  .hero__media{ min-height:320px; }
  .flow__metric{ display:none; }
  .flow__controls{ justify-content:stretch; }
  .flow__btn{ width:100%; }
}

/* === SEO PAGES v16 === */
.hero-lite{
  margin-top: 14px;
  position:relative;
  border-radius: 28px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
  isolation:isolate;
}
.hero-lite::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(900px 320px at 60% 120%, rgba(6,182,212,.10), transparent 60%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.hero-lite__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 22px;
  align-items:center;
}
.hero-lite h1{
  margin: 8px 0 10px;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 1000;
}
.hero-lite p{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15.2px;
  max-width: 64ch;
  font-weight: 650;
}
.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(15,23,42,.10);
  padding: 12px;
}
.stat b{
  display:block;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing:-.4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat span{
  display:block;
  margin-top: 4px;
  color:#475569;
  font-weight: 900;
  font-size: 12.8px;
  line-height: 1.3;
}
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kpi{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  padding: 16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.kpi::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(380px 180px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(380px 180px at 88% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.kpi > *{ position:relative; z-index:1; }
.kpi h3{ margin:0 0 8px; font-size: 16px; font-weight: 1000; letter-spacing:-.2px; }
.kpi p{ margin:0; color:var(--muted); font-weight:700; line-height:1.7; font-size:14.2px; }

.steps{ display:grid; gap: 10px; }
.step{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}
.step i{
  font-style:normal;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  flex:0 0 auto;
  font-weight: 1000;
}
.step b{ display:block; font-weight: 1000; letter-spacing:-.1px; }
.step span{ display:block; margin-top: 3px; color:#64748b; font-weight: 800; font-size: 12.8px; line-height:1.35; }

.cta-band{
  margin-top: 16px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.cta-band b{ font-size: 15px; font-weight: 1000; letter-spacing:-.2px; }
.cta-band p{ margin:0; color:#475569; font-weight:800; }

@media (max-width: 980px){
  .hero-lite__grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
}

/* FOOTER */
.footer{
  margin-top: 40px;
  border-top:1px solid rgba(226,232,240,.9);
  padding-top: 18px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__brand b{ font-weight:1000; }
.footer__brand p{ margin:2px 0 0; color:#64748b; font-weight:800; font-size:13px; }
.footer__links{ display:flex; gap:12px; flex-wrap:wrap; }
.footer__links a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-weight:950;
  font-size:13px;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; padding: 18px; }
  .hero__media{ min-height: 280px; }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .packs{ grid-template-columns: 1fr; }
  .mini-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .contact{ grid-template-columns: 1fr; }
  .modal__body{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  /* Mobile uniquement : on masque l'image hero */
  .hero__media{ display:none; }

  /* Mobile: on masque complètement la grande photo du hero */
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:inline-block; }

  .btn{ width:100%; justify-content:center; }
  .hero__actions{ display:grid; grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .mini-grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }
  .trust__grid{ gap:18px; }
  .trust-logo{ width:150px; height:78px; }
  .trust-logo img{ max-width:130px; max-height:52px; }
  .miniwow__price{ justify-content:flex-start; }

/* Mobile v11: stop clipping / stop horizontal overflow */
body{ overflow-x:hidden; }
.wrap{ padding-left:14px; padding-right:14px; }
.hero{ overflow:hidden; } /* keep rounded corners */
.hero__grid{ padding:16px; }
.hero h1{
  font-size: clamp(24px, 8.2vw, 34px);
  line-height: 1.08;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hero p{ font-size: 14.4px; }

/* Miniwow: allow wrapping + prevent marquee from widening page */
.miniwow{ max-width:100%; overflow:hidden; }
.miniwow__price{ flex-wrap:wrap; white-space:normal; }
.miniwow__amount{ font-size:24px; }
.miniwow__scroll{ max-width:100%; overflow:hidden; }
.miniwow__track{ max-width:100%; }

}

@media (prefers-reduced-motion: reduce){
  .btn, .wowcard, .pack, .mini, .trust-logo{ transition:none !important; }
  .miniwow__track, .miniwow__amount{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}


@media (min-width: 621px){
  .hero__media{ display:grid; }
}


.hero__placeholder{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero__placeholder strong{
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.4px;
}
.hero__placeholder span{
  font-size:13px;
  font-weight:900;
  opacity:.85;
}


/* === WOW ANIMS v7 === */
html{ scroll-behavior:smooth; }

/* Nav shadow on scroll */
.nav.is-scrolled{
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
  border-bottom-color: rgba(226,232,240,.85);
}

/* Hamburger */
.nav__burger{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  display:none;
  place-items:center;
  cursor:pointer;
  padding:0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav__burger:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,23,42,.14); }
.nav__burger span{
  display:block;
  width:18px;
  height:2px;
  background:#0f172a;
  border-radius:999px;
  margin:2.2px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* Mobile menu */
.mnav{
  position:fixed; inset:0;
  display:none;
  z-index:120;
}
.mnav.open{ display:block; }
.mnav__backdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  animation: fadeIn .22s ease forwards;
}
.mnav__panel{
  position:absolute;
  top:14px; right:14px; left:14px;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.96);
  box-shadow: 0 26px 90px rgba(15,23,42,.22);
  overflow:hidden;
  transform: translateY(-10px) scale(.98);
  opacity:0;
  animation: panelIn .24s cubic-bezier(.2,.9,.2,1) forwards;
}
.mnav__top{
  padding: 14px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.9);
}
.mnav__close{
  width:42px; height:42px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:1000;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mnav__close:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,23,42,.14); }
.mnav__links{
  padding: 10px 14px;
  display:grid;
  gap:8px;
}
.mnav__links a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mnav__links a:hover{ transform: translateY(-2px); border-color: rgba(99,102,241,.28); box-shadow: 0 18px 46px rgba(15,23,42,.12); }
.mnav__cta{
  padding: 12px 14px 14px;
  display:grid;
  gap:10px;
}

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes panelIn{ to{ transform: translateY(0) scale(1); opacity:1; } }

/* Decorative blobs */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity:.20;
  transform: translate3d(0,0,0);
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.9), rgba(124,58,237,.35) 60%, transparent 70%);
  animation: floatBlob 12s ease-in-out infinite;
}
.blob.b1{ top:-180px; left:-180px; animation-delay:0s; }
.blob.b2{
  top: 15%;
  right:-220px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.9), rgba(6,182,212,.30) 60%, transparent 70%);
  animation-delay:-3s;
}
.blob.b3{
  bottom:-260px;
  left: 18%;
  width: 680px; height: 680px;
  background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.85), rgba(37,99,235,.25) 60%, transparent 70%);
  animation-delay:-6s;
}
@keyframes floatBlob{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(18px) translateX(14px) scale(1.03); }
}

/* Button shine + ripple */
.btn{
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-60%);
  transition: transform .6s ease;
  opacity:.0;
  pointer-events:none;
}
.btn:hover::before{
  transform: translateX(60%);
  opacity:.55;
}
.ripple{
  position:absolute;
  border-radius:999px;
  transform: scale(0);
  animation: ripple .55s ease-out;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform: scale(18); opacity:0; }
}

/* Stronger reveal (stagger) */
.reveal{
  opacity:0;
  transform: translateY(14px) scale(.99);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .50s ease, transform .50s cubic-bezier(.2,.9,.2,1);
}

/* Subtle 3D hover for cards (desktop only) */
@media (hover:hover) and (pointer:fine){
  .wowcard, .pack, .mini{
    transform-style: preserve-3d;
  }
}

/* Mobile: show burger, hide desktop CTA a bit tighter */
@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  .nav__burger{ display:grid; }
  .nav__cta .btn{ display:none; } /* CTA déplacés dans le menu mobile */
}

/* === ABOUT WOW v9 === */
.about__badges{
  margin: 12px 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  font-weight: 950;
  font-size: 12.6px;
  color:#0f172a;
}

/* Hero placeholder dashboard */
.hero__placeholder--big{
  width: min(520px, 92%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: 14px;
  backdrop-filter: blur(10px);
}
.hp__top{
  display:flex; align-items:center; gap:8px;
  margin-bottom: 12px;
}
.hp__dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.38);
}
.hp__label{
  margin-left:auto;
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.82);
}
.hp__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hp__tile{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.28);
  padding: 12px;
}
.hp__tile b{
  display:block;
  font-size: 13.5px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  letter-spacing:-.2px;
  margin-bottom: 4px;
}
.hp__mini{
  font-size: 11.6px;
  font-weight: 900;
  color: rgba(255,255,255,.70);
}
.hp__bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.hp__bar i{
  display:block;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.85));
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
  transform-origin:left;
  animation: barFill 1.15s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes barFill{ from{ transform: scaleX(.15);} to{ transform: scaleX(1);} }

.hp__footer{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.hp__pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 950;
}

/* Stats */
.stats-grid{
  max-width: 1040px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.stat{
  border-radius: 24px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 48px rgba(15,23,42,.10);
  padding: 16px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.stat::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(520px 200px at 88% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.stat > *{ position:relative; z-index:1; }
.stat__icon{
  width:52px; height:52px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  font-weight: 1000;
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  margin-bottom: 12px;
  font-size: 20px;
}
.stat__num{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing:-.8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}
.stat__label{
  margin-top: 6px;
  font-weight: 950;
  color:#0f172a;
  font-size: 13.4px;
}
.stat__desc{
  margin-top: 8px;
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.2px;
}

.about-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}
.about-card .wowicon{ font-size: 20px; }

/* Split section */
.split{
  max-width: 1040px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:stretch;
}
.split__title{
  margin:0 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 1000;
  letter-spacing:-.6px;
}
.split__text{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.75;
  font-size: 14.8px;
}
.chip-row{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  font-weight: 950;
  font-size: 12.6px;
  color:#0f172a;
}
.glass{
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(15,23,42,.12);
  padding: 16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.10), transparent 55%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.glass > *{ position:relative; z-index:1; }
.glass__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.glass__head b{
  font-size: 14.6px;
  font-weight: 1000;
  letter-spacing:-.2px;
}
.glass__tag{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight: 950;
  font-size: 12px;
  white-space:nowrap;
}
.glass__list{ display:grid; gap: 8px; }
.glass__item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-weight: 850;
  font-size: 13.2px;
  line-height:1.35;
}
.glass__item i{
  font-style:normal;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius: 8px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
  flex:0 0 auto;
}
.glass__foot{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mini-pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  font-weight: 950;
  font-size: 12px;
  color:#0f172a;
}

/* Timeline */
.timeline{
  max-width: 860px;
  margin: 0 auto;
  display:grid;
  gap: 10px;
}
.t-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius: 24px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 48px rgba(15,23,42,.10);
  padding: 14px 16px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.t-step::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.t-step > *{ position:relative; z-index:1; }
.t-dot{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  font-weight:1000;
  box-shadow: 0 14px 36px rgba(37,99,235,.20);
  flex:0 0 auto;
}
.t-body b{
  display:block;
  font-weight: 1000;
  letter-spacing:-.2px;
  margin-bottom: 4px;
}
.t-body p{
  margin:0;
  color:#475569;
  font-weight: 750;
  line-height: 1.65;
  font-size: 13.8px;
}

@media (max-width: 980px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
      /* Mobile fix: avoid text clipping in hero */
      .miniwow__price{ white-space:normal; }
      .miniwow__price{ gap:8px; }
      .miniwow__amount{ font-size:24px; }
            .hero::before{ pointer-events:none; }
      
  .stats-grid{ grid-template-columns: 1fr; }
}

/* Prevent rare overflow on small screens */
.hero h1, .hero p{ overflow-wrap:anywhere; }


/* Layout safety: allow grid/flex children to shrink */
.hero__grid > *{ min-width:0; }


/* === COOKIE CONSENT v12 === */
.cookie{
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 300;
  display:none;
}
.cookie.show{ display:block; }
.cookie__card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 90px rgba(15,23,42,.22);
  backdrop-filter: blur(10px);
  padding: 14px;
  overflow:hidden;
  position:relative;
  animation: cookieIn .28s cubic-bezier(.2,.9,.2,1) both;
}
.cookie__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(520px 200px at 88% 10%, rgba(124,58,237,.10), transparent 60%);
  opacity:.95;
  pointer-events:none;
}
.cookie__card > *{ position:relative; z-index:1; }

@keyframes cookieIn{
  from{ transform: translateY(12px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.cookie__top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.cookie__icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  flex:0 0 auto;
  font-size: 18px;
}
.cookie__top b{
  display:block;
  font-weight: 1000;
  letter-spacing:-.2px;
  margin: 2px 0 2px;
}
.cookie__top p{
  margin:0;
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.6px;
}

.cookie__actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cookie__btn{
  width:auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.6px;
}
.cookie__foot{
  margin-top: 10px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  color:#64748b;
  font-weight: 800;
  font-size: 12px;
}
.cookie__foot a{
  color: var(--accent);
  font-weight: 950;
}
.cookie__more{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(226,232,240,.9);
  color:#475569;
  font-weight: 750;
  line-height: 1.6;
  font-size: 13.2px;
}

@media (max-width: 620px){
  .cookie{ inset:auto 12px 12px 12px; }
  .cookie__actions{ justify-content:stretch; }
  .cookie__btn{ width:100%; }
}



/* === HERO FLOW v14 === */
.hero__media{ display:flex; align-items:stretch; justify-content:stretch; padding:14px; }

.flow{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(226,232,240,.16);
  background:
    radial-gradient(720px 260px at 20% 0%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(720px 260px at 90% 10%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.84), rgba(2,6,23,.68));
  box-shadow:0 18px 60px rgba(2,6,23,.45);
  overflow:hidden;
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.flow::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(420px 220px at 24% 20%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(520px 260px at 78% 30%, rgba(6,182,212,.10), transparent 60%);
  pointer-events:none; opacity:.9;
}
.flow::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:38px 38px; opacity:.05; pointer-events:none;
}
.flow > *{ position:relative; z-index:1; }

.flow__head{ padding:14px 14px 10px; }
.flow__title{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.flow__title b{ color:#fff; font-weight:1000; letter-spacing:-.2px; font-size:15px; }
.flow__pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
  font-weight:950; font-size:12px; user-select:none; white-space:nowrap;
}
.flow__dot{
  width:10px; height:10px; border-radius:999px;
  background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.16);
  animation:flowPulse 1.4s ease-in-out infinite;
}
@keyframes flowPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} }
.flow__sub{ margin-top:8px; color:rgba(255,255,255,.72); font-weight:850; font-size:12.4px; line-height:1.45; }

.flow__stage{ padding:0 14px 10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flow__step{
  width:100%; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:18px; padding:10px;
  display:flex; gap:10px; align-items:center;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:0 12px 34px rgba(2,6,23,.22);
}
.flow__step:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.22); }
.flow__step.is-active{
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.9));
  border-color:rgba(255,255,255,.22);
}
.flow__ico{
  width:36px; height:36px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; flex:0 0 auto; font-size:16px;
}
.flow__k{ display:block; color:#fff; font-weight:1000; font-size:12.8px; letter-spacing:-.1px; }
.flow__d{ display:block; margin-top:2px; color:rgba(255,255,255,.70); font-weight:850; font-size:11.8px; line-height:1.25; }

.flow__progress{ padding:0 14px 12px; }
.flow__progress::before{
  content:""; display:block; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(2,6,23,.18);
}
.flow__bar{
  height:10px; border-radius:999px; margin-top:-10px; width:10%;
  background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(124,58,237,.9), rgba(6,182,212,.9));
  box-shadow:0 10px 26px rgba(37,99,235,.28);
  transition:width .6s cubic-bezier(.2,.9,.2,1);
}

.flow__card{
  margin:0 14px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 34px rgba(2,6,23,.25);
  overflow:hidden;
  padding:12px;
}
.flow__cardtop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.flow__tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:950; font-size:12px; white-space:nowrap;
}
.flow__case b{
  display:block; margin-top:8px;
  color:#fff; font-weight:1000; letter-spacing:-.2px;
  font-size:14.4px; line-height:1.2; overflow-wrap:anywhere;
}
#flowP{ display:block; margin-top:6px; color:rgba(255,255,255,.72); font-weight:850; font-size:12.2px; line-height:1.45; }

.flow__metric{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(2,6,23,.22);
  padding:10px;
  min-width:150px;
  text-align:right;
}
.flow__mK{ color:rgba(255,255,255,.70); font-weight:900; font-size:11.8px; }
.flow__mV{ margin-top:6px; color:#fff; font-weight:1000; font-size:14px; letter-spacing:-.2px; }
.flow__mS{ margin-top:4px; color:rgba(255,255,255,.66); font-weight:850; font-size:11.6px; white-space:nowrap; }

.flow__bullets{ margin-top:12px; display:grid; gap:8px; }
.flow__li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 10px; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.22);
}
.flow__liL{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.flow__b{
  width:28px; height:28px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:#fff; flex:0 0 auto; font-size:12px;
}
.flow__t b{ display:block; color:#fff; font-weight:950; font-size:12.8px; line-height:1.25; overflow-wrap:anywhere; }
.flow__t span{ display:block; margin-top:2px; color:rgba(255,255,255,.66); font-weight:850; font-size:11.8px; line-height:1.3; }
.flow__right{ color:rgba(255,255,255,.62); font-weight:900; font-size:11.5px; white-space:nowrap; flex:0 0 auto; }

.flow__controls{ margin-top:12px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.flow__btn{ width:auto; padding:10px 12px; font-size:13.6px; }

@media (max-width: 980px){ .flow__metric{ min-width:140px; } }
@media (max-width: 620px){
  .hero__media{ min-height:320px; }
  .flow__metric{ display:none; }
  .flow__controls{ justify-content:stretch; }
  .flow__btn{ width:100%; }
}

/* === SEO PAGES v16 === */
.hero-lite{
  margin-top: 14px;
  position:relative;
  border-radius: 28px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
  isolation:isolate;
}
.hero-lite::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(900px 320px at 60% 120%, rgba(6,182,212,.10), transparent 60%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.hero-lite__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 22px;
  align-items:center;
}
.hero-lite h1{
  margin: 8px 0 10px;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 1000;
}
.hero-lite p{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15.2px;
  max-width: 64ch;
  font-weight: 650;
}
.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(15,23,42,.10);
  padding: 12px;
}
.stat b{
  display:block;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing:-.4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat span{
  display:block;
  margin-top: 4px;
  color:#475569;
  font-weight: 900;
  font-size: 12.8px;
  line-height: 1.3;
}
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kpi{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  padding: 16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.kpi::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(380px 180px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(380px 180px at 88% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.kpi > *{ position:relative; z-index:1; }
.kpi h3{ margin:0 0 8px; font-size: 16px; font-weight: 1000; letter-spacing:-.2px; }
.kpi p{ margin:0; color:var(--muted); font-weight:700; line-height:1.7; font-size:14.2px; }

.steps{ display:grid; gap: 10px; }
.step{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}
.step i{
  font-style:normal;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  flex:0 0 auto;
  font-weight: 1000;
}
.step b{ display:block; font-weight: 1000; letter-spacing:-.1px; }
.step span{ display:block; margin-top: 3px; color:#64748b; font-weight: 800; font-size: 12.8px; line-height:1.35; }

.cta-band{
  margin-top: 16px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.cta-band b{ font-size: 15px; font-weight: 1000; letter-spacing:-.2px; }
.cta-band p{ margin:0; color:#475569; font-weight:800; }

@media (max-width: 980px){
  .hero-lite__grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
}

/* Impact strip (replaces 0 counters) */
.impact{
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
  padding: 14px;
}
.impact__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-items:stretch;
}
.impact__card{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  padding: 12px 12px;
}
.impact__card--wide{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  gap: 4px;
  background:
    radial-gradient(520px 200px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(520px 200px at 85% 10%, rgba(124,58,237,.10), transparent 60%),
    rgba(255,255,255,.92);
}
.impact__k{
  color:#334155;
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.1px;
}
.impact__v{
  margin-top: 6px;
  font-weight: 1000;
  font-size: 18px;
  letter-spacing:-.2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.impact__s{
  margin-top: 2px;
  color:#64748b;
  font-weight: 750;
  font-size: 12px;
  line-height:1.5;
}
.impact__note{
  margin-top: 10px;
  color:#94a3b8;
  font-weight: 750;
  font-size: 12px;
  line-height:1.5;
}
@media (max-width: 980px){
  .impact__grid{ grid-template-columns: 1fr; }
}

/* === Optique right panel (v19c) === */
.optique-wow{
  position:relative;
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(15,23,42,.12);
  overflow:hidden;
  min-height: 520px;
}
.optique-wow__bg{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 320px at 15% 0%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 320px at 85% 15%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(700px 320px at 60% 120%, rgba(6,182,212,.10), transparent 65%);
  opacity:.95;
  pointer-events:none;
}
.optique-wow__card{ position:relative; z-index:1; padding: 16px; display:flex; flex-direction:column; gap:12px; }
.optique-wow__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px; border-radius:999px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#1d4ed8; font-weight: 1000; font-size: 12px;
  width: fit-content;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.optique-wow__card h3{ margin:0; font-size: 22px; font-weight: 1000; letter-spacing:-.4px; line-height:1.1; }
.optique-wow__grad{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.optique-wow__steps{ display:grid; gap:10px; margin-top: 4px; }
.optique-step{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px 12px; border-radius: 18px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.optique-step:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(15,23,42,.12); }
.optique-step__n{
  width:34px; height:34px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-weight: 1000; flex:0 0 auto;
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
}
.optique-step__t b{ display:block; font-weight: 1000; letter-spacing:-.1px; }
.optique-step__t span{ display:block; margin-top: 2px; color:#475569; font-weight: 750; font-size: 13px; line-height:1.45; }

.optique-wow__mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.optique-mini__kpi{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  padding: 10px;
  text-align:center;
}
.optique-mini__kpi .k{ display:block; font-size: 16px; font-weight: 1000; letter-spacing:-.2px; }
.optique-mini__kpi .l{ display:block; margin-top: 2px; color:#64748b; font-weight: 800; font-size: 12px; }

.optique-wow__cta{ display:flex; gap:10px; flex-wrap:wrap; }
.optique-wow__cta .btn{ flex: 1 1 180px; justify-content:center; }
.optique-wow__note{ margin: 0; color:#64748b; font-weight: 750; font-size: 12px; line-height:1.5; }

@media (max-width: 980px){
  .optique-wow{ min-height:auto; }
  .optique-wow__mini{ grid-template-columns: 1fr; }
}

/* === Footer SEO (v19c) === */
.site-footer{
  margin-top: 44px;
  border-top: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
}
.site-footer__inner{
  max-width:1120px;
  margin:0 auto;
  padding: 22px 16px;
  display:grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 16px;
}
.site-footer__brand{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.site-footer__logo{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
  font-weight:1000;
}
.site-footer__name{ font-weight: 1000; letter-spacing:-.2px; font-size: 16px; }
.site-footer__tag{ color:#475569; font-weight: 750; font-size: 13px; line-height:1.5; margin-top: 2px; }

.site-footer__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.site-footer__col{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  padding: 12px;
  display:grid;
  gap: 8px;
}
.site-footer__h{ font-weight:1000; font-size: 13px; }
.site-footer__col a{
  font-weight: 850;
  color:#0f172a;
  opacity:.9;
  padding: 6px 8px;
  border-radius: 12px;
  transition: background .18s ease, transform .18s ease;
}
.site-footer__col a:hover{
  background: rgba(37,99,235,.08);
  transform: translateY(-1px);
}
.site-footer__muted{ color:#64748b; font-weight: 750; font-size: 12px; padding: 6px 8px; }

@media (max-width: 980px){
  .site-footer__inner{ grid-template-columns: 1fr; }
  .site-footer__cols{ grid-template-columns: 1fr; }
}

/* === Single column hero-lite for content pages (v19d) === */
.hero-lite__grid--one{
  grid-template-columns: 1fr !important;
}
.optique-wow--wide{
  margin-top: 14px;
}

/* === Footer spacing fix (v19d) === */
.site-footer{margin-top: 22px;}



/* --- Optics teaser (Cosium) --- */
.optics-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  max-width: 1120px;
  margin: 0 auto;
  align-items:stretch;
}
.optics-card{
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.optics-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 320px at 90% 10%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(900px 320px at 60% 120%, rgba(6,182,212,.08), transparent 60%);
  pointer-events:none;
  opacity:.95;
  z-index:0;
}
.optics-card > *{ position:relative; z-index:1; }
.optics-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom: 12px;
}
.optics-kpis .kpi{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  padding: 12px 12px;
}
.optics-kpis .kpi b{
  display:block;
  font-size: 18px;
  font-weight:1000;
  letter-spacing:-.3px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom: 4px;
}
.optics-kpis .kpi span{
  color:#475569;
  font-weight:850;
  font-size:12.6px;
  line-height:1.35;
  display:block;
}
.optics-list{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap:9px;
}
.optics-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  font-size: 13.2px;
  font-weight: 850;
  color:#0f172a;
  line-height:1.35;
}
.optics-list .dot{
  width:10px; height:10px; border-radius:999px;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(37,99,235,.12);
  flex:0 0 auto;
}
.optics-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.optics-visual{
  border-radius: 26px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(2,6,23,.78), rgba(2,6,23,.55));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 320px;
  isolation:isolate;
}
.optics-visual::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 15% 10%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(520px 220px at 85% 20%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(520px 260px at 60% 120%, rgba(6,182,212,.18), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.optics-visual > *{ position:relative; z-index:1; }
.optics-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:950;
  width: fit-content;
  backdrop-filter: blur(10px);
}
.optics-steps{
  display:grid;
  gap:10px;
  margin-top: 12px;
}
.optics-steps .step{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:900;
  backdrop-filter: blur(10px);
}
.optics-steps .step b{
  width:30px; height:30px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-weight:1000;
}
.optics-steps .step span{
  font-size: 13.2px;
  line-height:1.25;
}

@media (max-width: 980px){
  .optics-grid{ grid-template-columns: 1fr; }
  .optics-visual{ min-height: 260px; }
}
@media (max-width: 620px){
  .optics-kpis{ grid-template-columns: 1fr; }
  .optics-actions .btn{ width:100%; justify-content:center; }
}