/* Steroid Codes — custom overrides */



@media only screen and (max-width: 600px) {
  .hero-h03-bg-wrap {
  
    margin-top: 40px;
  }
  h1  {
  padding: 10px;
  font-size: 40px;
}
  }

/* ---------- Hide Webflow badge ---------- */
.w-webflow-badge { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ---------- Remix icons ---------- */
[class^="ri-"], [class*=" ri-"] { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.li-icon { font-size: 1.5rem; color: currentColor; }
.icon-block .li-icon, .su-form-button .li-icon { font-size: 1.375rem; }
.social-link .li-icon { font-size: 1.25rem; }
.blog-tag-content .li-icon { font-size: 1rem; }

/* ---------- Remove glossy reflections / relief on buttons & icons ---------- */
.su-form-button,
.su-form-button.white,
.nav-log-in-button,
.submit-button,
.w-button,
.icon-block,
.social-link,
.blog-tag-content,
.logo-wrap,
.top-tag-wrap,
.hero-tag-wrap {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}
.su-form-button::before,
.su-form-button::after,
.nav-log-in-button::before,
.nav-log-in-button::after,
.icon-block::before,
.icon-block::after,
.social-link::before,
.social-link::after,
.w-button::before,
.w-button::after {
  display: none !important;
}

/* ---------- Fixed glassmorphism navbar ---------- */
.li-fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
.li-fixed-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}


html, body {
  max-width: 100%;
  overflow-x: hidden;
}


body { padding-top: 0; }

.login-link { display: inline-flex; align-items: center; gap: 8px; }
.login-link i { font-size: 1.125rem; }

/* ---------- Tech marquee ---------- */
.tech-marquee .logo-wrap.tech-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.85;
}
.tech-marquee .logo-wrap.tech-wrap i { font-size: 1.25rem; }

