/* ===========================================================
   GESTION — feuille de style partagée
   =========================================================== */
:root {
  --ink: #11181c;
  --ink-soft: #3d474d;
  --muted: #687076;
  --line: #e7e9ea;
  --line-soft: #f1f2f3;
  --bg: #ffffff;
  --bg-tint: #f7f8f7;
  --brand: #1f5fd6;
  --brand-bright: #3b7bf0;
  --brand-wash: #e9f0fd;
  --accent: #e23b2e;
  --accent-wash: #fdecea;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(17,24,28,.04), 0 1px 3px rgba(17,24,28,.05);
  --shadow-md: 0 10px 30px -12px rgba(17,24,28,.18), 0 4px 8px -6px rgba(17,24,28,.08);
  --shadow-lg: 0 30px 60px -22px rgba(31,95,214,.22);
  --maxw: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--brand); display: inline-block; }
.section { padding: 100px 0; }
.section-tint { background: var(--bg-tint); border-block: 1px solid var(--line-soft); }
.lead { font-size: 19px; color: var(--ink-soft); line-height: 1.65; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent; transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(31,95,214,.2); }
.btn-primary:hover { background: #1542a8; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-white { background:#fff; color: var(--brand); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn svg { width: 17px; height: 17px; }

/* Nav */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
header.nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; font-family:'Inter'; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand);
  display: grid; place-items: center; color: #fff; font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; color: var(--ink-soft); font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .login { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .3s; }

/* Page hero (inner pages) */
.page-hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 60% at 80% -10%, rgba(59,123,240,.07), transparent 70%),
              radial-gradient(40% 50% at 0% 10%, rgba(226,59,46,.045), transparent 70%);
}
.page-hero h1 { font-size: clamp(36px, 4.6vw, 54px); max-width: 760px; }
.page-hero h1 em { font-style: italic; color: var(--brand); }
.page-hero .lead { margin-top: 20px; max-width: 620px; }
.crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; display:flex; gap:8px; align-items:center; }
.crumb a:hover { color: var(--brand); }
.crumb span { color: var(--line); }

/* Section header */
.sec-head { max-width: 680px; margin-bottom: 54px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
.sec-head p { margin-top: 18px; }

/* Generic card grid */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dfe2e3; }
.card .pic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-wash); display: grid; place-items: center; margin-bottom: 18px; }
.card .pic.warm { background: var(--accent-wash); }
.card .pic svg { width: 22px; height: 22px; color: var(--brand); }
.card .pic.warm svg { color: var(--accent); }
.card h3 { font-size: 20px; margin-bottom: 8px; font-family: 'Inter'; font-weight: 700; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: 15px; }

/* Feature split rows */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat + .feat { margin-top: 100px; }
.feat.rev .feat-text { order: 2; }
.feat-text h3 { font-size: clamp(26px, 3vw, 34px); }
.feat-text .lead { margin-top: 16px; }
.feat-points { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.feat-point { display: flex; gap: 13px; }
.feat-point .chk { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-wash); display: grid; place-items: center; margin-top: 2px; }
.feat-point .chk svg { width: 13px; height: 13px; color: var(--brand); }
.feat-point b { font-weight: 600; }
.feat-point span.t { display: block; color: var(--muted); font-size: 14.5px; }
.feat-visual {
  background: linear-gradient(160deg, #fff, var(--bg-tint));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); min-height: 300px;
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.v-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.v-tile .vt-top { display: flex; align-items: center; justify-content: space-between; }
.v-tile .vt-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.v-tile .vt-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tag-green { background: var(--brand-wash); color: var(--brand); }
.tag-orange { background: var(--accent-wash); color: var(--accent); }
.v-tile .vt-main { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.v-tile .vt-sub { font-size: 13px; color: var(--muted); }
.v-mini { display: flex; gap: 12px; }
.v-mini .v-tile { flex: 1; }

/* Stats band */
.stats { background: var(--brand); color: #fff; }
.stats .wrap { padding-block: 72px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; text-align: center; }
.stat .num { font-family: 'Fraunces', serif; font-size: clamp(34px,5vw,50px); font-weight: 500; letter-spacing: -.02em; }
.stat .lbl { font-size: 14.5px; color: rgba(255,255,255,.78); margin-top: 6px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.step .n { font-family: 'Fraunces', serif; font-size: 17px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--brand); color: var(--brand); display: grid; place-items: center; font-weight: 600; margin-bottom: 18px; }
.step h3 { font-family: 'Inter'; font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* Testimonial */
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 52px;
  max-width: 880px; margin: 0 auto; text-align: center; box-shadow: var(--shadow-md); position: relative;
}
.quote-card .mark { font-family: 'Fraunces', serif; font-size: 80px; line-height: .4; color: var(--brand-wash); position: absolute; top: 40px; left: 40px; }
.quote-card blockquote { font-family: 'Fraunces', serif; font-size: clamp(22px,2.8vw,30px); font-weight: 400; line-height: 1.4; margin: 0; color: var(--ink); }
.quote-card .who { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.quote-card .ava { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: 'Fraunces',serif; }
.quote-card .who-txt { text-align: left; }
.quote-card .who-txt b { display: block; font-size: 15px; }
.quote-card .who-txt span { font-size: 14px; color: var(--muted); }

/* Module detail (modules page) */
.mod-block { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); align-items: start; }
.mod-block:first-of-type { border-top: 0; }
.mod-aside .mtag { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--brand); text-transform: uppercase; }
.mod-aside h3 { font-size: 26px; margin: 8px 0 14px; }
.mod-aside .m-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-wash); display: grid; place-items: center; margin-bottom: 18px; }
.mod-aside .m-ico svg { width: 26px; height: 26px; color: var(--brand); }
.mod-aside .status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brand-bright); background: var(--brand-wash); padding: 5px 12px; border-radius: 999px; }
.mod-aside .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-bright); display:inline-block; }
.mod-body > p { font-size: 16.5px; color: var(--ink-soft); }
.mod-feats { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.mod-feats .mf { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink-soft); }
.mod-feats .mf svg { width: 18px; height: 18px; color: var(--brand-bright); flex: none; margin-top: 3px; }

