/* Nestmarketing brand theme — white pages, blue-to-purple gradient hero/buttons (from the logo), Montserrat.
   Layout: centered section headings like the original site; alternating white / light-grey bands. */
:root {
  --blue: #2D9BEF;            /* logo wordmark */
  --purple: #6A1B9A;          /* hero gradient end */
  --pink: #FF1F7A;            /* paper plane */
  --grad: linear-gradient(120deg, #3AA8F5 0%, #4F6AD8 45%, #6A1B9A 100%);
  --grad-btn: linear-gradient(90deg, #2D9BEF 0%, #5B2DB5 100%);

  --bg: #FFFFFF;
  --surface: #F7F8FC;
  --surface-2: #EEF1F9;
  --line: #E3E7F1;
  --fg: #141833;
  --muted: #5A6279;
  --accent: #2B86E3;
  --accent-soft: rgba(45, 155, 239, 0.10);
  --on-accent: #FFFFFF;
  --ok: #109A63;
  --ok-soft: rgba(16, 154, 99, 0.10);
  --code-bg: #15183A;
  --code-fg: #E7E9F7;
  --code-key: #7CC4FF;
  --code-str: #FFB86B;
  --shadow: 0 20px 50px -24px rgba(58, 40, 140, 0.30);
  --shadow-sm: 0 6px 20px -10px rgba(58, 40, 140, 0.20);

  --wa: #1DA851;
  --wa-soft: rgba(37, 211, 102, 0.12);
  --on-wa: #FFFFFF;
  --chat-bg: #EFE7DD;
  --bubble-in: #FFFFFF;
  --bubble-out: #D9FDD3;
  --bubble-fg: #111B21;

  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r: 14px;
  --maxw: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--bg);
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--f-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
section { padding-block: clamp(64px, 9vw, 112px); }
.band { background: var(--surface); border-block: 1px solid var(--line); }

.eyebrow {
  font: 600 0.78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); margin-bottom: 18px;
}
.eyebrow--accent { color: var(--accent); }
.section-head { display: grid; gap: 14px; max-width: 660px; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 0; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; }
.section-head--wide { max-width: 780px; }
.tag {
  display: inline-block; font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 7px 10px; border-radius: 6px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.98rem/1 var(--f-body); padding: 15px 22px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn--ghost { color: var(--fg); border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 11px 16px; font-size: 0.9rem; }

/* Nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none !important; }
.brand__mark { display: flex; }
.brand__name { font: 700 1.2rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--fg); }
.brand__name b { color: var(--accent); font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a:not(.btn) { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.nav__links a:not(.btn):hover { color: var(--fg); text-decoration: none; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; width: 44px; height: 40px; padding: 10px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav__toggle span { display: block; height: 2px; background: var(--fg); border-radius: 2px; }

@media (max-width: 960px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px));
  }
  .nav__links:not(.is-open) { display: none; }
  .nav__links a:not(.btn) { padding: 12px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__cta { margin-top: 12px; }
}

/* Hero */
.hero { padding-block: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 104px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 340px at 85% 20%, var(--accent-soft), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%);
  opacity: .6;
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.hero__copy { min-width: 0; }
.hero h1 .hl { color: var(--accent); }
.lede { margin-top: 22px; font-size: 1.15rem; color: var(--muted); max-width: 56ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__proof { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.hero__proof li { display: grid; gap: 2px; }
.hero__proof strong { font: 700 1.6rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.hero__proof span { color: var(--muted); font-size: 0.88rem; }

.console {
  min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
}
.console__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.console__title { margin-left: 10px; font: 500 0.8rem/1 var(--f-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__body { padding: 20px; display: grid; gap: 14px; }
.console__label { font: 600 0.72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.checks { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.checks li {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.checks code { font: 600 0.82rem/1 var(--f-mono); color: var(--fg); }
.rec { font: 400 0.78rem/1.2 var(--f-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill { font: 600 0.7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-radius: 999px; }
.pill--ok { color: var(--ok); background: var(--ok-soft); }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pipe__stage {
  display: grid; gap: 4px; padding: 12px 10px; background: var(--surface-2); border-radius: 8px;
  font-size: 0.78rem; color: var(--muted);
}
.pipe__stage:first-child { border-radius: 10px 6px 6px 10px; }
.pipe__stage--won { background: var(--accent-soft); color: var(--accent); }
.pipe__n { font: 700 1.35rem/1 var(--f-display); color: var(--fg); font-variant-numeric: tabular-nums; }
.pipe__stage--won .pipe__n { color: var(--accent); }
.console__note { font-size: 0.74rem; color: var(--muted); }

/* Pillars */
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  display: grid; gap: 14px; align-content: start; padding: clamp(26px, 4vw, 40px); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-decoration: none !important;
  transition: border-color .2s ease, transform .2s ease;
}
.pillar:hover { border-color: var(--accent); transform: translateY(-2px); }
.pillar h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.pillar p { color: var(--muted); }
.pillar--alt { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 60%); }
.pillar__more { color: var(--accent); font-weight: 600; margin-top: 6px; }

/* Infrastructure split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.split__copy { display: grid; gap: 18px; min-width: 0; }
.split__copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; }
.split__copy .eyebrow { margin-bottom: 0; }
.split__copy .btn { justify-self: start; margin-top: 8px; }
.framework { margin: 10px 0 0; display: grid; gap: 0; }
.framework div { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.framework dt { font: 700 1.05rem/1.3 var(--f-display); }
.framework dd { margin: 0; color: var(--muted); }
.dns { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: sticky; top: 96px; }
.dns__head { padding: 14px 18px; font: 600 0.78rem/1 var(--f-mono); color: var(--muted); border-bottom: 1px solid var(--line); letter-spacing: .04em; }
.dns pre { margin: 0; padding: 18px; overflow-x: auto; font: 400 0.8rem/1.9 var(--f-mono); color: var(--fg); }
.dns .k { color: var(--code-key); font-weight: 600; }
.dns .s { color: var(--code-str); }
.impact { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.impact div { padding: 18px; display: grid; gap: 4px; }
.impact div + div { border-left: 1px solid var(--line); }
.impact strong { font: 800 1.6rem/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.impact span { font-size: 0.82rem; color: var(--muted); }

/* CRM */
.crm { position: relative; }
.flow {
  list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(7, 1fr);
  counter-reset: none; overflow-x: auto;
}
.flow li { position: relative; padding: 0 4px; }
.flow li span {
  display: block; text-align: center; font: 600 0.8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--fg); white-space: nowrap;
}
.flow li:not(:last-child)::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 2px; background: var(--accent); z-index: 1;
}
.flow li:nth-child(4) span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module {
  display: grid; gap: 10px; align-content: start; padding: 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s ease;
}
.module:hover { border-color: var(--accent); }
.module code { font: 600 0.7rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent); }
.module p { color: var(--muted); font-size: 0.94rem; }

.build {
  margin-top: 56px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 64px);
  padding: clamp(26px, 4vw, 44px); background: var(--surface-2); border-radius: 20px;
}
.build__intro { display: grid; gap: 14px; align-content: start; }
.build__intro h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.build__intro p { color: var(--muted); }
.build__intro .btn { justify-self: start; margin-top: 6px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 38px 1fr; gap: 4px 12px; }
.steps li::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2;
  font: 600 0.8rem/1 var(--f-mono); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
  height: 34px; display: grid; place-items: center;
}
.steps b { font-family: var(--f-display); font-size: 1.02rem; }
.steps span { color: var(--muted); font-size: 0.92rem; }

.industries { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.industries__label { font: 600 0.78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.industries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.industries li { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; }

/* Cases */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.case { display: grid; grid-template-rows: auto 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.case__top { padding: 28px; display: grid; gap: 12px; align-content: start; }
.case__top .tag { justify-self: start; }
.case__top h3 { font-size: 1.5rem; }
.case__top p { color: var(--muted); }
.case__list { list-style: none; margin: 0; padding: 22px 28px 28px; border-top: 1px dashed var(--line); display: grid; gap: 10px; align-content: start; }
.case__list li { position: relative; padding-left: 26px; font-size: 0.95rem; }
.case__list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* Why */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.why__grid > div { padding: 28px 28px 28px 0; display: grid; gap: 8px; align-content: start; border-bottom: 1px solid var(--line); }
.why__grid > div:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.why__grid p { color: var(--muted); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 26px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
}
.service p { color: var(--muted); font-size: 0.94rem; }
.service ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; align-content: start; font-size: 0.92rem; }
.service li { padding-left: 22px; position: relative; }
.service li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.service .btn { justify-self: start; }
.service--feature { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--bg) 55%); }
.badge { position: absolute; top: 18px; right: 18px; font: 600 0.68rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; background: var(--accent); color: var(--on-accent); padding: 6px 8px; border-radius: 6px; }

/* CTA */
.cta { padding-block: clamp(48px, 7vw, 80px); }
.cta__inner {
  display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center;
}
.cta__inner > div:first-child { display: grid; gap: 12px; min-width: 0; }
.cta__inner p { color: var(--muted); max-width: 60ch; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Testimonials */
.testis { padding-top: 0; }
.testis__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi { margin: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.testi__metric { font: 600 0.78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ok); }
.testi blockquote { margin: 0; font-size: 1rem; line-height: 1.65; }
.testi figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.testi figcaption span { color: var(--muted); font-size: 0.88rem; }

/* FAQ */
.faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq .section-head { margin-bottom: 0; }
.faq__list { display: grid; gap: 10px; min-width: 0; }
details { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
details[open] { border-color: var(--accent); }
summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 400 1.4rem/1 var(--f-mono); color: var(--accent); }
details[open] summary::after { content: "–"; }
details p { padding: 0 20px 20px; color: var(--muted); }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__info { display: grid; gap: 16px; min-width: 0; }
.contact__info .eyebrow { margin-bottom: 0; }
.contact__info > p { color: var(--muted); font-size: 1.06rem; }
.info { margin: 12px 0 0; display: grid; }
.info div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.info dt { font: 600 0.76rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.info dd { margin: 0; }
.sel { user-select: all; font-weight: 600; }
.form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; min-width: 0; }
.form h3 { font-size: 1.35rem; margin-bottom: 4px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--muted); min-width: 0; }
.form input, .form select, .form textarea {
  width: 100%; font: 400 1rem/1.4 var(--f-body); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form .is-invalid { border-color: #E5484D; }
.form .btn { justify-self: start; }
.form__status { font-size: 0.92rem; min-height: 1.4em; color: var(--muted); }
.form__status.ok { color: var(--ok); }
.form__status.err { color: #E5484D; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__inner { padding-block: 40px; display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 24px 40px; align-items: start; }
.footer__inner > div { display: grid; gap: 10px; }
.footer__inner > div p { color: var(--muted); font-size: 0.92rem; max-width: 40ch; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: flex-end; }
.footer nav a { color: var(--muted); font-size: 0.92rem; }
.footer__copy { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; padding-top: 20px; border-top: 1px solid var(--line); }

/* Responsive */
@media (max-width: 1080px) {
  .modules, .services, .wa-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(7, minmax(96px, 1fr)); padding-bottom: 6px; }
}
@media (max-width: 900px) {
  .hero__grid, .split, .build, .faq, .contact__grid, .cases, .pillars__grid, .cta__inner, .wa__top { grid-template-columns: 1fr; }
  .dns { position: static; }
  .why__grid, .testis__grid { grid-template-columns: 1fr 1fr; }
  .why__grid > div, .why__grid > div:not(:nth-child(3n+1)) { padding: 24px 20px 24px 0; border-left: 0; }
  .why__grid > div:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line); }
  .footer__inner { grid-template-columns: 1fr; }
  .footer nav { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .modules, .services, .why__grid, .testis__grid, .steps, .form__row, .wa-grid { grid-template-columns: 1fr; }
  .why__grid > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .impact { grid-template-columns: 1fr 1fr 1fr; }
  .impact div { padding: 14px 10px; }
  .impact strong { font-size: 1.25rem; }
  .pipe__n { font-size: 1.1rem; }
  .checks li { grid-template-columns: 52px 1fr auto; }
  .info div { grid-template-columns: 1fr; gap: 4px; }
  .hero__ctas .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Blog ---------- */
.blog-hero { padding-block: clamp(48px, 7vw, 88px) 32px; border-bottom: 1px solid var(--line); }
.blog-hero .wrap { display: grid; gap: 14px; }
.blog-hero .eyebrow { margin-bottom: 0; }
.blog-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 18ch; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-row .tag, .post-card__tags .tag { text-decoration: none; }
.tag-row .tag { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tag-row .tag:hover, .tag-row .tag.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.blog-list { padding-block: 48px clamp(64px, 8vw, 96px); }
.blog-list--related { background: var(--surface); border-top: 1px solid var(--line); }
.blog-list--related h2 { margin-bottom: 28px; font-size: 1.6rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: grid; grid-template-rows: 1fr auto; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s ease, transform .2s ease; min-width: 0; }
.blog-list--related .post-card { background: var(--bg); }
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card__link { display: grid; gap: 10px; align-content: start; color: var(--fg); text-decoration: none !important; }
.post-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.post-card__meta { font: 500 0.76rem/1 var(--f-mono); color: var(--muted); letter-spacing: .03em; }
.post-card h3 { font-size: 1.2rem; }
.post-card p { color: var(--muted); font-size: 0.94rem; }
.post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; color: var(--muted); font-size: 0.9rem; }
.empty { color: var(--muted); }

.post__head { padding-block: clamp(40px, 6vw, 72px) 28px; display: grid; gap: 16px; max-width: 820px; }
.post__back { font-weight: 600; font-size: 0.92rem; }
.post__head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.post__meta { color: var(--muted); font-size: 0.92rem; }
.post__cover { width: 100%; max-width: 820px; display: block; margin: 0 auto 8px; border-radius: 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.prose { max-width: 720px; margin: 0 auto; padding-block: 20px 48px; font-size: 1.08rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-left: 0; padding: 14px 20px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; color: var(--muted); }
.prose code { font: 0.88em var(--f-mono); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; font-size: 0.85rem; line-height: 1.8; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--f-display); }
.prose img { border-radius: 12px; }
.post__cta { max-width: 820px; margin: 0 auto 72px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px; border: 1px solid var(--accent); border-radius: 18px; background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.post__cta > div { display: grid; gap: 8px; min-width: 0; }
.post__cta h2 { font-size: 1.35rem; }
.post__cta p { color: var(--muted); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid, .post__cta { grid-template-columns: 1fr; } }

/* ---------- WhatsApp ---------- */
.btn--wa { background: var(--wa); color: var(--on-wa); }
.btn--wa:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tag--wa { color: var(--wa); background: var(--wa-soft); }
.eyebrow--wa { color: var(--wa); }
.pillar--wa { background: linear-gradient(160deg, var(--wa-soft), var(--surface) 60%); }
.pillar--wa:hover { border-color: var(--wa); }
.pillar--wa .pillar__more { color: var(--wa); }
.badge--wa { background: var(--wa); color: var(--on-wa); }
.service--wa { border-color: color-mix(in srgb, var(--wa) 55%, var(--line)); background: linear-gradient(180deg, var(--wa-soft), var(--bg) 55%); }
.service--wa li::before { color: var(--wa); }

.wa { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.wa::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 400px at 90% 10%, var(--wa-soft), transparent 70%); }
.wa .wrap { position: relative; }
.wa__top { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.wa__copy { display: grid; gap: 18px; min-width: 0; }
.wa__copy .eyebrow { margin-bottom: 0; }
.wa__copy h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; }
.wa-hl { color: var(--wa); }
.wa__copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.wa__copy > p strong { color: var(--fg); }
.wa__bullets { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.wa__bullets li { position: relative; padding-left: 32px; color: var(--muted); }
.wa__bullets li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--wa); color: var(--on-wa); }
.wa__bullets strong { color: var(--fg); font-size: 1.04rem; }
.wa__copy .hero__ctas { margin-top: 8px; }

.phone { justify-self: center; width: 100%; max-width: 360px; border-radius: 32px; border: 8px solid var(--surface-2); background: var(--chat-bg); box-shadow: var(--shadow); overflow: hidden; }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.phone__bar div { display: grid; line-height: 1.25; }
.phone__bar b { font-size: .95rem; }
.phone__bar span:not(.phone__avatar) { font-size: .75rem; color: var(--wa); }
.phone__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 .9rem var(--f-display); }
.phone__chat { padding: 16px 12px; display: grid; gap: 10px; }
.bubble { max-width: 88%; padding: 8px 10px 6px; border-radius: 10px; color: var(--bubble-fg); font-size: .88rem; line-height: 1.45; display: grid; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.bubble--in { background: var(--bubble-in); justify-self: start; border-top-left-radius: 2px; }
.bubble--out { background: var(--bubble-out); justify-self: end; border-top-right-radius: 2px; }
.bubble__time { justify-self: end; font-size: .68rem; opacity: .65; }
.bubble__media { height: 110px; border-radius: 8px; display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, var(--wa), var(--accent)); color: #fff; font: 800 1.3rem/1.05 var(--f-display); letter-spacing: .04em; }
.bubble__btns { display: grid; gap: 1px; margin: 4px -10px -6px; border-top: 1px solid rgba(127,127,127,.25); }
.bubble__btns span { text-align: center; padding: 9px; font-weight: 600; font-size: .85rem; color: #34B7F1; }
.bubble__btns span + span { border-top: 1px solid rgba(127,127,127,.25); }
.phone__stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
.phone__stats div { padding: 12px 6px; display: grid; gap: 2px; text-align: center; }
.phone__stats b { font: 700 1rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.phone__stats div:last-child b { color: var(--wa); }
.phone__stats span { font-size: .7rem; color: var(--muted); }
.phone__note { background: var(--surface); text-align: center; font-size: .7rem; color: var(--muted); padding: 0 8px 12px; }

.wa__features { margin-top: clamp(56px, 7vw, 88px); }
.wa__features-title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 28px; }
.wa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wa-grid article { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: grid; gap: 8px; align-content: start; transition: border-color .2s ease; }
.wa-grid article:hover { border-color: var(--wa); }
.wa-grid h4 { margin: 0; font: 800 1.02rem/1.25 var(--f-display); letter-spacing: -.01em; padding-left: 14px; position: relative; }
.wa-grid h4::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 6px; border-radius: 50%; background: var(--wa); }
.wa-grid p { color: var(--muted); font-size: .9rem; }
.wa__note { margin-top: 24px; padding: 14px 18px; border-radius: 10px; background: var(--wa-soft); color: var(--fg); font-size: .92rem; max-width: 820px; }
@media (max-width: 620px) { .phone__stats b { font-size: .9rem; } }


/* ================= Brand theme layer ================= */
body { font-size: 1rem; }
h1, h2, h3 { letter-spacing: -0.01em; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
.grad-text { background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font: 700 0.8rem/1.2 var(--f-body); letter-spacing: 0.1em; color: var(--accent); }

/* centered section heads, like the original site */
.section-head { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p:not(.eyebrow) { max-width: 62ch; }
.faq .section-head { text-align: left; justify-items: start; margin-inline: 0; }
.section-sub { font-weight: 600; color: var(--fg) !important; }

/* buttons */
.btn { border-radius: 8px; font-weight: 600; }
.btn--primary { background: var(--grad-btn); color: #fff; box-shadow: 0 10px 24px -10px rgba(91, 45, 181, .55); }
.btn--ghost { background: #fff; }
.btn--light { color: #fff; border: 2px solid rgba(255,255,255,.9); background: transparent; }
.btn--light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* nav */
.nav { background: rgba(255,255,255,.96); border-bottom-color: var(--line); box-shadow: 0 2px 12px -8px rgba(20,24,51,.25); }
body::before { background: #fff; }
.nav__inner { height: 84px; }
.brand__logo { height: 62px; width: auto; display: block; }
.nav__links a:not(.btn) { color: var(--fg); }
.nav__links a:not(.btn):hover { color: var(--accent); }
@media (max-width: 960px) { .nav__links { top: 84px; background: #fff; } .brand__logo { height: 52px; } }
html { scroll-padding-top: 96px; }

/* hero: the original blue -> purple gradient band */
.hero { background: var(--grad); color: #fff; }
.hero::before {
  background: radial-gradient(420px 420px at 8% 0%, rgba(255,255,255,.14), transparent 70%);
  mask-image: none; -webkit-mask-image: none; opacity: 1;
}
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; color: #fff; }
.eyebrow--hero { font: 600 1.15rem/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: #fff; }
.hero .lede { color: rgba(255,255,255,.92); }
.hero .lede strong { color: #fff; }
.hero__proof strong { color: #fff; }
.hero__proof span { color: rgba(255,255,255,.82); }
.hero__proof { border-top: 1px solid rgba(255,255,255,.25); padding-top: 22px; }
.console { position: relative; border: 0; box-shadow: 0 30px 70px -20px rgba(30, 10, 80, .55); overflow: visible; background: transparent; }
.console::before, .console::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; }
.console::before { width: 90px; height: 90px; left: -26px; top: -26px; background: rgba(255,255,255,.35); }
.console::after { width: 130px; height: 130px; right: -36px; bottom: -36px; background: #A974F0; opacity: .85; }
.console__bar, .console__body { position: relative; z-index: 1; background: #fff; }
.console__bar { border-radius: 16px 16px 0 0; background: var(--surface); }
.console__body { border-radius: 0 0 16px 16px; }
.checks li { background: var(--surface); }
.pipe__stage--won { background: var(--grad-btn); color: #fff; }
.pipe__stage--won .pipe__n { color: #fff; }

/* bands & cards */
.band { background: var(--surface); }
.pillar, .module, .wa-grid article, .testi, .post-card, .form { box-shadow: var(--shadow-sm); background: #fff; }
.pillar--alt { background: linear-gradient(160deg, rgba(106,27,154,.07), #fff 60%); }
.pillar--wa { background: linear-gradient(160deg, var(--wa-soft), #fff 60%); }
.tag { border-radius: 999px; padding: 7px 12px; }
.impact strong { background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flow li:nth-child(4) span { background: var(--grad-btn); border-color: transparent; color: #fff; }
.flow li:not(:last-child)::after { background: var(--purple); }
.steps li::before { border-color: var(--purple); color: var(--purple); }
.build { background: linear-gradient(135deg, rgba(45,155,239,.08), rgba(106,27,154,.08)); }
.case { background: #fff; box-shadow: var(--shadow-sm); }
.service { background: #fff; box-shadow: var(--shadow-sm); }
.service--feature { border-color: var(--purple); background: linear-gradient(180deg, rgba(106,27,154,.07), #fff 55%); }
.service--feature li::before { color: var(--purple); }
.badge { background: var(--pink); color: #fff; }
.badge--wa { background: var(--wa); }

/* code panel stays dark for readability */
.dns { background: var(--code-bg); border-color: var(--code-bg); box-shadow: var(--shadow); }
.dns__head { color: #A9AFD6; border-color: rgba(255,255,255,.1); }
.dns pre { color: var(--code-fg); }
.impact { border-color: rgba(255,255,255,.1); background: #fff; }
.impact div + div { border-color: var(--line); }

/* CTA band in brand gradient */
.cta { background: var(--grad); color: #fff; }
.cta h2 { color: #fff; }
.cta__inner p { color: rgba(255,255,255,.9); }
.cta .btn--primary { background: #fff; color: var(--purple); box-shadow: none; }
.cta .btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.9); }
.testis { padding-top: clamp(64px, 9vw, 112px); }

/* WhatsApp section on white */
.wa::before { background: radial-gradient(700px 400px at 90% 10%, rgba(37,211,102,.10), transparent 70%); }
.phone { border-color: #1E2235; }
.phone__bar, .phone__stats, .phone__note { background: #fff; }
.phone__avatar { background: var(--grad-btn); }
.bubble__media { background: var(--grad); }
.bubble__btns span { color: #0A84C9; }

/* faq / contact / footer */
details { background: #fff; }
details[open] { border-color: var(--purple); }
summary::after { color: var(--purple); }
.form input, .form select, .form textarea { background: var(--surface); }
.footer { background: var(--surface); }
.footer__logo { height: 76px; width: auto; display: block; }

/* blog hero in brand gradient */
.blog-hero { background: var(--grad); color: #fff; border-bottom: 0; }
.blog-hero .eyebrow, .blog-hero h1 { color: #fff; }
.blog-hero .lede { color: rgba(255,255,255,.9); }
.blog-hero .lede a { color: #fff; text-decoration: underline; }
.tag-row .tag { color: #fff; border-color: rgba(255,255,255,.55); }
.tag-row .tag:hover, .tag-row .tag.is-active { background: #fff; color: var(--purple); border-color: #fff; }
.post__cta { border-color: var(--purple); background: linear-gradient(160deg, rgba(106,27,154,.07), #fff 70%); }
.prose blockquote { border-left-color: var(--purple); }
.pillar .tag, .module code { justify-self: start; }

/* ================= Professional header ================= */
.nav { box-shadow: none; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); transition: box-shadow .25s ease; }
.nav.is-scrolled { box-shadow: 0 8px 24px -14px rgba(20,24,51,.35); }
.topbar { background: var(--grad); color: #fff; font-size: .8rem; overflow: hidden; max-height: 40px; transition: max-height .25s ease, opacity .2s ease; }
.nav.is-scrolled .topbar { max-height: 0; opacity: 0; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.topbar__info { display: flex; gap: 26px; min-width: 0; }
.topbar__info span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: .95; }
.topbar svg { width: 15px; height: 15px; flex: none; }
.topbar__link { color: #fff; font-weight: 600; white-space: nowrap; }
.topbar__link:hover { color: #fff; text-decoration: underline; }

.nav__inner { height: 76px; transition: height .25s ease; }
.nav.is-scrolled .nav__inner { height: 66px; }
.brand { gap: 10px; }
.brand__mark { height: 46px; width: auto; display: block; transition: height .25s ease; }
.nav.is-scrolled .brand__mark { height: 40px; }
.brand__word { font: 800 1.38rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--blue); }
.brand__logo { display: none; }

.nav__links { gap: 4px; }
.nav__links > a:not(.btn), .dd__btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 8px;
  font: 600 .93rem/1 var(--f-body); color: var(--fg); background: none; border: 0; cursor: pointer;
}
.nav__links > a:not(.btn)::after, .dd__btn::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--grad-btn); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav__links > a:not(.btn):hover, .dd__btn:hover, .dd.is-open .dd__btn { color: var(--purple); text-decoration: none; }
.nav__links > a:not(.btn):hover::after, .dd__btn:hover::after, .dd.is-open .dd__btn::after { transform: scaleX(1); }
.dd__btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.dd.is-open .dd__btn svg { transform: rotate(180deg); }
.nav__cta { margin-left: 10px; padding: 12px 20px; }

.dd { position: relative; }
.dd__menu {
  position: absolute; top: calc(100% + 12px); left: -12px; width: 340px; padding: 8px; display: grid; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(30,20,90,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 961px) { .dd:hover .dd__menu { opacity: 1; visibility: visible; transform: none; } .dd:hover .dd__btn svg { transform: rotate(180deg); } }
.dd__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; color: var(--fg); text-decoration: none !important; }
.dd__item:hover { background: var(--surface); }
.dd__item b { display: block; font-size: .93rem; }
.dd__item small { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.dd__ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.dd__ic svg { width: 19px; height: 19px; }
.dd__ic--blue { background: var(--accent-soft); color: var(--accent); }
.dd__ic--green { background: var(--wa-soft); color: var(--wa); }
.dd__ic--purple { background: rgba(106,27,154,.10); color: var(--purple); }

html { scroll-padding-top: 90px; }

@media (max-width: 1100px) { .topbar__hours { display: none; } .nav__links > a:not(.btn), .dd__btn { padding: 10px 9px; } }
@media (max-width: 960px) {
  .nav__inner, .nav.is-scrolled .nav__inner { height: 66px; }
  .brand__mark { height: 40px; }
  .nav__links { top: 100%; gap: 0; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: 0 20px 30px -20px rgba(20,24,51,.4); }
  .nav__links > a:not(.btn), .dd__btn { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__links > a:not(.btn)::after, .dd__btn::after { display: none; }
  .dd__menu { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 8px; display: none; }
  .dd.is-open .dd__menu { display: grid; }
  .nav__cta { margin: 14px 0 0; }
}
@media (max-width: 620px) {
  .topbar__info span:nth-child(1) { display: none; }
  .brand__word { font-size: 1.2rem; }
}
.dd__menu { width: 370px; }
@media (max-width: 1100px) { .topbar__info .topbar__hours { display: none; } }
@media (max-width: 620px) { .topbar__info span:nth-child(1) { display: none; } .topbar__link { font-size: .78rem; } }

/* ================= Professional polish ================= */
/* hero trust row */
.hero__trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.95); }
.hero__trust li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: rgba(255,255,255,.22); }
.hero__proof { margin-top: 30px; }

/* integrations strip */
.logos { padding-block: 26px; border-bottom: 1px solid var(--line); background: #fff; }
.logos__inner { display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; justify-content: center; }
.logos p { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
.logos li { font: 800 1.02rem/1 var(--f-display); color: #9AA1B8; letter-spacing: -.01em; transition: color .2s ease; }
.logos li:hover { color: var(--purple); }

/* section rhythm & card polish */
section { padding-block: clamp(72px, 9vw, 120px); }
.section-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
.pillar, .module, .wa-grid article, .case, .service, .testi, .post-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pillar:hover, .module:hover, .wa-grid article:hover, .case:hover, .service:hover, .testi:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* testimonials */
.testi { padding: 30px; }
.testi__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stars { color: #F5A623; letter-spacing: 2px; font-size: 1rem; }
.testi__metric { font-family: var(--f-body); font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 6px 10px; border-radius: 999px; font-size: .7rem; }
.testi blockquote { font-size: 1.02rem; color: var(--fg); }
.testi figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--grad-btn); color: #fff; font: 700 .9rem var(--f-display); }
.who { display: grid; gap: 2px; }
.who span { color: var(--muted); font-size: .86rem; }

/* contact info */
.info div { grid-template-columns: 40px 120px 1fr; align-items: center; }
.info__ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.info__ic svg { width: 20px; height: 20px; }
@media (max-width: 620px) { .info div { grid-template-columns: 40px 1fr; } .info dd { grid-column: 2; } }

/* footer */
.footer { background: #12152F; color: #C9CDE3; border-top: 0; }
.footer__grid { padding-block: 64px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; }
.footer__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.footer__brand p { color: #A9AECB; font-size: .93rem; max-width: 36ch; }
.footer__logo { height: 80px; background: #fff; border-radius: 14px; padding: 8px 12px; box-sizing: content-box; }
.footer__col { display: grid; gap: 12px; align-content: start; font-size: .93rem; }
.footer__col h4 { margin: 0 0 4px; font: 700 .82rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.footer__col a { color: #C9CDE3; }
.footer__col a:hover { color: #fff; }
.footer__bar { border-top: 1px solid rgba(255,255,255,.08); }
.footer__bar-inner { padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: .86rem; color: #8F95B5; }
.footer__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bar a { color: #A9AECB; }
.footer__bar a:hover { color: #fff; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* floating WhatsApp button */
.wa-float {
  position: fixed; z-index: 40;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #25D366; color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none !important;
  box-shadow: 0 14px 30px -10px rgba(16, 120, 60, .6); transition: transform .2s ease;
}
.wa-float:hover { transform: translateY(-2px); color: #fff; }
.wa-float svg { width: 26px; height: 26px; }
@media (max-width: 620px) { .wa-float span { display: none; } .wa-float { padding: 13px; } }

/* legal pages */
.legal .prose h2 { font-size: 1.35rem; }
.footer nav.footer__col { display: grid; justify-content: start; gap: 12px; }
.footer__bar nav { justify-content: flex-start; }
.footer .footer__col a { color: #C9CDE3; }
.footer .footer__col a:hover { color: #fff; }
.footer .footer__bar a { color: #A9AECB; }
.footer__bar { padding-bottom: 72px; }

/* ================= Original logo, hero photo, industries ================= */
.brand__logo { display: block; height: 64px; width: auto; transition: height .25s ease; }
.nav.is-scrolled .brand__logo { height: 54px; }
@media (max-width: 960px) { .brand__logo, .nav.is-scrolled .brand__logo { height: 50px; } }

.hero__media { position: relative; min-width: 0; }
.hero__media::before, .hero__media::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; }
.hero__media::before { width: 110px; height: 110px; left: -34px; top: -34px; background: rgba(255,255,255,.3); }
.hero__media::after { width: 150px; height: 150px; right: -40px; bottom: -40px; background: #A974F0; opacity: .85; }
.hero__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 840 / 620; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(30,10,80,.55); }
.hero__badge { position: absolute; z-index: 2; background: #fff; color: var(--fg); border-radius: 12px; box-shadow: 0 16px 34px -12px rgba(30,10,80,.45); padding: 12px 16px; display: grid; gap: 2px; font-size: .8rem; }
.hero__badge b { font: 800 1.5rem/1 var(--f-display); background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__badge span { color: var(--muted); font-weight: 600; }
.hero__badge--a { left: -22px; bottom: 34px; }
.hero__badge--b { right: 18px; top: -18px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.hero__badge--b span:last-child { color: var(--fg); }
.dot-live { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
@media (max-width: 900px) {
  .hero__media { max-width: 560px; margin: 8px auto 0; width: 100%; }
  .hero__badge--a { left: 10px; bottom: 12px; }
  .hero__media::before { left: -16px; top: -16px; width: 70px; height: 70px; }
  .hero__media::after { right: -16px; bottom: -16px; width: 90px; height: 90px; }
}

.industries { display: block; margin-top: clamp(64px, 8vw, 96px); scroll-margin-top: 100px; }
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; color: var(--fg); text-decoration: none !important; }
.ind:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--purple) 40%, var(--line)); }
.ind > div { display: grid; gap: 6px; min-width: 0; }
.ind h3 { font-size: 1.02rem; line-height: 1.25; }
.ind__sub { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ind p:not(.ind__sub) { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ind__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(45,155,239,.14), rgba(106,27,154,.14)); color: var(--purple); }
.ind__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ind--cta { background: var(--grad); border-color: transparent; color: #fff; }
.ind--cta h3 { color: #fff; }
.ind--cta .ind__sub { color: rgba(255,255,255,.85); }
.ind--cta p:not(.ind__sub) { color: rgba(255,255,255,.9); }
.ind--cta .ind__ic { background: rgba(255,255,255,.2); color: #fff; }
.ind__go { font-weight: 700; font-size: .9rem; margin-top: 4px; }
@media (max-width: 1080px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ind-grid { grid-template-columns: 1fr; } }

.footer__logo { background: none; padding: 0; height: 88px; border-radius: 0; }

/* responsive fixes for sections declared after the main breakpoints */
.phone__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.phone__stats div { min-width: 0; }
.phone__stats span { overflow-wrap: anywhere; }
@media (max-width: 1080px) { .wa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .wa__top { grid-template-columns: 1fr; } .phone { max-width: 340px; } }
@media (max-width: 620px) {
  .wa-grid { grid-template-columns: 1fr; }
  .phone__stats b { font-size: .85rem; }
  .phone__stats span { font-size: .62rem; }
}

/* ================= Button system ================= */
.btn {
  min-height: 48px; padding: 0 22px; border-radius: 10px; gap: 10px;
  font: 600 .96rem/1 var(--f-body); letter-spacing: .005em; border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, background-position .4s ease;
}
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .9rem; }
.btn__ic { width: 18px; height: 18px; flex: none; }
.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: linear-gradient(90deg, #2D9BEF 0%, #5B2DB5 50%, #2D9BEF 100%); background-size: 200% 100%; color: #fff; filter: none; box-shadow: 0 10px 24px -12px rgba(91, 45, 181, .7); }
.btn--primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(91, 45, 181, .75); filter: none; }
.btn--white { background: #fff; color: var(--purple); box-shadow: 0 12px 28px -12px rgba(20, 10, 60, .55); }
.btn--white:hover { transform: translateY(-2px); color: #4B1475; box-shadow: 0 18px 34px -14px rgba(20, 10, 60, .6); }
.btn--light, .cta .btn--light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.85); }
.btn--light:hover { background: #fff; color: var(--purple); border-color: #fff; transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-2px); }
.btn--wa { color: #fff; box-shadow: 0 10px 24px -12px rgba(16, 120, 60, .7); }
.btn--wa:hover { transform: translateY(-2px); filter: brightness(1.05); }
.service .btn { justify-self: stretch; }
.nav__cta { min-height: 44px; }
.cta .btn--white { color: var(--purple); }
@media (max-width: 620px) { .hero__ctas .btn, .cta__btns .btn { flex: 1 1 100%; } }

/* ================= Hero slider ================= */
.hero-slider { position: relative; }
.hs__frame { position: relative; z-index: 1; aspect-ratio: 840 / 620; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(30,10,80,.55); container-type: inline-size; }
.hs__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease, visibility .7s; }
.hs__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.hero__media .hs__slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; }
.hs__slide .hero__badge--a { left: 16px; bottom: 16px; }
.hs__ctrl { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.hs__label { color: #fff; font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.hs__dots { display: flex; gap: 8px; }
.hs__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .25s ease, background .25s ease; }
.hs__dots button.is-active { width: 30px; background: #fff; }
.hs__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero__media::after { bottom: 10px; }

/* mock: WhatsApp slide */
.mock { position: absolute; inset: 0; font-size: clamp(8px, 2.3cqw, 14px); color: #111B21; }
.mock-wa { display: grid; grid-template-columns: 47% 1fr; gap: 5%; align-items: center; padding: 6% 6%; background: linear-gradient(135deg, #E7FAEE 0%, #EEF0FF 100%); }
.mw__phone { background: #EFE7DD; border: .55em solid #1E2235; border-radius: 1.8em; overflow: hidden; box-shadow: 0 1.5em 3em -1.5em rgba(20,20,60,.5); }
.mw__bar { display: flex; align-items: center; gap: .6em; padding: .7em .8em; background: #fff; }
.mw__bar b { display: block; font-size: .9em; }
.mw__bar small { display: block; font-size: .68em; color: #1DA851; }
.mw__av { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn); color: #fff; font-weight: 700; font-size: .85em; flex: none; }
.mw__chat { display: grid; gap: .6em; padding: .8em; }
.mw__b { background: #fff; border-radius: .7em; border-top-left-radius: .15em; padding: .5em; font-size: .78em; line-height: 1.4; display: grid; gap: .4em; justify-self: start; max-width: 95%; }
.mw__b--out { background: #D9FDD3; justify-self: end; border-radius: .7em; border-top-right-radius: .15em; padding: .45em .7em; }
.mw__img { height: 5.2em; border-radius: .45em; display: grid; place-items: center; text-align: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.15em; line-height: 1.05; }
.mw__btns { display: grid; margin: 0 -.5em -.5em; }
.mw__btns span { text-align: center; padding: .5em; border-top: 1px solid #E9EDEF; color: #0A84C9; font-weight: 600; }
.mw__cards { display: grid; gap: .9em; }
.mw__card { display: flex; align-items: center; gap: .8em; background: #fff; border-radius: .9em; padding: .9em 1em; box-shadow: 0 1em 2em -1.2em rgba(30,20,90,.45); }
.mw__card b { display: block; font-size: .86em; }
.mw__card small { display: block; font-size: .7em; color: var(--muted); margin-top: .15em; }
.mw__ok { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: #1DA851; color: #fff; font-weight: 800; flex: none; }
.mw__bot { font-size: 1.5em; }
.mw__stat { flex: 1; text-align: center; }
.mw__stat b { font-size: 1.15em; background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* mock: CRM / POS slide */
.mock-crm { display: grid; grid-template-rows: auto 1fr; background: #F4F6FB; }
.mc__top { display: flex; align-items: center; gap: .6em; padding: .75em 1em; background: #fff; border-bottom: 1px solid var(--line); }
.mc__logo { width: 1.9em; height: 1.9em; border-radius: .45em; display: grid; place-items: center; background: var(--grad-btn); color: #fff; font-weight: 800; font-size: .85em; }
.mc__top b { font-size: .95em; }
.mc__store { font-size: .74em; color: var(--muted); }
.mc__user { margin-left: auto; font-size: .7em; font-weight: 700; padding: .3em .8em; border-radius: 999px; background: rgba(106,27,154,.1); color: var(--purple); }
.mc__body { display: grid; grid-template-columns: 24% 1fr; min-height: 0; }
.mc__nav { list-style: none; margin: 0; padding: .8em .6em; background: #15183A; display: grid; gap: .25em; align-content: start; }
.mc__nav li { padding: .6em .75em; border-radius: .5em; color: #A9AFD6; font-size: .76em; font-weight: 600; }
.mc__nav li.on { background: var(--grad-btn); color: #fff; }
.mc__main { padding: 1em; display: grid; gap: .8em; align-content: start; min-width: 0; }
.mc__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mc__kpis div { background: #fff; border-radius: .7em; padding: .65em .75em; display: grid; gap: .15em; box-shadow: 0 .4em 1em -.7em rgba(30,20,90,.35); }
.mc__kpis small { font-size: .66em; color: var(--muted); font-weight: 600; }
.mc__kpis b { font-size: 1.2em; font-variant-numeric: tabular-nums; }
.mc__kpis em { font-style: normal; font-size: .62em; font-weight: 700; color: var(--ok); }
.mc__chart { height: 6.8em; background: #fff; border-radius: .7em; padding: .8em .9em .6em; display: flex; align-items: flex-end; gap: .55em; box-shadow: 0 .4em 1em -.7em rgba(30,20,90,.35); }
.mc__chart i { flex: 1; height: var(--h); border-radius: .3em .3em 0 0; background: var(--grad-btn); opacity: .9; }
.mc__tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: .7em; overflow: hidden; font-size: .7em; box-shadow: 0 .4em 1em -.7em rgba(30,20,90,.35); }
.mc__tbl td { padding: .65em .8em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mc__tbl tr:last-child td { border-bottom: 0; }
.mc__tbl td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.mc__tbl td:nth-child(3) { font-weight: 700; font-variant-numeric: tabular-nums; }
.mc__tbl td:nth-child(2) { white-space: normal; }
.pill-s { font-size: .9em; font-weight: 700; padding: .2em .6em; border-radius: 999px; }
.pill-s.ok { background: var(--ok-soft); color: var(--ok); }
.pill-s.warn { background: rgba(245,166,35,.15); color: #B7700C; }
.mc__note { position: absolute; right: 1em; bottom: .6em; font-size: .62em; color: var(--muted); margin: 0; }

/* ================= WhatsApp feature demo ================= */
.wa-demo { display: grid; gap: 18px; justify-items: center; min-width: 0; }
.wa-demo .phone { max-width: 360px; }
.phone__chat { position: relative; height: 410px; padding: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; padding: 16px 12px; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; }
.scene .bubble { max-width: 90%; }
.phone__cap { margin: 0; background: #fff; border-top: 1px solid var(--line); padding: 13px 14px; text-align: center; font-size: .84rem; font-weight: 700; color: var(--purple); min-height: 48px; }
.sys { justify-self: center; text-align: center; background: rgba(255,255,255,.92); color: #54656F; font-size: .72rem; padding: 5px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.sys.note { background: #FFF3C4; color: #6B5A10; }
.bubble.cat, .bubble.wflow { width: 90%; }
.cat__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #E9EDEF; }
.cat__row b { display: block; font-size: .84rem; }
.cat__row small { display: block; font-size: .74rem; color: #667781; }
.cat__img { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.cat__img.c1 { background: linear-gradient(135deg, #5B2D1A, #A0522D); }
.cat__img.c2 { background: linear-gradient(135deg, #E9B872, #C8873A); }
.cat__img.c3 { background: linear-gradient(135deg, #F2C14E, #D98E04); }
.fl__f { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #E3E7F1; border-radius: 8px; padding: 8px 10px; }
.fl__f small { color: #667781; font-size: .74rem; }
.fl__f span { font-weight: 700; font-size: .82rem; }
.fl__btn { margin-top: 4px; background: #1DA851; color: #fff; text-align: center; padding: 10px; border-radius: 8px; font-weight: 700; font-size: .85rem; }
.wtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; }
.wtab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--fg); font: 600 .8rem/1 var(--f-body); cursor: pointer; transition: all .2s ease; }
.wtab:hover { border-color: var(--wa); color: #12803D; }
.wtab.is-active { background: var(--wa); border-color: var(--wa); color: #fff; box-shadow: 0 8px 18px -10px rgba(16,120,60,.7); }
@media (max-width: 620px) { .phone__chat { height: 390px; } .wtab { font-size: .76rem; padding: 7px 11px; } }

@media (prefers-reduced-motion: reduce) { .hs__slide, .scene { transition: none; } }

.mc__chart i:nth-child(1) { height: 40%; } .mc__chart i:nth-child(2) { height: 55%; } .mc__chart i:nth-child(3) { height: 48%; }
.mc__chart i:nth-child(4) { height: 70%; } .mc__chart i:nth-child(5) { height: 62%; } .mc__chart i:nth-child(6) { height: 85%; } .mc__chart i:nth-child(7) { height: 94%; }
.mc__chart i { display: block; }
@media (max-width: 620px) {
  .hs__slide .hero__badge--a { left: 10px; bottom: 10px; padding: 8px 12px; }
  .hs__slide .hero__badge--a b { font-size: 1.15rem; }
  .hero__badge--b { right: 10px; top: -14px; font-size: .74rem; }
  .hs__label { font-size: .84rem; }
}

/* report bar widths (classes, CSP-safe) */
.fn__track .w-6 { width: 6%; }
.fn__track .w-11 { width: 11%; }
.fn__track .w-12 { width: 12%; }
.fn__track .w-16 { width: 16%; }
.fn__track .w-18 { width: 18%; }
.fn__track .w-23 { width: 23%; }
.fn__track .w-27 { width: 27%; }
.fn__track .w-29 { width: 29%; }
.fn__track .w-38 { width: 38%; }
.fn__track .w-49 { width: 49%; }
.fn__track .w-63 { width: 63%; }
.fn__track .w-88 { width: 88%; }
.fn__track .w-98 { width: 98%; }
.fn__track .w-100 { width: 100%; }

/* ================= Typography unification (WhatsApp section) ================= */
.wa__copy h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.wa__features-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; text-align: center; }
.wa-grid h4 { font: 700 1.05rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.wa-grid p, .module p, .ind p:not(.ind__sub) { font-size: .92rem; line-height: 1.6; }
.wa__bullets li { font-size: 1rem; line-height: 1.6; }
.wa__bullets strong { font-size: 1rem; font-weight: 700; }
.phone, .phone * { font-family: var(--f-body); }
.bubble { font-size: .86rem; }
.phone__bar b { font-weight: 700; }
.wtab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wtab { gap: 7px; font-weight: 600; }

/* ================= Slider arrows ================= */
.hs__nav { display: flex; align-items: center; gap: 10px; }
.hs__arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.45); transition: background .2s ease, color .2s ease; }
.hs__arrow:hover { background: #fff; color: var(--purple); }
.hs__arrow svg { width: 16px; height: 16px; }
.hs__dots { gap: 6px; }
.hs__dots button { width: 8px; height: 8px; }
.hs__dots button.is-active { width: 24px; }

/* ================= Report mockups ================= */
.rep { display: grid; grid-template-rows: auto 1fr; background: #F4F6FB; }
.rep__body { padding: 1em; display: grid; gap: .8em; align-content: start; min-height: 0; }
.rep__body--2 { grid-template-columns: 1.25fr 1fr; align-items: start; }
.rep__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: .8em; align-items: start; }
.rcard { background: #fff; border-radius: .7em; padding: .7em .8em; box-shadow: 0 .4em 1em -.7em rgba(30,20,90,.35); display: grid; gap: .35em; min-width: 0; }
.rcard__t { margin: 0 0 .2em; font-size: .72em; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: .06em; }
.rcard small { font-size: .66em; color: var(--muted); font-weight: 600; }
.rcard > b { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.rcard em { font-style: normal; font-size: .62em; font-weight: 700; color: var(--ok); }
.rcard em.warn { color: #B7700C; }
.rkpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.rkpis--1 { grid-template-columns: 1fr; }
.rkpis--3 { grid-template-columns: repeat(3, 1fr); }
.rkpis--4 { grid-template-columns: repeat(4, 1fr); }
.fn { display: grid; grid-template-columns: 5.4em 1fr 3.6em; align-items: center; gap: .5em; font-size: .7em; }
.fn span { color: var(--muted); font-weight: 600; }
.fn b { text-align: right; font-variant-numeric: tabular-nums; }
.fn__track { height: .75em; background: #EEF1F9; border-radius: 999px; overflow: hidden; }
.fn__track i { display: block; height: 100%; border-radius: 999px; background: var(--grad-btn); }
.fn__track i.g { background: linear-gradient(90deg, #25D366, #128C4A); }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45em; }
.stages div { background: #fff; border-radius: .6em; padding: .55em .6em; display: grid; gap: .1em; box-shadow: 0 .4em 1em -.7em rgba(30,20,90,.35); border-top: .22em solid #C9D3F0; }
.stages small { font-size: .62em; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stages b { font-size: 1.15em; }
.stages em { font-style: normal; font-size: .64em; font-weight: 700; color: var(--purple); }
.stages .won { border-top-color: #22C55E; }
.stages .won em { color: var(--ok); }
.lst { list-style: none; margin: 0; padding: 0; display: grid; }
.lst li { display: flex; justify-content: space-between; gap: .5em; font-size: .7em; padding: .45em 0; border-top: 1px solid var(--line); }
.lst li:first-child { border-top: 0; }
.lst b { color: #B7700C; }
.mc__tbl--flat { box-shadow: none; }
.ag { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--grad-btn); color: #fff; font-weight: 700; font-size: .85em; margin-right: .5em; vertical-align: middle; }

/* ================= Reports section ================= */
.rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rep-col { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); display: grid; gap: 18px; align-content: start; }
.rep-col__head { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rep-col__head h3 { font-size: 1.3rem; }
.rep-col__head p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.ind__ic--wa { background: var(--wa-soft); color: var(--wa); }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.rep-list li { position: relative; padding-left: 26px; display: grid; gap: 3px; }
.rep-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: var(--grad-btn); }
.rep-col--wa .rep-list li::before { background: var(--wa); }
.rep-list b { font-size: .95rem; }
.rep-list span { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.rep-foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: 14px; background: linear-gradient(135deg, rgba(45,155,239,.08), rgba(106,27,154,.08)); }
.rep-foot p { color: var(--muted); }
.rep-foot b { color: var(--fg); }
@media (max-width: 900px) { .rep-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rep-list { grid-template-columns: 1fr; } .rep-col { padding: 22px; } .hs__arrow { width: 30px; height: 30px; } }
.mock { font-size: clamp(8px, 2.75cqw, 15px); }
.mock-wa, .mock-crm { font-size: clamp(8px, 2.4cqw, 14px); }
.hs__slide .hero__badge--b { right: 14px; top: 14px; }
.rep__body { padding: 1.1em 1.1em 1.6em; gap: .9em; }

.fn__track .w-9 { width: 9%; }
.fn__track .w-18 { width: 18%; }
.fn__track .w-31 { width: 31%; }
.fn__track .w-42 { width: 42%; }
.fn__track .w-93 { width: 93%; }
.fn__track .w-94 { width: 94%; }
.fn__track .w-96 { width: 96%; }
.fn__track .w-97 { width: 97%; }
.fn__track .w-98 { width: 98%; }

/* ================= Cold email focus ================= */
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.lst b.ok { color: var(--ok); }
.lst b.warm { color: #B7700C; }
.infra-more { margin-top: clamp(64px, 8vw, 96px); }
.esteps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: es; }
.esteps li { counter-increment: es; position: relative; display: grid; gap: 8px; align-content: start; padding: 24px 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.esteps li::before { content: counter(es); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--f-display); color: #fff; background: var(--grad-btn); margin-bottom: 6px; }
.esteps li:not(:last-child)::after { content: ""; position: absolute; top: 42px; right: -17px; width: 18px; height: 2px; background: var(--purple); opacity: .35; }
.esteps b { font-size: 1rem; }
.esteps span { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.infra-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 20px; align-items: start; }
.toolkit { padding: 28px; border-radius: 18px; background: var(--code-bg); color: #E7E9F7; display: grid; gap: 18px; }
.toolkit h3 { color: #fff; font-size: 1.25rem; }
.toolkit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.toolkit li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.45; }
.toolkit li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; background: var(--grad-btn); color: #fff; }
.toolkit .btn { justify-self: start; margin-top: 4px; }
.fixes { display: grid; gap: 16px; }
.fixes h3 { font-size: 1.25rem; }
.fixes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fix { display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--fg); text-decoration: none !important; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.fix:hover { border-color: var(--purple); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.fix b { font-size: .98rem; }
.fix span { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.fix em { font-style: normal; font-weight: 700; font-size: .84rem; color: var(--purple); margin-top: 4px; }
.latest .post-grid { margin-top: 0; }
.latest__more { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 1080px) { .esteps { grid-template-columns: repeat(3, 1fr); } .esteps li::after { display: none; } .infra-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .esteps, .fixes__grid, .toolkit ul { grid-template-columns: 1fr; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--purple); }
.crumbs span:last-child { color: var(--fg); font-weight: 600; }

/* ================= Hero: product screens ================= */
.hero--app { padding-block: clamp(56px, 7vw, 88px) clamp(48px, 6vw, 72px); }
.hero__center { display: grid; justify-items: center; text-align: center; max-width: 900px; }
.hero__center .lede { margin-inline: auto; max-width: 64ch; }
.hero__center .hero__ctas, .hero__center .hero__trust { justify-content: center; }
.hero--app h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); max-width: 16ch; margin-inline: auto; }
.product { position: relative; margin-top: clamp(40px, 5vw, 56px); }
.pt-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.hs-tab { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; font: 600 .88rem/1 var(--f-body); cursor: pointer; transition: all .2s ease; }
.hs-tab:hover { background: rgba(255,255,255,.2); }
.hs-tab.is-active { background: #fff; color: var(--purple); border-color: #fff; box-shadow: 0 8px 20px -10px rgba(20,10,60,.5); }
.pwin { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(15,10,60,.65), 0 0 0 1px rgba(255,255,255,.25); container-type: inline-size; }
.pwin__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1cqw 1.4cqw; background: #F1F2F6; border-bottom: 1px solid #E3E5EC; }
.pwin__dots { display: flex; gap: .55cqw; }
.pwin__dots i { width: .95cqw; height: .95cqw; border-radius: 50%; background: #FF5F57; }
.pwin__dots i:nth-child(2) { background: #FEBC2E; } .pwin__dots i:nth-child(3) { background: #28C840; }
.pwin__url { display: inline-flex; align-items: center; gap: .5cqw; background: #fff; border: 1px solid #E3E5EC; border-radius: .6cqw; padding: .45cqw 2.2cqw; font: 500 1.05cqw/1 var(--f-body); color: #4B5163; min-width: 34cqw; justify-content: center; }
.pwin__url svg { width: 1.1cqw; height: 1.1cqw; fill: none; stroke: #16A34A; stroke-width: 2.2; }
.pwin__app { display: grid; grid-template-columns: 15.5% 1fr; aspect-ratio: 16 / 9.2; font-size: 1.05cqw; color: #1F2433; font-family: var(--f-body); }
.pside { background: #11142B; color: #9AA0BF; padding: 1.4em 1em; display: grid; grid-template-rows: auto 1fr auto; gap: 1.6em; min-width: 0; }
.pside__brand { display: flex; align-items: center; gap: .6em; color: #fff; font-weight: 700; font-size: 1.05em; }
.pside__brand span { width: 1.9em; height: 1.9em; border-radius: .5em; display: grid; place-items: center; background: var(--grad-btn); font-size: .9em; }
.pside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; align-content: start; }
.pside li { display: flex; align-items: center; gap: .7em; padding: .65em .75em; border-radius: .5em; font-weight: 600; font-size: .95em; transition: background .3s ease, color .3s ease; }
.pside li svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pside li.on { background: rgba(255,255,255,.09); color: #fff; box-shadow: inset .2em 0 0 #5B8CFF; }
.pside__user { display: flex; align-items: center; gap: .6em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.08); }
.pside__user b { display: block; color: #fff; font-size: .9em; } .pside__user small { font-size: .78em; }
.pmain { position: relative; background: #F6F7FB; overflow: hidden; min-width: 0; }
.pwin .hs__slide { position: absolute; inset: 0; padding: 1.8em 2em; display: grid; grid-template-rows: auto auto 1fr; gap: 1.2em; align-content: start; opacity: 0; visibility: hidden; transform: translateY(.6em); transition: opacity .5s ease, transform .5s ease, visibility .5s; }
.pwin .hs__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.ph h4 { margin: 0; font: 700 1.55em/1.2 var(--f-display); letter-spacing: -.01em; color: #111827; }
.ph p { margin: .25em 0 0; color: #6B7186; font-size: .92em; }
.ph__act { display: flex; gap: .6em; flex: none; }
.pwin .sel, .pbtn { display: inline-flex; align-items: center; gap: .4em; padding: .55em .9em; border-radius: .5em; font-weight: 600; font-size: .9em; white-space: nowrap; }
.pwin .sel { background: #fff; border: 1px solid #E3E5EC; color: #374151; } .pwin .sel i { font-style: normal; color: #9CA3AF; }
.pbtn { background: #2D7FF9; color: #fff; }
.pbtn--ghost { background: #fff; color: #374151; border: 1px solid #E3E5EC; }
.pbtn--wa { background: #16A34A; font-size: .82em; padding: .45em .8em; }
.pc { background: #fff; border: 1px solid #E6E8F0; border-radius: .7em; padding: 1em 1.1em; min-width: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.pc--flush { padding: 0; overflow: hidden; }
.pc__h { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .7em; font-size: .95em; }
.pc__h b { color: #111827; } .pc__h--pad { padding: 1em 1.1em 0; }
.muted { color: #8A90A6; font-size: .9em; } .lnk { color: #2D7FF9; font-weight: 600; font-size: .9em; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.kpi { display: grid; gap: .35em; }
.kpi__l { color: #6B7186; font-size: .88em; font-weight: 600; }
.kpi b { font: 700 1.75em/1.1 var(--f-display); color: #111827; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi__f { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.kpi__f em { font-style: normal; font-size: .8em; font-weight: 700; padding: .2em .5em; border-radius: 999px; white-space: nowrap; }
.kpi__f em.up { color: #15803D; background: #DCFCE7; } .kpi__f em.down { color: #B91C1C; background: #FEE2E2; }
.spk { width: 6.5em; height: 1.9em; }
.g2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1em; min-height: 0; }
.g2--even { grid-template-columns: 1fr 1fr; }
.g2--wa { grid-template-columns: 1.5fr 1fr; grid-row: span 2; }
.col { display: grid; gap: 1em; align-content: start; }
.lchart, .bchart { width: 100%; height: auto; display: block; }
.lg { display: flex; align-items: center; gap: .5em; color: #6B7186; font-size: .85em; }
.lg i { width: .8em; height: .8em; border-radius: .2em; display: inline-block; margin-left: .5em; }
.lg1 { background: #2D7FF9; } .lg2 { background: #7C3AED; } .lg3 { background: #F59E0B; }
.pt { width: 100%; border-collapse: collapse; font-size: .9em; }
.pt th { text-align: left; font-weight: 600; color: #8A90A6; font-size: .9em; padding: .55em .5em; border-bottom: 1px solid #EEF0F5; white-space: nowrap; }
.pt td { padding: .62em .5em; border-bottom: 1px solid #F1F2F6; white-space: nowrap; font-variant-numeric: tabular-nums; color: #374151; }
.pt tr:last-child td { border-bottom: 0; }
.pt--wide th:first-child, .pt--wide td:first-child { padding-left: 1.1em; }
.pt--wide th:last-child, .pt--wide td:last-child { padding-right: 1.1em; }
.pt td b { color: #111827; font-weight: 600; }
.pt .sub { display: block; color: #9CA3AF; font-size: .85em; margin-top: .15em; font-family: var(--f-mono); }
.sd { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .5em; vertical-align: middle; }
.sd--ok { background: #22C55E; } .sd--warn { background: #F59E0B; } .sd--warm { background: #60A5FA; }
.pp { display: inline-block; padding: .22em .6em; border-radius: 999px; font-size: .82em; font-weight: 700; }
.pp--ok { background: #DCFCE7; color: #15803D; } .pp--warn { background: #FEF3C7; color: #B45309; }
.pp--muted { background: #F3F4F6; color: #6B7280; } .pp--blue { background: #DBEAFE; color: #1D4ED8; }
.ptabs { display: flex; gap: .4em; font-size: .9em; }
.ptabs span { padding: .45em .8em; border-radius: .5em; color: #6B7186; font-weight: 600; }
.ptabs span.on { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16,24,40,.08); border: 1px solid #E6E8F0; }
.stack { display: flex; height: 1em; border-radius: 999px; overflow: hidden; margin: .4em 0 1em; }
.stack i { display: block; height: 100%; }
.stack .st1 { width: 39%; } .stack .st2 { width: 21%; } .stack .st3 { width: 24%; } .stack .st4 { width: 16%; }
.st1 { background: #16A34A; } .st2 { background: #2D7FF9; } .st3 { background: #F59E0B; } .st4 { background: #CBD5E1; }
.leg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55em 1.2em; font-size: .9em; color: #4B5163; }
.leg li { display: flex; align-items: center; gap: .5em; }
.leg li i { width: .75em; height: .75em; border-radius: .2em; flex: none; }
.leg li b { margin-left: auto; color: #111827; font-variant-numeric: tabular-nums; }
.leg--v { grid-template-columns: 1fr; }
.w1 { background: #22C55E; } .w2 { background: #16A34A; } .w3 { background: #86EFAC; } .w0 { background: #E5E7EB; }
.dn { display: grid; grid-template-columns: 9em 1fr; gap: 1.2em; align-items: center; }
.dn svg { width: 100%; height: auto; }
.tpl { list-style: none; margin: 0; padding: 0; display: grid; font-size: .9em; }
.tpl li { display: grid; grid-template-columns: 1fr auto auto; gap: .8em; align-items: center; padding: .5em 0; border-bottom: 1px solid #F1F2F6; font-family: var(--f-mono); font-size: .92em; color: #374151; }
.tpl li:last-child { border-bottom: 0; }
.tpl li span:not(.pp) { color: #8A90A6; font-family: var(--f-body); font-size: .9em; }
.kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; align-items: start; grid-row: span 2; }
.kcol { background: #EEF0F6; border-radius: .7em; padding: .8em; display: grid; gap: .6em; }
.kcol__h { display: flex; justify-content: space-between; align-items: center; font-size: .95em; }
.kcol__h span { background: #fff; border-radius: 999px; padding: .1em .6em; font-weight: 700; font-size: .85em; color: #4B5163; }
.kcol__s { margin: -.3em 0 .1em; color: #6B7186; font-size: .85em; font-weight: 600; }
.kcol--won .kcol__h b { color: #15803D; }
.kc { background: #fff; border: 1px solid #E6E8F0; border-radius: .6em; padding: .75em .8em; display: grid; gap: .35em; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.kc b { font-size: .95em; color: #111827; }
.kc .amt { font-weight: 700; color: #374151; font-variant-numeric: tabular-nums; font-size: .92em; }
.kc__f { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.due { font-size: .8em; font-weight: 600; color: #6B7186; background: #F3F4F6; padding: .2em .55em; border-radius: .4em; }
.av { width: 1.9em; height: 1.9em; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75em; font-weight: 700; color: #fff; flex: none; }
.av--b { background: #2D7FF9; } .av--p { background: #7C3AED; } .av--g { background: #16A34A; }
.pnote { margin: 14px 0 0; text-align: center; color: rgba(255,255,255,.75); font-size: .8rem; }
.hero__proof--row { justify-content: center; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.hero__proof--row li { justify-items: center; }
@media (max-width: 760px) {
  .pwin__app { grid-template-columns: 1fr; aspect-ratio: 16 / 12; font-size: 1.6cqw; }
  .pside { display: none; }
  .pwin .hs__slide { padding: 1.3em 1.3em; }
  .pwin__url { font-size: 2.2cqw; min-width: 55cqw; } .pwin__url svg { width: 2.2cqw; height: 2.2cqw; } .pwin__dots i { width: 1.8cqw; height: 1.8cqw; }
  .hero__proof--row { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hs-tab { padding: 8px 12px; font-size: .8rem; }
}


/* ================= Fixes: sticky header + mobile ================= */
/* Header: the contact bar scrolls away, the nav sticks. No height changes, so no jumping. */
.nav { top: calc(env(safe-area-inset-top, 0px) - 40px); }
.nav.is-scrolled .topbar { max-height: 40px; opacity: 1; }
.nav.is-scrolled .nav__inner { height: 76px; }
.nav.is-scrolled .brand__logo { height: 64px; }
.topbar, .nav__inner, .brand__logo { transition: none; }
@media (max-width: 960px) {
  .nav__inner, .nav.is-scrolled .nav__inner { height: 66px; }
  .brand__logo, .nav.is-scrolled .brand__logo { height: 50px; }
}

/* Contact + footer details: plain selectable text */
.sel { user-select: all; font-weight: 600; background: none; border: 0; padding: 0; }

/* Service card badges never cover the title */
.service--wa h3, .service--feature h3 { padding-right: 58px; }

/* Testimonial avatars readable */
.testi figcaption .avatar { color: #fff; }

@media (max-width: 620px) {
  /* CRM journey wraps instead of running off screen */
  .flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: visible; }
  .flow li { padding: 0; }
  .flow li::after { display: none; }
  .flow li span { padding: 10px 12px; font-size: .72rem; }

  /* Hero dashboard: bigger text, fewer columns, phone-sized layout */
  .pwin__app { aspect-ratio: auto; height: 470px; font-size: 2.65cqw; }
  .pwin .hs__slide { padding: 1.1em 1.1em; gap: .9em; }
  .ph { flex-wrap: wrap; align-items: flex-start; }
  .ph__act .pbtn--ghost, .ph__act .pbtn:not(.pbtn--ghost) { display: none; }
  .ph p { font-size: .85em; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .7em; }
  .kpi b { font-size: 1.45em; }
  .spk { width: 4.5em; }
  .g2, .g2--even, .g2--wa { grid-template-columns: 1fr; }
  .g2 > .pc:nth-child(2) { display: none; }
  .g2--wa > .col { display: none; }
  .ptabs span:nth-child(n+4) { display: none; }
  .pt--wide th:nth-child(3), .pt--wide td:nth-child(3),
  .pt--wide th:nth-child(5), .pt--wide td:nth-child(5),
  .pt--wide th:nth-child(7), .pt--wide td:nth-child(7) { display: none; }
  .g2--wa .pt--wide th:nth-child(2), .g2--wa .pt--wide td:nth-child(2),
  .g2--wa .pt--wide th:nth-child(4), .g2--wa .pt--wide td:nth-child(4) { display: none; }
  .kan { grid-template-columns: 1fr 1fr; }
  .kan .kcol:nth-child(n+3) { display: none; }
  .pwin__url { font-size: 2.6cqw; min-width: 60cqw; }
  .pwin__url svg { width: 2.6cqw; height: 2.6cqw; }
  .pwin__dots i { width: 2.2cqw; height: 2.2cqw; }
  .pwin__bar { padding: 2cqw 2.4cqw; }
}