/* ---------- FAQ accordion ---------- */
.faq-accordion {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}
.faq-item { border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.faq-question-text { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.faq-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
  transition: transform 0.3s ease;
}
.faq-icon i { font-size: 1.25rem; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.faq-answer-inner { padding: 0 60px 28px 4px; opacity: 0.75; font-size: 1.0625rem; line-height: 1.7; }

/* ---------- Contact form ---------- */
.li-form-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: left;
}
.li-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.li-field { display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; }
.li-field > span { opacity: 0.7; }
.li-field-full { grid-column: 1 / -1; }
.li-field input,
.li-field select,
.li-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.li-field textarea { resize: vertical; min-height: 130px; }
.li-field input::placeholder, .li-field textarea::placeholder { color: currentColor; opacity: 0.4; }
.li-field input:focus, .li-field select:focus, .li-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
.li-field select option { color: #111; }
.li-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; opacity: 0.75; }
.li-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: #e3ff4f; }
.li-form-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.li-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #ffffff;
  color: #0b0b0b;
  font: inherit;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.li-submit:hover { opacity: 0.85; }
.li-form-note { display: inline-flex; align-items: center; gap: 8px; opacity: 0.6; font-size: 0.875rem; }
.li-form-success {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(227, 255, 79, 0.4);
  background: rgba(227, 255, 79, 0.08);
  font-size: 0.9375rem;
}

@media (max-width: 767px) {
  .li-form-grid { grid-template-columns: 1fr; }
  .li-form-wrap { padding: 24px; }
  .faq-question-text { font-size: 1.0625rem; }
  .faq-answer-inner { padding-right: 8px; }
}

/* tech pills keep their outline (marquee) */
.tech-marquee .logo-wrap.tech-wrap { border: 1px solid rgba(0, 0, 0, 0.12) !important; }
.black-bg-wrap .tech-marquee .logo-wrap.tech-wrap { border-color: rgba(255, 255, 255, 0.15) !important; }

/* social + newsletter icons */
.social-link { color: #fff; }
.social-link .li-icon { color: #fff; }
.li-news-submit { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.li-news-submit i { font-size: 1.25rem; color: #0b0b0b; }

/* Swiloweb – premium fullscreen mobile menu */
@media screen and (max-width: 991px) {
  .navbar .w-nav-menu.w--nav-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 2147483000 !important;
    overflow-y: auto !important;
    padding: 120px 28px 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b0b0b !important;
  }

  .navbar .w-nav-menu.w--nav-menu-open .nav-list {
    width: min(100%, 720px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar .w-nav-menu.w--nav-menu-open .nav-list-item {
    width: 100% !important;
    text-align: center !important;
  }

  .navbar .w-nav-menu.w--nav-menu-open .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 12px 10px !important;
    color: #fff !important;
    font-size: clamp(32px, 7.2vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .navbar .w-nav-menu.w--nav-menu-open .nav-link:hover {
    opacity: .62 !important;
    transform: translateX(4px) !important;
  }

  .navbar .w-nav-button.w--open {
    position: fixed !important;
    top: 22px !important;
    right: 22px !important;
    z-index: 2147483647 !important;
    width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0b0b0b !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.24) !important;
  }

  .navbar .w-nav-button.w--open .w-icon-nav-menu {
    position: relative !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .navbar .w-nav-button.w--open .w-icon-nav-menu::before,
  .navbar .w-nav-button.w--open .w-icon-nav-menu::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 32px !important;
    height: 3px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform-origin: center !important;
  }

  .navbar .w-nav-button.w--open .w-icon-nav-menu::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .navbar .w-nav-button.w--open .w-icon-nav-menu::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  html.swiloweb-menu-open,
  html.swiloweb-menu-open body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Swiloweb V4 – Webflow true fullscreen mobile menu */
@media screen and (max-width: 991px) {
  .navbar .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
  }

  .navbar [data-nav-menu-open] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 110px 28px 48px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b0b0b !important;
    box-sizing: border-box !important;
  }

  .navbar [data-nav-menu-open] .nav-list { width: min(100%,720px) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; margin:0 !important; padding:0 !important; }
  .navbar [data-nav-menu-open] .nav-list-item { width:100% !important; text-align:center !important; }
  .navbar [data-nav-menu-open] .nav-link { display:block !important; width:100% !important; padding:12px 10px !important; color:#fff !important; font-size:clamp(32px,7.2vw,58px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; text-align:center !important; }

  /* Two-line hamburger, deliberately longer than the original */
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu {
    position: relative !important;
    width: 42px !important;
    height: 28px !important;
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::before,
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    width:42px !important;
    height:3px !important;
    border-radius:999px !important;
    background:currentColor !important;
  }
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::before { top:6px !important; }
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::after { bottom:6px !important; }
}

/* =========================================================
   SWILOWEB V5 – PREMIUM TRUE FULLSCREEN MOBILE NAVIGATION
   Targets the real Webflow markup used by this project.
   ========================================================= */
@media screen and (max-width: 991px) {
  /* The Webflow overlay itself owns the entire viewport */
  .navbar .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-width: none !important;
    background:
      radial-gradient(circle at 92% 10%, rgba(214, 235, 120, .42), transparent 28%),
      radial-gradient(circle at 8% 92%, rgba(255, 216, 128, .28), transparent 34%),
      #f5f4ef !important;
    z-index: 2147483000 !important;
    overflow: hidden !important;
  }

  /* The actual Webflow-open nav: no floating white box */
  .navbar .w-nav-menu[data-nav-menu-open],
  .navbar [data-nav-menu-open] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 116px 28px 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Remove the original mobile card/list appearance */
  .navbar [data-nav-menu-open] .nav-list,
  .navbar .w-nav-menu[data-nav-menu-open] .nav-list {
    width: min(100%, 760px) !important;
    margin: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .navbar [data-nav-menu-open] .nav-list-item,
  .navbar .w-nav-menu[data-nav-menu-open] .nav-list-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(20, 24, 23, .14) !important;
    background: transparent !important;
  }

  .navbar [data-nav-menu-open] .nav-list-item:first-child {
    border-top: 1px solid rgba(20, 24, 23, .14) !important;
  }

  /* Real links in this template are nested inside .dropdown-toggle */
  .navbar [data-nav-menu-open] .dropdown-toggle,
  .navbar [data-nav-menu-open] .dropdown-toggle a {
    width: 100% !important;
    min-height: 76px !important;
    box-sizing: border-box !important;
  }

  .navbar [data-nav-menu-open] .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .navbar [data-nav-menu-open] .dropdown-toggle a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 12px !important;
    color: #151817 !important;
    font-size: clamp(2.1rem, 9vw, 4.9rem) !important;
    font-weight: 500 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform .25s ease, letter-spacing .25s ease, opacity .25s ease !important;
  }

  .navbar [data-nav-menu-open] .dropdown-toggle a:hover,
  .navbar [data-nav-menu-open] .dropdown-toggle a:focus {
    opacity: .72 !important;
    transform: scale(1.025) !important;
    letter-spacing: -.035em !important;
  }

  /* Close control: highly visible but cleaner than the previous oversized bubble */
  .navbar .w-nav-button.w--open {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    z-index: 2147483647 !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(20, 24, 23, .10) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.92) !important;
    color: #151817 !important;
    box-shadow: 0 14px 35px rgba(20,24,23,.12) !important;
    backdrop-filter: blur(14px) !important;
  }

  .navbar .w-nav-button.w--open .w-icon-nav-menu {
    width: 30px !important;
    height: 30px !important;
  }

  /* Closed hamburger: exactly two longer lines */
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu {
    width: 46px !important;
    height: 30px !important;
  }
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::before,
  .navbar .w-nav-button:not(.w--open) .w-icon-nav-menu::after {
    width: 46px !important;
    height: 3px !important;
  }

  /* Mobile nav appears as a deliberate full-screen layer */
  html.swiloweb-menu-open,
  html.swiloweb-menu-open body {
    overflow: hidden !important;
    background: #f5f4ef !important;
  }
}

@media screen and (max-width: 479px) {
  .navbar .w-nav-menu[data-nav-menu-open],
  .navbar [data-nav-menu-open] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .navbar [data-nav-menu-open] .dropdown-toggle a {
    min-height: 68px !important;
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }
}

/* =========================================================
   Steroid Codes v7 — additions (existing rules untouched)
   ========================================================= */

/* ---- Responsive root-cause fix: oversized marquee must never widen its parents ---- */
.container.full, .container.full > .content, .container.full .center-wrap, .logo-bg-wrap { min-width: 0; max-width: 100%; }
.logo-bg-wrap { overflow: hidden; }
.client-rating-bg-wrap > * { min-width: 0; }
img, video { max-width: 100%; }

/* ---- Slower, seamless marquee (same pills top & bottom) ---- */
.tech-marquee { gap: 0 !important; }
.tech-marquee .logo-bg-block { gap: 16px !important; padding-right: 16px; }
.tech-marquee .logo-wrap.tech-wrap { flex: none; }
.black-bg-wrap .tech-marquee .logo-wrap.tech-wrap { color: #fff; }
.w-nav-brand { width: 180px!important; }

/* ---- Rating-strip replacement (info instead of reviews) ---- */
.li-stat-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.li-stat-list li { display: flex; gap: 14px; align-items: flex-start; }
.li-stat-list i { font-size: 1.25rem; margin-top: 2px; }
.li-stat-list strong { display: block; font-weight: 600; letter-spacing: -0.01em; }
.li-stat-list span { opacity: .7; font-size: .9375rem; }
.client-review-photo { border-radius: 24px; overflow: hidden; }
.client-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-mini-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.li-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); font-size: .8125rem; white-space: nowrap; }
.black-bg-wrap .li-chip, .li-dark .li-chip { border-color: rgba(255,255,255,.2); }

/* ---- Generic blocks ---- */
.li-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.li-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.li-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.li-card { padding: 34px 24px; border: 1px solid #fff; border-radius: 24px; background: #f4f4f4; text-align: left; min-width: 0; }
.li-card .li-ico { width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.li-card .li-ico i { font-size: 1.375rem; }
.li-card h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.li-card p { margin: 0; opacity: .75; line-height: 1.6; }
.li-card.dark { background: #1a1a1a; border-color: #333; color: #fff; }
.li-card.dark .li-ico { background: #fff; color: #111; }
.li-card ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.li-card li { display: flex; gap: 8px; align-items: flex-start; opacity: .85; }
.li-card li i { margin-top: 3px; }
.li-media { border-radius: 24px; overflow: hidden; position: relative; background: #d9d9d9; min-height: 280px; }
.li-media > img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.li-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; width: 100%; }
.li-split.rev .li-media { order: 2; }
.li-split h2, .li-split h3 { margin: 0; }
.li-prose { display: grid; gap: 18px; text-align: left; }
.li-prose p { margin: 0; opacity: .8; line-height: 1.7; }
.li-left { text-align: left; }
.li-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.li-page-hero { padding-top: 168px; }
.li-crumb { display: inline-flex; gap: 8px; align-items: center; font-size: .875rem; opacity: .7; margin-bottom: 20px; }
.li-crumb a { color: inherit; text-decoration: none; }
.li-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.li-price-row b { font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1; }
.li-eyebrow { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* ---- Product widget (replaces unrelated template overlay) ---- */
.li-widget { background: #fff; color: #111; border-radius: 20px; padding: 18px 20px; box-shadow: 0 14px 40px rgba(0,0,0,.14); text-align: left; min-width: 190px; }
.li-widget small { display: block; opacity: .55; font-size: .8125rem; margin-bottom: 8px; }
.li-widget b { display: block; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; }
.li-widget span { display: block; margin-top: 8px; font-size: .875rem; opacity: .7; }
.li-widget i.bar { display: block; height: 6px; border-radius: 99px; background: #e5e5e5; margin-top: 12px; overflow: hidden; }
.li-widget i.bar::after { content: ""; display: block; height: 100%; width: 72%; background: #111; border-radius: 99px; }
.li-media .li-widget { position: absolute; left: 20px; bottom: 20px; z-index: 2; }
.li-ph { width: 100%; aspect-ratio: 11 / 12; object-fit: cover; display: block; border-radius: inherit; }

/* ---- Comparison table ---- */
.li-table-wrap { width: 100%; overflow-x: auto; border-radius: 24px; border: 1px solid #fff; background: #f4f4f4; -webkit-overflow-scrolling: touch; }
.li-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; font-size: .9688rem; }
.li-table th, .li-table td { padding: 18px 22px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.li-table thead th { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; background: #fff; }
.li-table tbody th { font-weight: 500; width: 34%; }
.li-table tr:last-child th, .li-table tr:last-child td { border-bottom: 0; }
.li-table .yes { color: #111; font-weight: 600; }
.li-table .no { opacity: .4; }
.li-table td.hl, .li-table th.hl { background: #111; color: #fff; border-bottom-color: rgba(255,255,255,.12); }

/* ---- Steps ---- */
.li-steps { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; width: 100%; }
.li-step { padding: 28px 24px; border-radius: 24px; background: #f4f4f4; border: 1px solid #fff; text-align: left; counter-increment: s; }
.li-step::before { content: "0" counter(s); display: block; font-size: .875rem; opacity: .5; margin-bottom: 24px; letter-spacing: .05em; }
.li-step h3 { margin: 0 0 8px; font-size: 1.1875rem; letter-spacing: -0.02em; }
.li-step p { margin: 0; opacity: .75; line-height: 1.6; font-size: .9688rem; }
.li-dark .li-step { background: #1a1a1a; border-color: #333; }

/* ---- Code block ---- */
.li-code { width: 100%; background: #111; color: #e8ffa0; border-radius: 20px; padding: 22px 24px; font: 500 .875rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; text-align: left; }

/* ---- Pricing mini ---- */
.li-pricing { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.li-price { padding: 34px 28px; border-radius: 24px; background: #f4f4f4; border: 1px solid #fff; text-align: left; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.li-price.dark { background: #111; color: #fff; }
.li-price h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.02em; }
.li-price .amount { font-size: 3rem; letter-spacing: -0.045em; line-height: 1; font-weight: 600; }
.li-price ul { margin: 6px 0 10px; padding: 0; list-style: none; display: grid; gap: 10px; }
.li-price li { display: flex; gap: 8px; align-items: flex-start; }
.li-price li i { margin-top: 3px; }
.li-price .muted { opacity: .65; font-size: .9375rem; }

/* ---- CTA band on inner pages ---- */
.li-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .li-grid, .li-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .li-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .li-split { grid-template-columns: 1fr; gap: 32px; }
  .li-split.rev .li-media { order: 0; }
  .li-page-hero { padding-top: 132px; }
  .client-rating-bg-wrap { flex-direction: column; }
  .client-rating-bg-wrap > * { max-width: 100% !important; width: 100% !important; }
  .client-review-photo { min-height: 260px; }
  .tabs-menu.w-tab-menu { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .li-grid, .li-grid.two, .li-grid.four, .li-steps, .li-pricing { grid-template-columns: 1fr; }
  .li-price .amount { font-size: 2.5rem; }
  .li-card { padding: 28px 20px; }
  .li-table th, .li-table td { padding: 14px 16px; }
  .li-media { min-height: 240px; }
  .li-widget { min-width: 0; padding: 14px 16px; }
  .li-widget b { font-size: 1.25rem; }
  .li-actions .su-form-button, .li-cta-actions .su-form-button { width: 100%; justify-content: center; }
  .pricing-tabs-wrap .pricing-tab-pane-bg-wrap { flex-direction: column; }
}
@media (max-width: 479px) {
  .container { margin-left: 20px; margin-right: 20px; }
  .li-page-hero { padding-top: 112px; }
  h2 { overflow-wrap: anywhere; }
  .footer-link-wrapper { flex-wrap: wrap; }
}

/* v7 — global guard: wide children (marquee, tables) can never stretch their parents */
.section, .black-bg-wrap, .container, .content, .center-wrap, .heading-block, .footer-wrapper { min-width: 0; }
.section { max-width: 100%; }
.li-table-wrap { max-width: 100%; }
.li-split .li-media { min-height: 420px; }
.li-stat-list span { font-weight: 400; }
@media (max-width: 767px) { .li-split .li-media { min-height: 260px; } }
.li-split.stretch { align-items: stretch; }
.li-split.stretch .li-media { min-height: 560px; height: 100%; }
@media (max-width: 991px) { .li-split.stretch .li-media { min-height: 320px; } }

/* Formulaires reliés au back-office */
.sc-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.8125rem;line-height:1.5;opacity:.75;cursor:pointer;text-align:left}
.sc-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:#c6f432}
.sc-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.li-checkbox a{color:inherit;text-decoration:underline}
.li-form-success.is-error{background:#fdecea;color:#8a1f17;border-color:#f3c7c2}
.li-submit[disabled],.submit-button[disabled]{opacity:.6;cursor:wait}

/* ---------- Sélecteur de langue : drapeaux ronds, rien d'autre ---------- */
.sc-lang { position: relative; flex: none; }
.sc-lang > summary { list-style: none; }
.sc-lang > summary::-webkit-details-marker { display: none; }
.sc-flag { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08); }
.sc-flag svg { display: block; width: 100%; height: 100%; }
.sc-lang-btn { display: block; padding: 4px; border-radius: 50%; cursor: pointer; line-height: 0;
  transition: transform .2s ease; }
.sc-lang-btn:hover { transform: scale(1.06); }
.sc-lang-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.sc-lang-menu { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 1200; display: flex; flex-direction: column;
  gap: 6px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid rgba(17, 17, 17, .08);
  transform: translateX(-50%); animation: scLangIn .16s ease-out; }
@keyframes scLangIn { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translateX(-50%); } }
.sc-lang-menu a { display: block; padding: 3px; border-radius: 50%; line-height: 0; transition: transform .15s ease; }
.sc-lang-menu a:hover { transform: scale(1.08); }
.sc-lang-menu a:focus-visible { outline: 2px solid #111; outline-offset: 1px; }

/* Pied de page (fond sombre) : le menu s'ouvre vers le haut */
.sc-lang-foot { margin-top: 16px; }
.sc-lang-foot .sc-flag { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sc-lang-foot .sc-lang-btn:focus-visible { outline-color: #fff; }
.sc-lang-foot .sc-lang-menu { top: auto; bottom: calc(100% + 6px); }

.menu-button-content .sc-lang { margin: 0; }
.nav-log-in-button { white-space: nowrap; }

/* Mobile : à côté du bouton menu */
.sc-lang-mob { display: none; margin-right: 8px; }
@media (max-width: 767px) { .sc-lang-mob { display: block; } }
/* Barre de navigation entre 992 et 1279 px : libellés plus longs en français + sélecteur de langue */
@media (min-width: 992px) and (max-width: 1279px) {
  .nav-list { grid-column-gap: 18px; column-gap: 18px; }
  .menu-button-content { grid-column-gap: 14px; column-gap: 14px; }
  .login-link span { display: none; }
  .nav-log-in-button { padding-left: 18px; padding-right: 18px; }
}

/* ════════ Navigation 1.11.2 : menu Produits, menu mobile complet ════════ */
.sc-nav .nav-list{align-items:center}
.sc-nav-a,.sc-dd-btn{color:inherit;font:inherit;background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;position:relative;white-space:nowrap}
.sc-nav-a::after,.sc-dd-btn::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.sc-nav-a:hover::after,.sc-nav-a[aria-current]::after,.sc-dd:hover .sc-dd-btn::after,.sc-dd.is-current .sc-dd-btn::after{transform:scaleX(1)}
.sc-dd-btn i{font-size:18px;transition:transform .3s ease}
.sc-dd{position:relative}
.sc-dd-panel{position:absolute;top:calc(100% + 14px);left:50%;width:640px;padding:12px;border-radius:24px;background:#fff;color:#111;
  border:1px solid rgba(17,17,17,.08);box-shadow:0 30px 60px -20px rgba(17,17,17,.25);opacity:0;visibility:hidden;
  transform:translate(-50%,8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:1100}
.sc-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sc-dd:hover .sc-dd-panel,.sc-dd.is-open .sc-dd-panel,.sc-dd:focus-within .sc-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sc-dd:hover .sc-dd-btn i,.sc-dd.is-open .sc-dd-btn i{transform:rotate(180deg)}
.sc-dd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.sc-dd-item{min-width:0}
.sc-dd-item,.sc-mnav-apps a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;color:#111;text-decoration:none;transition:background .2s ease}
.sc-dd-item:hover,.sc-dd-item[aria-current]{background:#f4f4f4}
.sc-dd-ico{width:42px;height:42px;border-radius:13px;background:#111;color:#c6f432;display:grid;place-items:center;flex:none;font-size:19px}
.sc-dd-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.sc-dd-txt b{font-weight:600;font-size:15px}
.sc-dd-txt small{font-size:12.5px;color:#666}
.sc-soon{margin-left:auto;flex:none;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:#f0f0f0;color:#555}
.sc-dd-all{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:14px 16px;border-radius:16px;background:#f4f4f4;color:#111;font-weight:600;font-size:14px;text-decoration:none}
.sc-dd-all:hover{background:#111;color:#fff}
.sc-m-user,.sc-burger{display:none}
@media (min-width:992px) and (max-width:1199px){ .sc-nav .nav-list-item:nth-child(5){display:none} }

@media (max-width:991px){
  .sc-desk{display:none!important}
  .sc-burger{display:inline-grid;place-items:center;align-content:center;gap:6px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(17,17,17,.12);background:#fff;cursor:pointer;margin-left:10px;padding:0}
  .sc-burger span{display:block;width:18px;height:1.8px;background:#111;border-radius:2px;transition:transform .35s ease}
  .sc-menu-open .sc-burger span:first-child{transform:translateY(3.9px) rotate(45deg)}
  .sc-menu-open .sc-burger span:last-child{transform:translateY(-3.9px) rotate(-45deg)}
  .sc-mnav{position:fixed;inset:0;z-index:999;background:#f4f4f4;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:96px 20px 28px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
  .sc-menu-open .sc-mnav{opacity:1;visibility:visible}
  .sc-menu-open,.sc-menu-open body{overflow:hidden!important}
  .sc-menu-open .li-fixed-nav{background:#f4f4f4!important}
  .sc-menu-open .li-fixed-nav:has(img.sc-logo-w){background:#000!important}
  .sc-mnav-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
  .sc-mnav-sec{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
  .sc-menu-open .sc-mnav-sec,.sc-menu-open .sc-mnav-foot{opacity:1;transform:none}
  .sc-menu-open .sc-mnav-sec:nth-child(2){transition-delay:.06s}
  .sc-menu-open .sc-mnav-sec:nth-child(3){transition-delay:.12s}
  .sc-mnav-t{margin:0 0 10px 4px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#777}
  .sc-mnav-apps{display:flex;flex-direction:column;gap:6px}
  .sc-mnav-apps a{background:#fff;border:1px solid rgba(17,17,17,.06)}
  .sc-mnav-apps a[aria-current]{border-color:#111}
  .sc-mnav-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sc-mnav-grid a{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(17,17,17,.06);color:#111;text-decoration:none;font-weight:600;font-size:15px;line-height:1.25}
  .sc-mnav-grid a i{font-size:22px;color:#111}
  .sc-mnav-grid a[aria-current]{background:#111;color:#fff}.sc-mnav-grid a[aria-current] i{color:#c6f432}
  .sc-mnav-acts{display:flex;flex-direction:column;gap:10px}
  .sc-mbtn{display:flex;align-items:center;gap:12px;height:58px;padding:0 22px;border-radius:999px;background:#fff;border:1px solid rgba(17,17,17,.12);color:#111;text-decoration:none;font-weight:600;font-size:16px}
  .sc-mbtn span{flex:1}.sc-mbtn i{font-size:20px}
  .sc-mbtn.dark{background:#111;border-color:#111;color:#fff}
  .sc-mbtn.lime{background:#c6f432;border-color:#c6f432;color:#111}
  .sc-mnav-foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6px;opacity:0;transition:opacity .5s .18s ease}
  .sc-mnav-mail{display:inline-flex;align-items:center;gap:8px;color:#111;font-weight:600;text-decoration:none}
  .sc-mlang{display:flex;gap:8px}
  .sc-mlang a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:#fff;border:1px solid rgba(17,17,17,.1);color:#111;text-decoration:none;font-size:14px;font-weight:600}
  .sc-mlang a[aria-current]{background:#111;color:#fff;border-color:#111}
  .sc-mlang .sc-flag{width:28px;height:28px}
  .sc-mnav-legal{display:flex;gap:16px;font-size:13px}
  .sc-mnav-legal a{color:#777;text-decoration:none}
}
@media (max-width:767px){
  .sc-m-user{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(17,17,17,.12);background:#fff;color:#111;font-size:20px;text-decoration:none}
  .sc-lang-mob{margin-right:6px}
}
@media (prefers-reduced-motion:reduce){ .sc-mnav,.sc-mnav-sec,.sc-dd-panel{transition:none!important} }
@media (min-width:992px){ .sc-mnav{display:none!important} }

/* Formes 3D à la place des fleurs (accueil et bandeau de contact) */
.hero-bg-wrap{background-image:url("https://cdn.prod.website-files.com/69428a895d85bef5c96797ab/697dbb0437611e7efc212385_Hero%20BG%20Image.avif")!important;background-position:50% 0!important;background-size:contain!important}
.sc-hero-shape{display:block;width:100%;height:auto;animation:scFloat 9s ease-in-out infinite alternate}
.hero-flowers-bg .sc-hero-shape{animation-delay:-4s}
@keyframes scFloat{from{transform:translateY(0) rotate(0)}to{transform:translateY(-18px) rotate(4deg)}}
.black-bg-wrap.cta{background-image:url(../images/sc-shape-1.webp),url(../images/sc-shape-2.webp)!important;background-size:340px,330px!important;background-position:-60px 18%,calc(100% + 50px) 0!important}
@media (max-width:767px){ .black-bg-wrap.cta{background-size:200px,190px!important;background-position:-70px 6%,calc(100% + 60px) 0!important} }
@media (prefers-reduced-motion:reduce){ .sc-hero-shape{animation:none} }
/* Pages légales (barre noire) : panneau Produits lisible, bouton Contact visible */
.li-fixed-nav .sc-dd-panel .sc-dd-item,.li-fixed-nav .sc-dd-panel .sc-dd-all,.li-fixed-nav .sc-dd-panel b{color:#111!important}
.li-fixed-nav .sc-dd-panel small{color:#666!important}
.li-fixed-nav .sc-dd-panel .sc-dd-ico{color:#c6f432!important}
.li-fixed-nav .sc-dd-panel .sc-dd-all:hover{color:#fff!important}
.li-fixed-nav:has(img.sc-logo-w) .nav-log-in-button{background:#fff!important;color:#111!important}
.li-fixed-nav .w-nav-brand img.sc-logo-w{filter:brightness(0) invert(1)!important}
.sc-menu-open .li-fixed-nav .w-nav-brand img.sc-logo-w{filter:brightness(0) invert(1)!important}

/* ════════ Typographie 1.11.3 : Poppins partout ════════ */
:root{--_colors---manrope:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body,button,input,select,textarea,.w-button,.w-input,.w-select{font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{font-weight:400}
h1,.heading-01{font-weight:600;letter-spacing:-2.5px}
h2,.heading-02{font-weight:600;letter-spacing:-1.5px}
h3,.heading-03{font-weight:600;letter-spacing:-.6px}
h4,h5,h6{font-weight:600;letter-spacing:-.2px}
strong,b{font-weight:600}
.nav-list,.sc-nav-a,.sc-dd-btn{font-weight:500}
.nav-log-in-button,.su-form-button,.button-text-01,.button-text-02,.w-button,.sc-mbtn,.sc-dd-all{font-weight:600}
.login-link{font-weight:600}
.sc-mnav-grid a{font-weight:500}
.sc-dd-txt b{font-weight:600}
@media (max-width:767px){ h1,.heading-01{letter-spacing:-1.5px} h2,.heading-02{letter-spacing:-1px} }
h1,.heading-01,h2,.heading-02{font-weight:500}
.login-link,.login-link span,.nav-log-in-button{white-space:nowrap}
.sc-nav .nav-list{grid-column-gap:26px;column-gap:26px}
.sc-nav-a,.sc-dd-btn{font-size:15px}
@media (min-width:992px) and (max-width:1339px){ .sc-nav .nav-list-item:nth-child(5){display:none} .sc-nav .nav-list{grid-column-gap:20px;column-gap:20px} }
@media (min-width:992px) and (max-width:1139px){ .sc-nav .nav-list-item:nth-child(4){display:none} .login-link span{display:none} }

/* ════════ Tailles de texte 1.11.4 : site plus compact ════════ */
body{font-size:16px;line-height:26px}
.body-01---18px-semi-bold,.bento-bg-block.h03.benefits{font-size:16px;line-height:26px}
.opacity-80.hero-h01{font-size:17px;line-height:28px}
h1,.heading-01{font-size:52px;line-height:60px;letter-spacing:-2px}
h2,.heading-02{font-size:44px;line-height:52px;letter-spacing:-1.2px}
h3,.heading-03{font-size:34px;line-height:42px}
.sub-heading-01---40px{font-size:32px;line-height:40px}
.sub-heading-02---32px,.licences-link{font-size:26px;line-height:34px}
.sub-heading-03---24px,.faq-qus-wrap{font-size:20px;line-height:28px}
.sub-heading-04---20px,.about-service-number-list-wrap,.tabs-tag-wrap{font-size:18px;line-height:27px}
.pp-price{font-size:40px;line-height:48px}
.ps-price{font-size:44px;line-height:52px}
.faq-question-text{font-size:1.125rem}
.faq-answer-inner{font-size:1rem}
.li-card h3,.li-legal h3{font-size:1.125rem}
.li-step h3{font-size:1.0625rem}
.li-price h3{font-size:1.25rem}
.li-price .amount{font-size:2.5rem}
.li-price-row b{font-size:2.125rem}
.li-widget b{font-size:1.25rem}
@media screen and (max-width:991px){
  h1,.heading-01{font-size:46px;line-height:52px}
  h2,.heading-02{font-size:38px;line-height:46px}
  h3,.heading-03{font-size:30px;line-height:38px}
  .sub-heading-01---40px{font-size:30px;line-height:38px}
}
@media screen and (max-width:767px){
  h1,.heading-01{font-size:38px;line-height:44px;letter-spacing:-1.2px}
  h2,.heading-02{font-size:32px;line-height:40px;letter-spacing:-.8px}
  h3,.heading-03{font-size:26px;line-height:34px}
  .sub-heading-01---40px{font-size:26px;line-height:34px}
  .sub-heading-02---32px,.licences-link{font-size:22px;line-height:30px}
  .sub-heading-03---24px,.faq-qus-wrap{font-size:18px;line-height:26px}
  .opacity-80.hero-h01{font-size:16px;line-height:26px}
  .li-price .amount{font-size:2.125rem}
  .li-widget b{font-size:1.125rem}
  .faq-question-text{font-size:1rem}
}
@media screen and (max-width:479px){
  h1,.heading-01{font-size:34px;line-height:40px}
  h2,.heading-02{font-size:29px;line-height:36px}
}
h1,.heading-01,h2,.heading-02{text-wrap:balance}