/* Mini nav for modules categories */
.cat-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 8px; }
.cat-nav a { font-size: 13.5px; font-weight:600; color: var(--ink-soft); border:1px solid var(--line); padding:8px 14px; border-radius:999px; background:#fff; transition:.2s; }
.cat-nav a:hover { border-color: var(--brand); color: var(--brand); }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; display: flex; flex-direction: column; }
.plan.feature { border-color: var(--brand); box-shadow: var(--shadow-lg); position: relative; }
.plan.feature .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #3a2c05; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(245,179,1,.6); }
.plan .p-name { font-family: 'Inter'; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.plan .p-price { font-family: 'Fraunces',serif; font-size: 38px; font-weight: 500; margin: 16px 0 2px; letter-spacing: -.02em; }
.plan .p-price .cur { font-family:'Inter'; font-size: 18px; font-weight: 600; color: var(--ink-soft); }
.plan .p-period { font-size: 13.5px; color: var(--muted); }
.plan .p-desc { font-size: 14px; color: var(--muted); min-height: 44px; margin-top: 12px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.plan li svg { width: 18px; height: 18px; color: var(--brand-bright); flex: none; margin-top: 2px; }
.plan .btn { width: 100%; }

/* Comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family:'Inter'; font-weight: 700; font-size: 13px; }
.cmp thead th:not(:first-child) { text-align: center; }
.cmp td:not(:first-child) { text-align: center; }
.cmp tbody tr:hover { background: var(--bg-tint); }
.cmp .grp td { background: var(--bg-tint); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.cmp .yes { color: var(--brand-bright); }
.cmp .no { color: var(--line); }
.cmp svg { width: 18px; height: 18px; }
.cmp .colhi { color: var(--brand); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; color: var(--ink); font-family: 'Inter'; }
.qa .ic { flex: none; width: 22px; height: 22px; position: relative; }
.qa .ic::before, .qa .ic::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; }
.qa .ic::before { width: 14px; height: 2px; top: 10px; left: 4px; }
.qa .ic::after { width: 2px; height: 14px; top: 4px; left: 10px; transition: opacity .3s; }
.qa.open .ic::after { opacity: 0; }
.qa .ans { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.qa .ans p { padding-bottom: 22px; color: var(--muted); font-size: 15.5px; }

/* CTA banner */
.cta-band { background: var(--brand); color: #fff; border-radius: 24px; padding: 60px; text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(50% 120% at 100% 0%, rgba(255,255,255,.08), transparent 60%); }
.cta-band h2 { color: #fff; font-size: clamp(28px,3.4vw,40px); position: relative; }
.cta-band p { color: rgba(255,255,255,.82); margin: 16px auto 28px; max-width: 540px; font-size: 18px; position: relative; }
.cta-band .btn { position: relative; }

/* Accounting add-on band */
.acct-band { background: linear-gradient(135deg, #1f5fd6, #3b7bf0); color:#fff; border-radius:24px; padding:52px; display:grid; grid-template-columns:1.4fr .9fr; gap:48px; align-items:center; position:relative; overflow:hidden; box-shadow: var(--shadow-lg); }
.acct-band::after { content:""; position:absolute; inset:0; background: radial-gradient(45% 130% at 100% 0%, rgba(255,255,255,.10), transparent 60%); pointer-events:none; }
.acct-band .ab-left { position:relative; }
.acct-band .ab-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#c5d6fb; margin-bottom:14px; }
.acct-band .ab-eyebrow svg { width:16px; height:16px; }
.acct-band h2 { color:#fff; font-size: clamp(26px,3.2vw,38px); }
.acct-band p { color: rgba(255,255,255,.85); font-size:17px; margin-top:14px; max-width:520px; }
.acct-band .ab-points { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.acct-band .ab-points div { display:flex; gap:10px; align-items:center; font-size:14.5px; color:#eaf1fe; font-weight:500; }
.acct-band .ab-points svg { width:18px; height:18px; color:#ffd34d; flex:none; }
.acct-band .ab-right { position:relative; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:28px; text-align:center; backdrop-filter: blur(6px); }
.acct-band .ab-price { font-family:'Fraunces',serif; font-size:42px; font-weight:500; letter-spacing:-.02em; line-height:1; }
.acct-band .ab-price .cur { font-family:'Inter'; font-size:18px; font-weight:600; }
.acct-band .ab-per { font-size:13.5px; color:rgba(255,255,255,.75); margin-top:6px; }
.acct-band .ab-with { font-size:13px; color:#c5d6fb; font-weight:600; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); }
.acct-band .ab-right .btn { width:100%; margin-top:16px; }
@media (max-width:860px){ .acct-band { grid-template-columns:1fr; padding:36px 28px; gap:28px; } }

/* Demo form */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.demo-left h2 { font-size: clamp(30px,3.6vw,42px); }
.demo-left .lead { margin-top: 18px; }
.demo-bullets { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.demo-bullets div { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--ink-soft); font-weight: 500; }
.demo-bullets svg { width: 19px; height: 19px; color: var(--brand); flex: none; }
.contact-list { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.contact-list .ci { display:flex; gap:13px; align-items:center; }
.contact-list .ci .ico { width:42px; height:42px; border-radius:11px; background:var(--brand-wash); display:grid; place-items:center; flex:none; }
.contact-list .ci .ico svg { width:19px; height:19px; color:var(--brand); }
.contact-list .ci b { display:block; font-size:14px; }
.contact-list .ci span { font-size:14px; color:var(--muted); }
form.demo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); }
form.demo h3 { font-family: 'Inter'; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
form.demo .fsub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.demo .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; }
.form-ok { display: none; text-align: center; padding: 30px 10px; }
.form-ok.show { display: block; }
.form-ok .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-wash); display: grid; place-items: center; margin: 0 auto 18px; }
.form-ok .tick svg { width: 28px; height: 28px; color: var(--brand); }
.form-ok h3 { font-family: 'Fraunces',serif; font-size: 24px; font-weight: 500; }
.form-ok p { color: var(--muted); margin-top: 8px; }

/* Footer */
footer.ft { background: #0b1020; color: #cbd2cd; padding: 64px 0 32px; }
.ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ft .logo { color: #fff; margin-bottom: 14px; }
.ft-brand p { font-size: 14px; color: #8b958d; max-width: 280px; }
.ft h5 { font-family: 'Inter'; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin: 0 0 16px; font-weight: 600; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ft a { font-size: 14.5px; color: #a4ada6; transition: color .2s; }
.ft a:hover { color: #fff; }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 26px; font-size: 13px; color: #717c74; flex-wrap: wrap; gap: 12px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .feat, .feat.rev .feat-text, .demo-grid, .mod-block { grid-template-columns: 1fr; }
  .feat.rev .feat-text { order: 0; }
  .feat-visual { order: -1; }
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .stats-grid, .price-grid { grid-template-columns: 1fr; }
  .price-grid { max-width: 440px; margin: 0 auto; }
  .nav-links { display: none; }
  .burger { display: block; }
  .section { padding: 68px 0; }
  .mod-block { gap: 24px; padding: 32px 0; }
  .cmp-scroll { overflow-x: auto; }
  .cta-band { padding: 44px 28px; }
}
@media (max-width: 560px) {
  .grid-3, .grid-2, .grid-4, .steps, .field-row, .mod-feats { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .quote-card { padding: 36px 24px; }
  .nav-cta .login { display: none; }
}


/* ===========================================================
   IMPECCABLE — couche d upgrade (tokens, gradients, motion,
   composants home). Surcharge le socle ci-dessus.
   =========================================================== */

:root {
  --ink: #0e1613;
  --ink-soft: #38433d;
  --muted: #5d6863;
  --line: #e4e8e5;
  --line-soft: #eef1ee;
  --bg: #ffffff;
  --bg-tint: #f5f7f4;
  --brand: #1f5fd6;
  --brand-deep: #1542a8;
  --brand-bright: #3b7bf0;
  --brand-wash: #e9f0fd;
  --brand-glow: rgba(59,123,240,.14);
  --accent: #e23b2e;
  --accent-bright: #f24b3d;
  --accent-wash: #fdecea;
  --gold: #f5b301; --gold-wash: #fff4d6;
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(14,22,19,.05), 0 1px 3px rgba(14,22,19,.06);
  --shadow-md: 0 14px 36px -16px rgba(14,22,19,.20), 0 4px 10px -6px rgba(14,22,19,.10);
  --shadow-lg: 0 40px 80px -28px rgba(10,58,35,.34), 0 12px 28px -18px rgba(10,58,35,.22);
  --maxw: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --z-nav: 50;
  --z-float: 5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; line-height: 1.08; letter-spacing: -.018em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2.5px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-tint { background: var(--bg-tint); border-block: 1px solid var(--line-soft); }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-soft); line-height: 1.62; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--brand); margin-bottom: 20px;
}
.kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--brand); display: inline-block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .2s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(31,95,214,.5); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(31,95,214,.5); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-white { background:#fff; color: var(--brand); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.3); }
.btn-white:hover svg { transform: translateX(4px); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* Nav */
header.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s;
}
header.nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(255,255,255,.85); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(145deg, var(--brand-bright), var(--brand-deep));
  display: grid; place-items: center; color: #fff; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600;
  box-shadow: 0 4px 10px -3px rgba(31,95,214,.5);
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; color: var(--ink-soft); font-weight: 500; transition: color .2s; position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--brand); border-radius:2px; transition: width .25s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .3s; border-radius: 2px; }

/* HERO */
.hero { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 100px); position: relative; overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(58% 50% at 82% -8%, var(--brand-glow), transparent 64%),
    radial-gradient(44% 46% at -6% 18%, rgba(226,59,46,.07), transparent 66%),
    linear-gradient(180deg, var(--bg-tint), #fff 62%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: radial-gradient(rgba(31,95,214,.07) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 70% 10%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 70% 10%, #000, transparent 75%);
}
.hero-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(36px,5vw,64px); align-items:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 11px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:24px;
}
.hero-badge .live { width:8px; height:8px; border-radius:50%; background:var(--brand-bright); position:relative; }
.hero-badge .live::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--brand-bright); opacity:.5; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0%{transform:scale(.6);opacity:.7} 70%,100%{transform:scale(1.7);opacity:0} }
.hero h1 { font-size: clamp(28px, 7vw, 64px); letter-spacing:-.03em; overflow-wrap: break-word; }
.hero h1 em { font-style: italic; color: var(--brand); position:relative; }
.hero h1 em::after { content:""; position:absolute; left:0; right:0; bottom:.08em; height:.16em; background:linear-gradient(90deg, var(--brand), var(--gold) 52%, var(--accent)); opacity:.85; border-radius:3px; z-index:-1; }
.hero p.lead { margin-top: 24px; max-width: 520px; }
.hero-actions { margin-top: 32px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-note { margin-top: 22px; font-size:14px; color: var(--muted); display:flex; align-items:flex-start; gap:9px; max-width:480px; }
.hero-note svg { width:17px; height:17px; color: var(--brand-bright); flex:none; margin-top:2px; }

/* Hero product mock */
.hero-mock-stage { position:relative; perspective:1600px; }
.mock { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow-lg); overflow:hidden; transform: rotateY(-5deg) rotateX(3deg) rotate(.4deg); transform-style:preserve-3d; }
.mock-bar { height:40px; background: var(--bg-tint); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:0 14px; }
.mock-bar i { width:11px; height:11px; border-radius:50%; background:#d6d9da; display:inline-block; }
.mock-bar i:nth-child(1){background:#f0b6ab} .mock-bar i:nth-child(2){background:#f5d6a0} .mock-bar i:nth-child(3){background:#bfe0c3}
.mock-bar .url { margin-left:12px; font-size:12px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:7px; padding:4px 14px; }
.mock-body { padding:18px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.mock-col { display:flex; flex-direction:column; gap:14px; }
.mock-kpi { border:1px solid var(--line); border-radius:13px; padding:15px 16px; background:#fff; }
.mock-kpi.hi { background: linear-gradient(155deg, var(--brand-wash), #fff); border-color:#d4e7da; }
.mock-kpi .k-label { font-size:12px; color:var(--muted); font-weight:600; }
.mock-kpi .k-val { font-size:25px; font-weight:700; letter-spacing:-.02em; margin-top:5px; color:var(--ink); font-variant-numeric: tabular-nums; }
.mock-kpi .k-trend { font-size:12px; font-weight:600; color:var(--brand-bright); margin-top:3px; }
.mock-chart { border:1px solid var(--line); border-radius:13px; padding:16px; background:#fff; }
.mock-chart .ct { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:12px; }
.bars { display:flex; align-items:flex-end; gap:8px; height:92px; }
.bars span { flex:1; background: var(--brand-wash); border-radius:5px 5px 0 0; position:relative; }
.bars span::after { content:""; position:absolute; inset:auto 0 0 0; height:0; background:linear-gradient(180deg,var(--brand-bright),var(--brand)); border-radius:5px 5px 0 0; transition: height 1s var(--ease-out-expo); }
.bars.grow span::after { height:var(--h); }
.bars span:last-child::after { background:linear-gradient(180deg,var(--accent-bright),var(--accent)); }
.mock-list { border:1px solid var(--line); border-radius:13px; padding:8px; background:#fff; }
.mock-row { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:9px; font-size:13px; }
.mock-row:nth-child(odd) { background: var(--line-soft); }
.mock-row .dot { width:8px; height:8px; border-radius:50%; background: var(--brand-bright); margin-right:8px; display:inline-block; }
.mock-row .name { color: var(--ink-soft); font-weight:500; }
.mock-row .amt { font-weight:600; font-variant-numeric: tabular-nums; }

.mock-float {
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md);
  padding:13px 15px; display:flex; align-items:center; gap:11px; z-index:var(--z-float);
}
.mock-float .mf-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.mock-float .mf-ico svg { width:17px; height:17px; }
.mock-float b { display:block; font-size:13px; font-weight:700; letter-spacing:-.01em; }
.mock-float span { font-size:11.5px; color:var(--muted); }
.float-ticket { left:-26px; bottom:38px; animation: floaty 6s ease-in-out infinite; }
.float-ticket .mf-ico { background:var(--brand-wash); color:var(--brand); }
.float-alert { right:-22px; top:46px; animation: floaty 6s ease-in-out .8s infinite; }
.float-alert .mf-ico { background:var(--accent-wash); color:var(--accent); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Trust strip */
.trust { padding:34px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg); }
.trust .tline { text-align:center; font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; }
.trust-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 14px; }
.tchip { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:14px; font-weight:600; color:var(--ink-soft); }
.tchip .gem { font-family:'Fraunces',serif; font-weight:600; color:var(--brand); }
.tchip i { width:6px; height:6px; border-radius:50%; background:var(--brand-bright); display:inline-block; }

/* Section heads */
.sec-head { max-width: 700px; margin-bottom: clamp(38px, 5vw, 58px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(29px, 3.8vw, 44px); }
.sec-head p { margin-top: 18px; }

/* PROBLEM — editorial split, merchant quotes (not identical cards) */
.problem-grid { display:grid; grid-template-columns: .82fr 1.18fr; gap:clamp(36px,5vw,72px); align-items:start; }
.problem-intro h2 { font-size: clamp(28px, 3.6vw, 42px); }
.problem-intro p { margin-top:18px; }
.problem-intro .pi-tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-wash); padding:6px 13px; border-radius:999px; margin-bottom:18px; }
.pains { display:flex; flex-direction:column; }
.pain { display:flex; gap:20px; padding:24px 0; border-top:1px solid var(--line); }
.pain:first-child { border-top:0; padding-top:0; }
.pain .pq { font-family:'Fraunces',serif; font-size:30px; line-height:1; color:var(--line); flex:none; width:30px; }
.pain .ptxt blockquote { margin:0; font-family:'Fraunces',serif; font-size:clamp(19px,2vw,23px); font-weight:500; color:var(--ink); line-height:1.3; letter-spacing:-.01em; }
.pain .ptxt p { margin-top:8px; font-size:15px; color:var(--muted); }

/* SOLUTION — automation loop (not identical cards) */
.loop-head { text-align:center; max-width:640px; margin:0 auto clamp(44px,5vw,64px); }
.loop {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0; position:relative;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:var(--shadow-sm);
}
.loop-node { padding:28px 24px; position:relative; }
.loop-node + .loop-node { border-left:1px solid var(--line); }
.loop-node .ln-ico { width:46px; height:46px; border-radius:13px; background:var(--brand-wash); display:grid; place-items:center; margin-bottom:16px; transition: transform .3s var(--ease); }
.loop-node .ln-ico svg { width:23px; height:23px; color:var(--brand); }
.loop-node:hover .ln-ico { transform: translateY(-3px) scale(1.05); }
.loop-node .ln-step { font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--brand-bright); text-transform:uppercase; }
.loop-node h3 { font-family:'Inter'; font-size:18px; font-weight:700; letter-spacing:-.01em; margin:4px 0 8px; }
.loop-node p { font-size:14px; color:var(--muted); line-height:1.5; }
.loop-node .arrow { position:absolute; right:-11px; top:46px; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; z-index:2; }
.loop-node .arrow svg { width:12px; height:12px; color:var(--brand); }
.loop-node:last-child .arrow { display: none; }
.loop-node:last-child .arrow svg { color:#fff; }
.loop-foot { text-align:center; margin-top:36px; }

/* MODULES bento (breaks identical-card grid) */
.bento { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap:16px; }
.bcell {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.bcell:hover { border-color:var(--brand-bright); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.bcell .b-ico { width:42px; height:42px; border-radius:11px; background:var(--brand-wash); display:grid; place-items:center; margin-bottom:16px; }
.bcell .b-ico svg { width:21px; height:21px; color:var(--brand); }
.bcell h4 { font-family:'Inter'; font-size:16px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }
.bcell p { font-size:13.5px; color:var(--muted); line-height:1.5; }
.bcell.wide { grid-column: span 2; }
.bcell.feature { grid-column: span 2; grid-row: span 1; background:linear-gradient(150deg, var(--brand-deep), var(--brand)); color:#fff; border-color:transparent; justify-content:space-between; }
.bcell.feature .b-ico { background:rgba(255,255,255,.14); }
.bcell.feature .b-ico svg { color:#fff; }
.bcell.feature h4 { font-size:20px; }
.bcell.feature p { color:rgba(255,255,255,.8); font-size:14.5px; }
.bcell.feature .chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.bcell.feature .chips span { font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.12); color:#eaf1fe; }
.bcell.accent .b-ico { background:var(--accent-wash); }
.bcell.accent .b-ico svg { color:var(--accent); }
.mods-foot { text-align:center; margin-top:34px; }
.link-more { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--brand); font-size:15px; }
.link-more svg { width:16px; height:16px; transition: transform .25s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

/* STATS drenched green */
.stats { background: linear-gradient(140deg, var(--brand-deep), var(--brand) 70%); color:#fff; position:relative; overflow:hidden; }
.stats::after { content:""; position:absolute; inset:0; background: radial-gradient(40% 90% at 100% 0%, rgba(255,255,255,.08), transparent 60%), radial-gradient(30% 70% at 0% 100%, rgba(226,59,46,.16), transparent 60%); pointer-events:none; }
.stats .wrap { padding-block: clamp(60px,8vw,84px); position:relative; }
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:clamp(20px,3vw,32px); }
.stat { text-align:left; }
.stat .num { font-family:'Fraunces',serif; font-size: clamp(34px,5vw,52px); font-weight:500; letter-spacing:-.02em; line-height:1; font-variant-numeric: tabular-nums; }
.stat .num .u { color:#ffd34d; }
.stat .lbl { font-size:14.5px; color: rgba(255,255,255,.8); margin-top:12px; line-height:1.45; max-width:220px; }
.stat + .stat { border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(20px,3vw,32px); }

/* STEPS — connected timeline */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,48px); position:relative; }
.steps::before { content:""; position:absolute; top:20px; left:8%; right:8%; height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); z-index:0; }
.step { position:relative; z-index:1; }
.step .n { font-family:'Fraunces',serif; font-size:18px; width:42px; height:42px; border-radius:50%; background:#fff; border:1.5px solid var(--brand); color:var(--brand); display:grid; place-items:center; font-weight:600; margin-bottom:20px; box-shadow:0 0 0 6px var(--bg); }
.section-tint .step .n { box-shadow:0 0 0 6px var(--bg-tint); }
.step h3 { font-family:'Inter'; font-size:19px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.step p { color:var(--muted); font-size:15px; }

/* Testimonial */
.quote-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(36px,5vw,60px); max-width:900px; margin:0 auto; text-align:center; box-shadow:var(--shadow-md); position:relative; }
.quote-card .mark { font-family:'Fraunces',serif; font-size:120px; line-height:.4; color:var(--brand-wash); position:absolute; top:50px; left:44px; user-select:none; }
.quote-card blockquote { font-family:'Fraunces',serif; font-size:clamp(21px,2.8vw,31px); font-weight:400; line-height:1.36; margin:0; color:var(--ink); position:relative; }
.quote-card .who { margin-top:32px; display:flex; align-items:center; justify-content:center; gap:14px; }
.quote-card .ava { width:50px; height:50px; border-radius:50%; background:linear-gradient(145deg,var(--brand-bright),var(--brand-deep)); color:#fff; display:grid; place-items:center; font-weight:700; font-family:'Fraunces',serif; box-shadow:var(--shadow-sm); }
.quote-card .who-txt { text-align:left; }
.quote-card .who-txt b { display:block; font-size:15px; }
.quote-card .who-txt span { font-size:14px; color:var(--muted); }

/* Pricing teaser */
.price-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:780px; margin:0 auto; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.pcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d4e7da; }
.pcard .p-name { color:var(--brand); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.pcard .p-price { font-family:'Fraunces',serif; font-size:36px; margin:12px 0 2px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pcard .p-price .cur { font-family:'Inter'; font-size:16px; color:var(--ink-soft); font-weight:600; }
.pcard p { color:var(--muted); font-size:14.5px; margin:10px 0 16px; }

/* Accounting band */
.acct-band { background:linear-gradient(135deg, var(--brand-deep), var(--brand-bright)); color:#fff; border-radius:var(--radius-lg); padding:clamp(34px,4vw,52px); display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(28px,4vw,48px); align-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); margin-top:56px; }
.acct-band::after { content:""; position:absolute; inset:0; background: radial-gradient(45% 130% at 100% 0%, rgba(255,255,255,.12), transparent 60%); pointer-events:none; }
.acct-band .ab-left { position:relative; }
.acct-band .ab-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.03em; color:#c5d6fb; margin-bottom:16px; }
.acct-band .ab-eyebrow svg { width:17px; height:17px; }
.acct-band h2 { color:#fff; font-size:clamp(25px,3.2vw,38px); }
.acct-band > .ab-left p { color:rgba(255,255,255,.86); font-size:16.5px; margin-top:14px; max-width:520px; }
.acct-band .ab-points { margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.acct-band .ab-points div { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:#eaf1fe; font-weight:500; }
.acct-band .ab-points svg { width:18px; height:18px; color:#ffd34d; flex:none; margin-top:2px; }
.acct-band .ab-right { position:relative; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:18px; padding:30px; text-align:center; }
.acct-band .ab-price { font-family:'Fraunces',serif; font-size:44px; font-weight:500; letter-spacing:-.02em; line-height:1; color:var(--gold); }
.acct-band .ab-price .cur { font-family:'Inter'; font-size:18px; font-weight:600; color:var(--gold); }
.acct-band .ab-per { font-size:13.5px; color:rgba(255,255,255,.78); margin-top:7px; }
.acct-band .ab-with { font-size:13px; color:#c5d6fb; font-weight:600; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); }
.acct-band .ab-right .btn { width:100%; margin-top:16px; }

/* Final CTA */
.cta-band { background:linear-gradient(145deg, var(--brand-deep), var(--brand) 75%); color:#fff; border-radius:var(--radius-lg); padding:clamp(44px,5vw,68px); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(45% 120% at 100% 0%, rgba(255,255,255,.1), transparent 60%), radial-gradient(35% 90% at 0% 100%, rgba(226,59,46,.18), transparent 60%); pointer-events:none; }
.cta-band h2 { color:#fff; font-size:clamp(28px,3.6vw,42px); position:relative; max-width:680px; margin:0 auto; }
.cta-band p { color:rgba(255,255,255,.85); margin:18px auto 30px; max-width:540px; font-size:18px; position:relative; }
.cta-band .btn { position:relative; }

/* Footer */
footer.ft { background:#0a110d; color:#cbd2cd; padding:clamp(48px,6vw,68px) 0 30px; }
.ft-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.ft .logo { color:#fff; margin-bottom:16px; }
.ft .logo .logo-mark { box-shadow:none; }
.ft-brand p { font-size:14px; color:#8b958d; max-width:290px; }
.ft h5 { font-family:'Inter'; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:#fff; margin:0 0 16px; font-weight:600; }
.ft ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.ft a { font-size:14.5px; color:#a4ada6; transition:color .2s; }
.ft a:hover { color:#fff; }
.ft-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:26px; font-size:13px; color:#717c74; flex-wrap:wrap; gap:12px; }

/* Reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }
.hero .reveal { transition-duration:.9s; }

@media (max-width:980px){
  .hero-grid, .problem-grid { grid-template-columns:1fr; }
  .hero .mock { transform:none; }
  .hero-mock-stage { margin-top:12px; }
  .float-ticket { left:0; bottom:-18px; }
  .float-alert { right:0; top:-18px; }
  .loop, .bento { grid-template-columns:1fr 1fr; }
  .loop-node + .loop-node { border-left:1px solid var(--line); }
  .loop-node:nth-child(3) { border-left:0; }
  .loop-node:nth-child(odd) { border-top:0; }
  .loop-node:nth-child(n+3) { border-top:1px solid var(--line); }
  .loop-node .arrow { display:none; }
  .bcell.feature, .bcell.wide { grid-column:span 2; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:28px 0; }
  .stat + .stat { border-left:0; padding-left:0; }
  .stat:nth-child(even) { border-left:1px solid rgba(255,255,255,.16); padding-left:28px; }
  .steps { grid-template-columns:1fr; }
  .steps::before { display:none; }
  .price-2 { grid-template-columns:1fr; max-width:440px; }
  .acct-band { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .burger { display:block; }
  .ft-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .mock-float { display:none; }
  .hero-mock-stage { margin-top:4px; }
  .nav-cta { display:none; }
  .nav-inner { height:62px; }
  .mock-body { grid-template-columns:1fr; padding:14px; gap:12px; }
  .mock-kpi .k-val { font-size:22px; }
  .hero h1 em::after { bottom:.04em; height:.12em; }
}
@media (max-width:560px){
  .loop, .bento, .stats-grid, .ft-grid { grid-template-columns:1fr; }
  .stat + .stat, .stat:nth-child(even) { border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.16); padding-top:24px; }
  .bcell.feature, .bcell.wide { grid-column:span 1; }
  .quote-card .mark { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
  .bars span::after { height:var(--h) !important; }
}


/* Eyebrow / kicker : label raffine, plus de tracking ALL-CAPS templated */
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--brand); margin-bottom:18px; }
.eyebrow::before { content:""; width:24px; height:2px; border-radius:2px; background:var(--brand); display:inline-block; }

/* ===========================================================
   IMPECCABLE — composants pages internes (rework profond)
   =========================================================== */

/* Sticky category nav (modules) */
.cat-sticky { position: sticky; top: 70px; z-index: 30; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-soft); }
.cat-sticky .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; }
.cat-sticky a { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); padding: 8px 15px; border-radius: 999px; background: #fff; transition: border-color .2s, color .2s, background .2s; }
.cat-sticky a:hover, .cat-sticky a.active { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }

/* Category section header with count */
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.cat-head h2 { font-size: clamp(26px, 3.2vw, 36px); }
.cat-head .cat-count { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cat-head .cat-count b { color: var(--brand); font-family: 'Fraunces', serif; font-size: 18px; }

/* Module card grid */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.mod-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d4e7da; }
.mod-card .mc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.mod-card .m-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--brand-wash); display: grid; place-items: center; margin: 0; }
.mod-card .m-ico svg { width: 24px; height: 24px; color: var(--brand); }
.mod-card .mtag { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--brand); text-transform: uppercase; }
.mod-card h3 { font-size: 21px; margin: 2px 0 10px; }
.mod-card > p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.mod-card .mc-feats { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; }
.mod-card .mc-feats .mf { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); }
.mod-card .mc-feats .mf svg { width: 16px; height: 16px; color: var(--brand-bright); flex: none; margin-top: 2.5px; }
.mod-card .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand-bright); background: var(--brand-wash); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.mod-card .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); display: inline-block; }

/* Differentiator list (solution) — 2-col numbered, not identical cards */
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.diff-item { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.diff-item .di-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-wash); display: grid; place-items: center; }
.diff-item .di-ico svg { width: 22px; height: 22px; color: var(--brand); }
.diff-item h3 { font-family: 'Inter'; font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.diff-item p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Demo left rail reassurance card */
.reassure { margin-top: 30px; background: linear-gradient(155deg, var(--brand-wash), #fff); border: 1px solid #d9ebe0; border-radius: var(--radius); padding: 22px 24px; }
.reassure .rh { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.reassure .rh svg { width: 20px; height: 20px; color: var(--brand); }
.reassure p { font-size: 14px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .diff-grid { grid-template-columns: 1fr; gap: 0; }
  .cat-sticky { top: 0; }
  .cat-sticky .wrap { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-sticky .wrap::-webkit-scrollbar { display: none; }
  .cat-sticky a { white-space: nowrap; flex: none; }
  .cat-head { gap: 8px; }
}

/* Domaine dans le pied de page */
.ft-site { margin-top: 14px; font-size: 14px; }
.ft-site a { color: #fff; font-weight: 600; letter-spacing: -.01em; }
.ft-site a:hover { color: var(--brand-bright); }

/* Message d'erreur formulaire démo */
.form-err { color: var(--accent); font-size: 13.5px; font-weight: 600; text-align: center; margin-top: 12px; }