@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/bricolage-latin-ext.woff2") format("woff2");
}

:root {
  --color-bg: #fff;
  --color-surface: #f6f5f4;
  --color-text: #222;
  --color-text-muted: #616161;
  --color-border: #e5e5e5;
  --color-primary: #0075de;
  --color-primary-hover: #005bab;
  --color-primary-soft: #e6f3fe;
  --color-on-primary: #fff;
  --color-success: #216e4e;
  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --container: 1200px;
  --section-space: 96px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font: 400 16px/1.5 var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
h1, h2, h3, p, dl, dd, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }

.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 14px; color: var(--color-on-primary); background: var(--color-text); border-radius: var(--radius-md); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.eyebrow { color: var(--color-primary-hover); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; font-weight: 700; line-height: 20px; }
.eyebrow--light { color: var(--color-primary-soft); }
.lead { color: var(--color-text-muted); font-size: 20px; line-height: 28px; }
.meta { color: var(--color-text-muted); font-size: 14px; line-height: 20px; }
.button { min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; text-decoration: none; font-weight: 700; line-height: 24px; cursor: pointer; transition: transform .18s, background-color .18s; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: var(--color-on-primary); background: var(--color-primary); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--dark { width: 100%; color: var(--color-on-primary); background: var(--color-text); }

.site-header-shell { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(16px); }
.site-header { width: min(var(--container), calc(100% - 64px)); min-height: 80px; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand { font-size: 20px; font-weight: 700; text-decoration: none; }
.site-header nav { margin-left: auto; display: flex; gap: 28px; }
.site-header nav a { color: var(--color-text-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.site-header nav a:hover { color: var(--color-text); }

.hero { padding-block: 80px; border-top: 1px solid var(--color-border); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(520px, 1.02fr); align-items: center; gap: clamp(44px, 6vw, 92px); }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero h1 { max-width: 650px; font-size: clamp(54px, 5.1vw, 72px); font-weight: 700; line-height: .98; letter-spacing: -.04em; }
.hero__copy > .lead { max-width: 640px; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__visual { margin: 0; }
.hero__visual img { width: 100%; filter: drop-shadow(0 26px 34px rgba(0, 91, 171, .13)); }
.hero__metrics { display: flex; gap: 24px; }
.hero__metrics div { padding-right: 24px; border-right: 1px solid var(--color-border); }
.hero__metrics div:last-child { padding-right: 0; border-right: 0; }
.hero__metrics dt { font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
.hero__metrics dd { color: var(--color-text-muted); font-size: 14px; line-height: 20px; }

.section-head { margin-bottom: 48px; display: flex; flex-direction: column; gap: 14px; }
.section-head h2, .section-copy h2, .why h2, .demo h2 { max-width: 780px; font-size: clamp(44px, 4vw, 54px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.section-head--split > div { display: flex; flex-direction: column; gap: 12px; }
.section-head--split > p { max-width: 380px; color: var(--color-text-muted); font-size: 18px; line-height: 27px; }
.split-section { display: grid; grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr); align-items: center; gap: clamp(48px, 7vw, 100px); }
.split-section--reverse { grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.1fr); }
.section-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.plain-list { margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.plain-list li { position: relative; padding-left: 24px; color: var(--color-text-muted); }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }

.before-after { border-top: 1px solid var(--color-border); }
.comparison { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 16px; }
.comparison article { position: relative; min-height: 420px; padding: 18px; border-radius: var(--radius-xl); background: var(--color-surface); display: flex; flex-direction: column; gap: 16px; }
.comparison__new { background: var(--color-primary-soft) !important; }
.comparison__tag { align-self: flex-start; padding: 6px 10px; border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.comparison__arrow { color: var(--color-primary); text-align: center; font-size: 40px; }
.comparison article > p { margin-top: auto; color: var(--color-text-muted); font-size: 14px; }
.mail-window, .mini-page { flex: 1; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: 0 16px 30px rgba(34,34,34,.08); }
.mail-window__bar { margin: -22px -22px 22px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-weight: 700; }
.mail-window p { color: var(--color-text-muted); font-size: 14px; }
.attachment { margin-top: 32px; padding: 14px; border-radius: var(--radius-md); background: var(--color-surface); display: flex; align-items: center; gap: 12px; }
.attachment strong { padding: 10px 7px; border-radius: var(--radius-sm); color: var(--color-on-primary); background: #b42318; }
.attachment span { font-size: 13px; font-weight: 700; }
.mini-page { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border-top: 10px solid var(--color-text); }
.mini-page h3 { margin-top: 14px; font-size: 28px; line-height: 31px; }
.mini-page p { color: var(--color-text-muted); font-size: 14px; }
.mini-button { margin-top: auto; padding: 10px 14px; border-radius: var(--radius-full); color: var(--color-on-primary); background: var(--color-primary); font-size: 13px; font-weight: 700; }

.video-section { background: var(--color-surface); }
.video-placeholder { position: relative; aspect-ratio: 16 / 8.4; border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-text); }
.video-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .65; background: radial-gradient(circle at 50% 44%, rgba(0,117,222,.6), transparent 28%), linear-gradient(135deg, transparent 42%, rgba(255,255,255,.04) 42% 44%, transparent 44%); }
.video-play { position: relative; z-index: 2; width: 74px; height: 74px; border: 0; border-radius: 50%; color: var(--color-on-primary); background: var(--color-primary); cursor: pointer; font-size: 25px; box-shadow: 0 18px 40px rgba(0,117,222,.34); }
.video-placeholder__copy { position: absolute; left: 28px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; color: var(--color-on-primary); }
.video-placeholder__copy span { color: #cfcfcf; font-size: 14px; }
.video-benefits { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.video-benefits span { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text-muted); font-size: 14px; font-weight: 600; text-align: center; }

.why { color: var(--color-on-primary); background: var(--color-text); }
.why__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 88px; }
.why__intro { min-height: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.why__intro > p:last-child { max-width: 460px; margin-top: auto; color: #cfcfcf; font-size: 19px; line-height: 29px; }
.reason-list { margin: 0; padding: 0; list-style: none; }
.reason-list li { min-height: 118px; padding: 24px 0; border-top: 1px solid #444; display: grid; grid-template-columns: 52px 240px 1fr; gap: 24px; }
.reason-list li > span { color: #75bfff; }
.reason-list h3 { font-size: 24px; line-height: 29px; }
.reason-list p { color: #cfcfcf; font-size: 16px; line-height: 24px; }

.interactive { background: var(--color-primary-soft); }
.quote-configurator { padding: 28px; border-radius: var(--radius-xl); background: var(--color-bg); box-shadow: 0 22px 48px rgba(0,91,171,.12); display: flex; flex-direction: column; gap: 10px; }
.quote-configurator__top { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.quote-configurator__top span { padding: 6px 9px; border-radius: var(--radius-full); color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.quote-configurator label { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; }
.quote-configurator label:first-of-type { border: 2px solid var(--color-primary); background: var(--color-primary-soft); }
.quote-configurator input { accent-color: var(--color-primary); }
.quote-configurator label span { font-weight: 600; }
.quote-configurator__total { margin-top: 6px; padding: 16px; border-radius: var(--radius-md); color: var(--color-on-primary); background: var(--color-text); display: flex; align-items: center; justify-content: space-between; }
.quote-configurator__total strong { font-size: 28px; line-height: 32px; }

.monitoring { border-top: 1px solid var(--color-border); }
.activity-card { padding: 26px; border-radius: var(--radius-xl); color: var(--color-on-primary); background: var(--color-text); }
.activity-card__head { padding-bottom: 18px; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
.activity-card__head span { color: #8ec9ff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.activity-card ul { margin: 0; padding: 0; list-style: none; }
.activity-card li { min-height: 74px; border-bottom: 1px solid #444; display: flex; align-items: center; gap: 14px; }
.activity-card li div { display: flex; flex-direction: column; }
.activity-card small { color: #cfcfcf; }
.status { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 6px rgba(0,117,222,.14); }
.status--success { background: #46a97b; box-shadow: 0 0 0 6px rgba(70,169,123,.13); }
.activity-card button { width: 100%; margin-top: 18px; padding: 13px; border: 0; border-radius: var(--radius-md); color: var(--color-on-primary); background: var(--color-primary); font-weight: 700; }

.automation { color: var(--color-on-primary); background: var(--color-primary); }
.section-head--light > p { color: var(--color-primary-soft); }
.automation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.automation-grid article { min-height: 228px; padding: 24px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-xl); display: flex; flex-direction: column; }
.automation-grid article:nth-child(2) { color: var(--color-text); background: var(--color-bg); border-color: var(--color-bg); }
.automation-grid article:nth-child(3) { color: var(--color-on-primary); background: var(--color-text); border-color: var(--color-text); }
.automation-grid article > span { font-size: 14px; font-weight: 700; }
.automation-grid h3 { margin-top: auto; font-size: 22px; line-height: 27px; }
.automation-grid p { margin-top: 8px; opacity: .8; font-size: 14px; line-height: 20px; }

.results-grid { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: 14px; }
.results-grid article, .results-grid blockquote { min-height: 290px; padding: 28px; border-radius: var(--radius-xl); background: var(--color-surface); display: flex; flex-direction: column; }
.results-grid article > span, .results-grid blockquote > span { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.results-grid article strong { margin-block: 18px auto; font-size: clamp(38px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.results-grid article p { color: var(--color-text-muted); }
.results-grid__blue { background: var(--color-primary-soft) !important; }
.results-grid blockquote { color: var(--color-on-primary); background: var(--color-text); }
.results-grid blockquote > span { color: #75bfff; }
.results-grid blockquote p { margin-top: auto; font-size: 27px; font-weight: 600; line-height: 33px; }

.implementation { background: var(--color-surface); }
.implementation-list { margin: 0; padding: 0; list-style: none; }
.implementation-list li { padding: 22px 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 48px 1fr; gap: 18px; }
.implementation-list li > span { color: var(--color-primary); font-weight: 700; }
.implementation-list h3 { font-size: 22px; line-height: 27px; }
.implementation-list p { margin-top: 6px; color: var(--color-text-muted); }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr .76fr; gap: 14px; }
.pricing-grid article { min-height: 240px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); display: flex; flex-direction: column; }
.pricing-grid article > span { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.pricing-grid article strong { margin-top: 16px; font-size: 36px; line-height: 41px; letter-spacing: -.025em; }
.pricing-grid article p { margin-top: auto; color: var(--color-text-muted); }
.price-box { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary) !important; }
.price-box span, .price-box p { color: var(--color-primary-soft) !important; }
.pricing-grid__dark { color: var(--color-on-primary); background: var(--color-text); border-color: var(--color-text) !important; }
.pricing-grid__dark span, .pricing-grid__dark p { color: #cfcfcf !important; }
.pricing-grid__dark strong { font-size: 28px !important; line-height: 33px !important; }

.author { color: var(--color-on-primary); background: var(--color-text); }
.author__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.author__copy { display: flex; flex-direction: column; align-items: flex-start; }
.author__copy h2 { margin-top: 14px; font-size: clamp(46px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.author__person { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.author__person img { width: 96px; height: 96px; border: 3px solid var(--color-primary); border-radius: 50%; object-fit: cover; object-position: 50% 32%; }
.author__person div { display: flex; flex-direction: column; }
.author__person strong { font-size: 22px; }
.author__person span { color: #cfcfcf; }
.author__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.author__proof article { min-height: 220px; padding: 28px; border-radius: var(--radius-xl); color: var(--color-text); background: var(--color-bg); display: flex; flex-direction: column; }
.author__proof article > span { color: var(--color-primary-hover); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 700; }
.author__proof article strong { margin-top: 24px; font-size: 40px; line-height: 44px; }
.author__proof article p { margin-top: auto; color: var(--color-text-muted); }
.author__proof-blue { color: var(--color-on-primary) !important; background: var(--color-primary) !important; }
.author__proof-blue span { color: var(--color-primary-soft) !important; }
.author__proof-blue strong { font-size: 28px !important; line-height: 33px !important; }
.author__proof-wide { grid-column: 1 / -1; min-height: 170px !important; color: var(--color-on-primary) !important; background: #303030 !important; }
.author__proof-wide strong { margin-top: 0 !important; font-size: 28px !important; line-height: 33px !important; }
.author__proof-wide p { color: #cfcfcf !important; }

.audience { border-top: 1px solid var(--color-border); }
.audience-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.audience-tags span { padding: 12px 16px; border-radius: var(--radius-full); color: var(--color-primary-hover); background: var(--color-primary-soft); font-weight: 700; }
.audience-tags span:nth-child(3n) { color: var(--color-on-primary); background: var(--color-primary); }

.demo { color: var(--color-on-primary); background: var(--color-primary); }
.demo__grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(50px, 8vw, 110px); }
.demo__copy { display: flex; flex-direction: column; gap: 20px; }
.demo__copy > p:not(.eyebrow) { color: var(--color-primary-soft); font-size: 19px; line-height: 28px; }
.demo__assurances { display: flex; flex-wrap: wrap; gap: 18px; }
.demo__assurances span::before { content: "✓"; margin-right: 6px; }
.lead-form { padding: 34px; border-radius: var(--radius-xl); color: var(--color-text); background: var(--color-bg); box-shadow: 0 24px 60px rgba(0,57,109,.24); display: flex; flex-direction: column; gap: 16px; }
.lead-form h3 { font-size: 32px; line-height: 37px; letter-spacing: -.02em; }
.lead-form label { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-muted); font-size: 13px; font-weight: 700; }
.lead-form label span { display: flex; justify-content: space-between; }
.lead-form em { font-weight: 400; font-style: normal; }
.lead-form input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-bg); }
.lead-form input:focus { border-color: var(--color-primary); outline: 3px solid var(--color-primary-soft); }
.form-status { color: var(--color-text-muted); font-size: 12px; line-height: 18px; text-align: center; }
.form-status--notice { color: var(--color-primary-hover); font-weight: 600; }

.site-footer { min-height: 96px; padding: 24px max(32px, calc((100% - var(--container)) / 2)); display: flex; align-items: center; gap: 24px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); font-size: 14px; }
.site-footer strong { color: var(--color-text); }
.site-footer a { margin-left: auto; color: var(--color-primary-hover); font-weight: 700; }

@media (max-width: 1040px) {
  :root { --section-space: 80px; }
  .hero__grid, .split-section, .split-section--reverse, .why__grid, .author__grid, .demo__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 720px; }
  .why__intro { min-height: auto; }
  .why__intro > p:last-child { margin-top: 18px; }
  .automation-grid { grid-template-columns: 1fr 1fr; }
  .results-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .results-grid blockquote, .pricing-grid__dark { grid-column: 1 / -1; }
  .author__person { margin-top: 34px; }
}

@media (max-width: 760px) {
  :root { --section-space: 64px; }
  .container, .site-header { width: min(100% - 32px, var(--container)); }
  .site-header { min-height: 68px; }
  .site-header nav { display: none; }
  .header-cta { margin-left: auto; min-height: 42px; padding: 9px 13px; font-size: 14px; }
  .hero { padding-block: 54px 64px; }
  .hero__grid { gap: 42px; }
  .hero h1 { font-size: 48px; line-height: 48px; }
  .hero__metrics { width: 100%; flex-direction: column; gap: 14px; }
  .hero__metrics div { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .hero__metrics div:last-child { padding-bottom: 0; border-bottom: 0; }
  .section-head h2, .section-copy h2, .why h2, .demo h2 { font-size: 40px; line-height: 42px; }
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 18px; }
  .comparison { grid-template-columns: 1fr; }
  .comparison__arrow { transform: rotate(90deg); }
  .video-placeholder { aspect-ratio: 4 / 3; }
  .video-benefits { grid-template-columns: 1fr; }
  .reason-list li { grid-template-columns: 40px 1fr; }
  .reason-list li p { grid-column: 2; }
  .automation-grid, .results-grid, .pricing-grid, .author__proof { grid-template-columns: 1fr; }
  .results-grid blockquote, .pricing-grid__dark, .author__proof-wide { grid-column: auto; }
  .results-grid article, .results-grid blockquote { min-height: 240px; }
  .author__proof article { min-height: 190px; }
  .demo__grid { gap: 42px; }
  .lead-form { padding: 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .site-footer a { margin-left: 0; }
}

@media (max-width: 460px) {
  .brand { font-size: 17px; }
  .header-cta { padding-inline: 11px; }
  .hero h1 { font-size: 42px; line-height: 43px; }
  .hero__actions, .hero__actions .button { width: 100%; }
  .quote-configurator { padding: 18px; }
  .quote-configurator__top { align-items: flex-start; flex-direction: column; }
  .quote-configurator label { grid-template-columns: 20px 1fr; }
  .quote-configurator label strong { grid-column: 2; }
  .automation-grid { grid-template-columns: 1fr; }
  .lead-form h3 { font-size: 27px; line-height: 32px; }
}

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