:root {
  --bg:#f5f7f8;
  --surface:#fff;
  --surface-soft:#f9fbfb;
  --ink:#101719;
  --muted:#64737a;
  --line:#dce5e7;
  --line-strong:#b9c8cc;
  --teal:#0f9ead;
  --teal-dark:#08717d;
  --green:#69b84d;
  --black:#071012;
  --shadow:0 24px 70px rgba(16, 23, 25, .12);
  color:var(--ink);
  background:var(--bg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility
}
* {
  box-sizing:border-box
}
html {
  overflow-x:hidden;
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  overflow-x:hidden;
  width:100%
}
body:before {
  background:radial-gradient(circle at 14% 8%, rgba(15, 158, 173, .12), transparent 28%), radial-gradient(circle at 86% 18%, rgba(105, 184, 77, .1), transparent 24%);
  content:"";
  height:560px;
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  z-index:-1
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--teal-dark)
}
h1, h2, h3, p {
  margin:0
}
h1 {
  color:var(--black);
  font-size:74px;
  letter-spacing:0;
  line-height:.92
}
h2 {
  color:var(--black);
  font-size:52px;
  letter-spacing:0;
  line-height:1.02
}
h3 {
  color:var(--ink);
  font-size:18px;
  letter-spacing:0;
  line-height:1.25
}
p {
  color:var(--muted);
  line-height:1.65
}
.site-header {
  align-items:center;
  backdrop-filter:blur(18px);
  background:rgba(245, 247, 248, .88);
  border-bottom:1px solid rgba(220, 229, 231, .72);
  display:grid;
  gap:20px;
  grid-template-columns:auto 1fr auto;
  left:0;
  min-height:72px;
  padding:0 34px;
  position:sticky;
  right:0;
  top:0;
  z-index:20
}
.site-header > * {
  min-width:0
}
.brand, .main-nav, .header-actions, .hero-actions, .hero-indicators, .endpoint-row, .footer-inner, .footer-inner nav {
  align-items:center;
  display:flex
}
.brand {
  color:var(--black);
  font-weight:760;
  gap:10px
}
.brand-mark {
  align-items:center;
  background:var(--black);
  border-radius:6px;
  color:#fff;
  display:inline-flex;
  font-size:12px;
  height:34px;
  justify-content:center;
  width:34px
}
.main-nav {
  color:var(--muted);
  font-size:14px;
  gap:22px;
  justify-content:center
}
.header-actions {
  gap:10px;
  justify-content:flex-end;
  white-space:nowrap
}
.mobile-menu {
  display:none;
  position:relative
}
.mobile-menu summary {
  align-items:center;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:5px;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:720;
  justify-content:center;
  list-style:none;
  min-height:46px;
  padding:0 16px
}
.mobile-menu summary::-webkit-details-marker {
  display:none
}
.mobile-menu summary:after {
  content:"";
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  margin-left:8px
}
.mobile-menu[open] summary:after {
  transform:rotate(180deg)
}
.mobile-menu-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  display:grid;
  gap:4px;
  padding:12px;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(320px, calc(100vw - 32px));
  z-index:40
}
.mobile-menu-panel a {
  border-radius:6px;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  padding:11px 10px
}
.mobile-menu-panel a:hover {
  background:var(--surface-soft)
}
.mobile-menu-actions {
  border-top:1px solid var(--line);
  display:grid;
  gap:4px;
  margin-top:6px;
  padding-top:8px
}
.header-cta, .header-dashboard, .button {
  align-items:center;
  border-radius:5px;
  display:inline-flex;
  font-weight:720;
  justify-content:center;
  min-height:46px
}
.header-cta {
  background:var(--black);
  color:#fff;
  font-size:14px;
  padding:0 18px
}
.header-dashboard {
  background:rgba(255, 255, 255, .78);
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:14px;
  padding:0 16px
}
.section-shell {
  margin:0 auto;
  max-width:1180px;
  padding-left:24px;
  padding-right:24px;
  width:100%
}
.narrow {
  max-width:920px
}
.hero {
  display:grid;
  gap:64px;
  grid-template-columns:minmax(0, .95fr) minmax(520px, 1.05fr);
  min-height:calc(100vh - 72px);
  padding-bottom:72px;
  padding-top:92px
}
.hero-copy {
  align-self:center;
  display:grid;
  gap:24px;
  min-width:0
}
.eyebrow {
  color:var(--teal-dark);
  font-size:12px;
  font-weight:780;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase
}
.hero-subtitle {
  color:var(--ink);
  font-size:30px;
  font-weight:680;
  line-height:1.15;
  max-width:720px
}
.hero-text, .section-lead, .section-heading p, .final-panel p, .page-hero p, .article-lead {
  font-size:18px
}
.hero-actions {
  flex-wrap:wrap;
  gap:12px
}
.button {
  border:1px solid var(--line-strong);
  min-width:156px;
  padding:0 20px
}
.button-primary {
  background:var(--black);
  border-color:var(--black);
  color:#fff
}
.button-secondary {
  background:#fff;
  color:var(--ink)
}
.hero-indicators {
  flex-wrap:wrap;
  gap:10px;
  padding-top:8px
}
.hero-indicators span {
  background:rgba(255, 255, 255, .8);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  padding:8px 12px
}
.hero-indicators strong {
  color:var(--ink);
  margin-right:5px
}
.dashboard-frame {
  background:linear-gradient(145deg, #fff 0%, #eef5f6 100%);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.hero-dashboard {
  align-self:center;
  min-height:620px
}
.dashboard-topbar {
  align-items:center;
  background:#11191c;
  display:flex;
  gap:7px;
  height:42px;
  padding:0 16px
}
.dashboard-topbar span {
  background:#4a5a60;
  border-radius:50%;
  height:9px;
  width:9px
}
.dashboard-placeholder {
  align-items:center;
  background:linear-gradient(90deg, rgba(15, 158, 173, .1) 1px, transparent 1px), linear-gradient(0deg, rgba(15, 158, 173, .08) 1px, transparent 1px), #f8fbfb;
  background-size:34px 34px;
  border:1px dashed rgba(8, 113, 125, .45);
  color:var(--teal-dark);
  display:flex;
  font-size:36px;
  font-weight:760;
  justify-content:center;
  margin:18px;
  min-height:300px;
  text-align:center
}
.mock-grid {
  display:grid;
  gap:14px;
  grid-template-columns:1fr 1fr;
  padding:0 18px 18px
}
.mock-card, .mock-table, .feature-card, .signal-grid article, .agency-card, .content-card, .note-box, .toc, .comparison-table, .faq-list details {
  background:rgba(255, 255, 255, .9);
  border:1px solid var(--line);
  border-radius:8px
}
.mock-card {
  display:grid;
  gap:12px;
  padding:16px
}
.mock-card span, .mock-table span {
  color:var(--muted);
  font-size:12px
}
.mock-card strong {
  font-size:30px
}
.sparkline {
  border-radius:5px;
  height:58px
}
.sparkline-a {
  background:linear-gradient(135deg, rgba(15, 158, 173, .18), rgba(18, 103, 232, .22));
  clip-path:polygon(0 72%, 16% 58%, 31% 64%, 46% 34%, 61% 48%, 78% 21%, 100% 36%, 100% 100%, 0 100%)
}
.sparkline-b {
  background:linear-gradient(135deg, rgba(105, 184, 77, .22), rgba(15, 158, 173, .12));
  clip-path:polygon(0 45%, 17% 58%, 34% 41%, 48% 68%, 64% 38%, 83% 52%, 100% 31%, 100% 100%, 0 100%)
}
.mock-table {
  display:grid;
  grid-column:1/-1;
  overflow:hidden
}
.mock-table div {
  align-items:center;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding:13px 16px
}
.mock-table div:first-child {
  border-top:0
}
.problem-section, .features-section, .agency-section, .site-footer, .faq-strip {
  background:var(--surface)
}
.problem-section, .solution-section, .features-section, .prestashop-section, .agency-section, .final-cta, .content-section, .faq-strip {
  padding-bottom:96px;
  padding-top:96px
}
.split, .agency-layout {
  display:grid;
  gap:52px;
  grid-template-columns:minmax(0, .95fr) minmax(360px, 1.05fr)
}
.split h2, .agency-layout h2 {
  margin-top:14px
}
.split .section-lead, .agency-layout .section-lead {
  margin-top:20px
}
.problem-list {
  display:grid;
  gap:12px
}
.problem-list p {
  background:var(--bg);
  border-left:4px solid var(--teal);
  color:var(--ink);
  font-size:20px;
  font-weight:690;
  padding:18px 20px
}
.section-heading {
  display:grid;
  gap:16px;
  margin:0 auto 38px;
  max-width:830px;
  text-align:center
}
.signal-grid, .features-grid, .content-grid {
  display:grid;
  gap:16px
}
.signal-grid {
  grid-template-columns:repeat(4, 1fr)
}
.signal-grid article, .feature-card, .agency-card, .content-card, .note-box {
  padding:24px
}
.signal-grid span {
  color:var(--green);
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:20px
}
.signal-grid h3, .feature-card h3, .agency-card h3, .content-card h2 {
  margin-bottom:10px
}
.features-grid {
  grid-template-columns:repeat(5, 1fr)
}
.feature-card {
  min-height:214px
}
.feature-card:nth-child(1), .feature-card:nth-child(2) {
  grid-column:span 2
}
.prestashop-panel {
  background:var(--black);
  border-radius:8px;
  color:#fff;
  display:grid;
  gap:48px;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .85fr);
  padding:clamp(30px, 6vw, 64px)
}
.prestashop-panel h2 {
  color:#fff;
  margin-top:14px
}
.prestashop-panel p, .prestashop-panel li {
  color:#c9d3d6
}
.check-list {
  display:grid;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0
}
.check-list li {
  border-bottom:1px solid rgba(255, 255, 255, .14);
  padding-bottom:14px;
  padding-left:28px;
  position:relative
}
.check-list li:before {
  color:var(--green);
  content:"✓";
  font-weight:900;
  left:0;
  position:absolute
}
.agency-card {
  align-self:start;
  background:var(--black);
  color:#fff;
  padding:34px
}
.agency-card h3 {
  color:#fff
}
.agency-card p {
  color:#c9d3d6
}
.text-link {
  color:#91de7a;
  display:inline-block;
  font-weight:760;
  margin-top:24px
}
.page-hero {
  display:grid;
  gap:20px;
  padding-bottom:64px;
  padding-top:72px
}
.page-hero h1 {
  max-width:980px
}
.page-hero p {
  max-width:820px
}
.breadcrumbs {
  align-items:center;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  font-size:13px;
  gap:9px
}
.breadcrumbs a {
  color:var(--teal-dark)
}
.content-grid {
  grid-template-columns:repeat(3, 1fr)
}
.content-card {
  display:grid;
  gap:10px;
  min-height:210px
}
.content-card h2 {
  font-size:24px
}
.faq-list {
  display:grid;
  gap:12px
}
.faq-list details {
  padding:18px 20px
}
.faq-list summary {
  color:var(--black);
  cursor:pointer;
  font-weight:760;
  line-height:1.35
}
.faq-list p {
  margin-top:12px
}
.faq-large {
  gap:14px
}
.center-action {
  display:flex;
  justify-content:center;
  margin-top:28px
}
.article-page {
  padding-bottom:72px;
  padding-top:72px
}
.article-page>.eyebrow {
  margin-top:20px
}
.article-lead {
  margin-top:18px;
  max-width:850px
}
.article-layout {
  align-items:start;
  display:grid;
  gap:36px;
  grid-template-columns:260px minmax(0, 1fr);
  margin-top:42px
}
.toc {
  display:grid;
  gap:10px;
  padding:18px;
  position:sticky;
  top:92px
}
.toc strong {
  color:var(--black)
}
.toc a {
  color:var(--muted);
  font-size:14px
}
.article-content {
  display:grid;
  gap:30px;
  max-width:820px
}
.article-content h2 {
  font-size:32px;
  margin-bottom:10px
}
.article-content p a {
  color:var(--teal-dark);
  font-weight:720
}
.compact-article .article-content {
  margin-top:42px
}
.note-box {
  background:var(--surface-soft)
}
.comparison-table {
  overflow:hidden
}
.comparison-row {
  display:grid;
  grid-template-columns:180px 1fr 1fr
}
.comparison-row>span, .comparison-row>p {
  border-top:1px solid var(--line);
  padding:18px
}
.comparison-row:first-child>span {
  border-top:0
}
.comparison-row>span {
  color:var(--black);
  font-weight:760
}
.comparison-head {
  background:var(--black);
  color:#fff
}
.comparison-head span {
  border-top:0;
  color:#fff
}
.comparison-copy {
  margin-top:38px
}
.final-cta {
  padding-top:44px
}
.final-panel {
  background:linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 40%), var(--black);
  border-radius:8px;
  box-shadow:var(--shadow);
  color:#fff;
  display:grid;
  gap:24px;
  padding:clamp(34px, 7vw, 78px);
  text-align:center
}
.final-panel h2, .final-panel p {
  color:#fff
}
.final-panel p {
  color:#c9d3d6;
  margin:0 auto;
  max-width:780px
}
.final-panel .hero-actions {
  justify-content:center
}
.final-panel .button-secondary {
  background:transparent;
  border-color:rgba(255, 255, 255, .35);
  color:#fff
}
.endpoint-row {
  color:#aebec3;
  flex-wrap:wrap;
  font-size:13px;
  gap:12px;
  justify-content:center
}
.endpoint-row span {
  border:1px solid rgba(255, 255, 255, .16);
  border-radius:999px;
  padding:7px 11px
}
.site-footer {
  border-top:1px solid var(--line);
  padding:28px 0
}
.footer-inner {
  color:var(--muted);
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between
}
.footer-inner div {
  display:grid;
  gap:5px
}
.footer-inner strong {
  color:var(--black)
}
.footer-inner nav {
  flex-wrap:wrap;
  gap:14px
}
@media(max-width:1080px) {
  .site-header {
    grid-template-columns:auto 1fr auto
  }
  .main-nav {
    display:none
  }
  .mobile-menu {
    display:block!important;
    justify-self:end
  }
  .hero, .split, .agency-layout, .prestashop-panel {
    grid-template-columns:1fr
  }
  .hero {
    min-height:auto;
    padding-top:64px
  }
  .hero-dashboard {
    min-height:auto
  }
  .signal-grid, .content-grid {
    grid-template-columns:repeat(2, 1fr)
  }
  .features-grid {
    grid-template-columns:repeat(2, 1fr)
  }
  .feature-card, .feature-card:nth-child(1), .feature-card:nth-child(2) {
    grid-column:auto
  }
  .article-layout {
    grid-template-columns:1fr
  }
  .toc {
    position:static
  }
}
@media(min-width:1440px) {
  .hero {
    max-width:1440px
  }
  h1 {
    font-size:82px
  }
  h2 {
    font-size:60px
  }
}
@media(max-width:720px) {
  .site-header {
    gap:12px;
    min-height:66px;
    padding:0 16px
  }
  .brand span:last-child {
    display:none
  }
  .header-cta {
    display:none
  }
  .header-dashboard {
    font-size:13px;
    min-height:40px;
    padding:0 12px
  }
  .mobile-menu summary {
    font-size:13px;
    min-height:40px;
    padding:0 12px
  }
  .mobile-menu-panel {
    left:16px;
    max-height:calc(100vh - 84px);
    overflow:auto;
    position:fixed;
    right:16px;
    top:76px;
    width:auto
  }
  .section-shell {
    padding-left:18px;
    padding-right:18px
  }
  .hero {
    gap:30px;
    padding-bottom:52px;
    padding-top:44px
  }
  .hero-copy {
    gap:18px
  }
  h1 {
    font-size:46px;
    line-height:.98
  }
  h2 {
    font-size:34px
  }
  .page-hero h1, .article-page h1 {
    font-size:38px;
    line-height:1.04
  }
  .hero-subtitle {
    font-size:24px
  }
  .hero-text, .section-lead, .section-heading p, .final-panel p, .page-hero p, .article-lead {
    font-size:16px
  }
  .hero-actions, .button {
    width:100%
  }
  .button {
    min-width:0
  }
  .dashboard-placeholder {
    font-size:21px;
    min-height:220px
  }
  .mock-grid, .signal-grid, .features-grid, .content-grid {
    grid-template-columns:1fr
  }
  .mock-card, .mock-table {
    grid-column:auto
  }
  .problem-section, .solution-section, .features-section, .prestashop-section, .agency-section, .final-cta, .content-section, .faq-strip {
    padding-bottom:64px;
    padding-top:64px
  }
  .problem-list p {
    font-size:18px
  }
  .prestashop-panel {
    border-radius:0;
    margin-left:-18px;
    margin-right:-18px
  }
  .final-panel {
    border-radius:8px;
    margin-left:auto;
    margin-right:auto;
    padding:32px 18px;
    width:calc(100% - 36px)
  }
  .comparison-row {
    grid-template-columns:1fr;
    border-top:1px solid var(--line)
  }
  .comparison-head {
    display:none
  }
  .comparison-row>span, .comparison-row>p {
    border-top:0;
    padding:14px 16px
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column
  }
}