/* ============================================================
   High-risk Scale — Contact
   Flow + Grid + Flexbox. No coordinate positioning.
   No absolute positioning; overlapping pieces share one grid cell,
   decorations are background layers. Whole numbers only.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --blue:#2f5bff;
  --ink:#0b0f19;
  --grey:#9ca3af;
  --text-soft:#5b6072;
  --nav:#747881;
  --nav-active:#373a42;

  --on-blue:#ffffffd6;
  --rule-card:#ffffff47;
  --rule-field:#ffffff73;

  --gutter:clamp(16px,calc(28vw / 5),80px);
  --pill:999px}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:radial-gradient(circle 1000px at -50px -210px,#2f5bff1f 0,#2f5bff1c 150px,#2f5bff14 300px,#2f5bff0c 450px,#2f5bff06 600px,#2f5bff02 750px,#2f5bff01 900px,#2f5bff00 1000px) no-repeat,radial-gradient(circle 1000px at calc(100% - 18px) -244px,#2f5bff15 0,#2f5bff13 150px,#2f5bff0e 300px,#2f5bff08 450px,#2f5bff04 600px,#2f5bff02 750px,#2f5bff01 900px,#2f5bff00 1000px) no-repeat,#fff;
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:calc(13 / 8);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-size:inherit;font-weight:inherit}
button,input,textarea{
  font:inherit;color:inherit;margin:0;
  background:none;border:0;border-radius:0;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- shared layout ---------- */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.page{padding:24px 0 64px}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.brand__mark{width:39px;height:36px;flex:none}
.brand__name{
  font-size:20px;line-height:calc(23 / 20);font-weight:700;
  letter-spacing:calc(-1em / 25);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.brand__name b{color:var(--blue)}
.brand--light{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;flex:none;
  border-radius:var(--pill);white-space:nowrap}
.btn__ico{display:flex;align-items:center;justify-content:center;flex:none}
.btn--dark{
  height:40px;padding:0 6px 0 14px;gap:10px;
  background:var(--ink);color:#fff;
  font-size:14px;font-weight:600}
.btn--dark .btn__ico{width:28px;height:28px;border-radius:50%;background:var(--blue)}
.btn--dark svg{width:20px;height:20px}
.btn--white{
  height:56px;padding:0 24px 0 32px;gap:12px;
  background:#fff;color:var(--blue);
  font-size:16px;font-weight:700;
  box-shadow:0 12px 26px -6px #2f5bff80}
.btn--white svg{width:26px;height:26px}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  display:flex;align-items:center;
  min-height:68px;padding:0 20px 0 24px;
  background:#fff;border-radius:var(--pill);
  box-shadow:0 4px 18px #0b0f1912;
  overflow:hidden}
/* on desktop the wrapper is transparent to the layout:
   .nav and the CTA stay direct flex children of .topbar */
.menu{display:contents}

.nav{
  display:flex;flex:1;align-items:center;justify-content:center;gap:40px;
  font-size:14px;line-height:calc(12 / 7)}

/* burger — hidden until the nav collapses */
.burger{
  display:none;flex:none;
  width:44px;height:44px;margin-left:auto;
  align-items:center;justify-content:center;
  border-radius:50%}
.burger > span{display:grid;width:20px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center / 20px 2px no-repeat;transition:background-size 150ms ease}
.burger > span::before,.burger > span::after{content:"";grid-area:1 / 1;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform 200ms ease}
.burger > span::before{align-self:start}
.burger > span::after{align-self:end}
.is-open .burger > span{background-size:0 2px}
.is-open .burger > span::before{transform:translateY(6px) rotate(45deg)}
.is-open .burger > span::after{transform:translateY(-6px) rotate(-45deg)}
.nav a{color:var(--nav);white-space:nowrap;transition:color 180ms ease}
.nav a:focus-visible{color:var(--nav-active);font-weight:700}
/* hover only where a pointer can actually hover — on touch screens the
   state sticks to the last tapped item and looks like a selected page */
@media (hover:hover){.nav a:hover{color:var(--nav-active);font-weight:700}}

/* the hovered item turns bold — this reserves the bold width up front
   so the neighbouring links never shift */
.nav a,.foot__nav a{display:inline-grid;justify-items:center}
.nav a::before,.foot__nav a::before{
  content:attr(data-label);
  font-weight:700;height:0;overflow:hidden;visibility:hidden}



/* ---------- blueprint grid behind the hero illustration ---------- */

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
.sec{margin-top:120px}
.sec--tight{margin-top:96px}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  height:31px;padding:0 17px;
  background:#eaefff;border-radius:var(--pill);
  color:var(--blue);
  font-size:12px;font-weight:700;letter-spacing:calc(5em / 91);text-transform:uppercase;
  align-self:flex-start}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:currentColor}
.eyebrow--lg{height:34px;padding:0 24px;gap:11px;font-size:14px;font-weight:600;letter-spacing:0;background:#eaeeff}
.eyebrow--lg::before{width:5px;height:5px;border-radius:50%}
.eyebrow--dark{background:#2f5bff2e;color:#acbdff}
.eyebrow--dark::before{background:var(--blue)}

.h2{font-size:clamp(28px,calc(33vw / 10),42px);line-height:calc(9 / 7);font-weight:700;letter-spacing:calc(-1em / 25)}
.h2 b,.hero__title b{font-weight:inherit;color:var(--blue)}
.br-m{display:none}
.process__title,.says__title{margin-top:20px}
.h3{font-size:22px;line-height:calc(141 / 97);font-weight:700;letter-spacing:calc(-1em / 25)}
.lead{color:var(--text-soft)}

/* round carousel arrows — shared by three sections */
.arrows{display:flex;gap:12px;flex:none}
.arrow{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:51px;height:51px;border-radius:50%;
  background:#fff;border:1px solid #e3e8f5;color:#c3c9d8}
.arrow svg{width:17px;height:17px}
.arrow--next{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 15px #2f5bff5c}
.arrow[disabled]{opacity:40%;cursor:default;box-shadow:none}

/* shared progress rail */
.rail{display:flex;height:4px;margin-top:36px;border-radius:var(--pill);background:#dfe4f0;overflow:hidden}
.rail__bar{width:34%;border-radius:var(--pill);background:var(--blue)}

/* ============================================================
   1 — HERO
   ============================================================ */
.hero{
  display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:60px;align-items:center;margin-top:86px}
.hero__title{margin-top:26px;font-size:clamp(34px,calc(21vw / 5),60px);line-height:calc(11 / 10);font-weight:700;letter-spacing:calc(-1em / 25)}
.hero__text{margin-top:26px;max-width:340px;font-size:16px;line-height:calc(13 / 8)}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:40px}

.btn--primary{
  min-width:268px;height:58px;padding:0 24px;gap:14px;justify-content:center;
  background:var(--blue);color:#fff;font-size:16px;font-weight:700;
  box-shadow:0 11px 27px -7px #2f5bff80}
.btn--primary svg{width:18px;height:18px}
.btn--ghost{
  min-width:268px;height:63px;padding:0 24px;justify-content:center;
  border:2px solid #e7e9f0;color:var(--blue);font-size:16px;font-weight:700}

.hero__art{display:flex;align-items:center;justify-content:flex-end;gap:67px;min-width:0}
.niches{display:grid;grid-template-columns:minmax(0,1fr);flex:none;width:166px}
.niches__list{grid-area:1 / 1;display:flex;flex-direction:column;gap:22px}
.niche{
  display:flex;align-items:center;gap:18px;
  min-height:68px;padding:12px 12px 12px 0;
  background:#fff;border-radius:18px;box-shadow:0 7px 18px #1419320d}
/* the badge deliberately overhangs the card, as in the design */
.niche__ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:43px;height:43px;margin-left:-20px;border-radius:11px}
.niche__ico svg{width:24px;height:24px}
.niche span{font-size:14px;font-weight:600;line-height:calc(139 / 100)}
.niche--nutra .niche__ico{background:#f4eeff}
.niche--adult .niche__ico{background:#ffeeee}
.niche--crypto .niche__ico{background:#fff0e0}
.niche--cannabis .niche__ico{background:#edf8f0}
.niche--other .niche__ico{background:#fff5f5}

/* the connectors between the chips and the engine — placed as in the design:
   the offsets are a share of the chip column, so they follow it at any size */
.wires{grid-area:1 / 1;align-self:center;justify-self:start;margin-left:103%;width:79%;height:84%;contain:size;opacity:25%;overflow:visible;pointer-events:none}

.engine-wrap{flex:0 1 523px;min-width:0}
.engine{width:100%;height:auto;overflow:visible}
.engine text{font-family:inherit}

/* ============================================================
   2 — CASE STUDIES CAROUSEL
   ============================================================ */
.panel{padding:44px;background:#f6f8fd;border-radius:37px}
.panel--dark{background:var(--ink);color:#fff}

.sec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec__head .lead{margin-top:10px}
.sec__aside{display:flex;align-items:center;gap:64px;flex:none;padding-top:10px}
.sec__aside .eyebrow{align-self:center}

.carousel{
  margin-top:38px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.carousel::-webkit-scrollbar{display:none}
.track{display:flex;gap:69px}
.track > *{scroll-snap-align:start}

.case{
  display:flex;flex-direction:column;flex:0 0 392px;
  padding:18px;background:#fff;border-radius:29px;
  box-shadow:0 7px 29px #00000014}
.case__media{overflow:hidden;aspect-ratio:352 / 203;border-radius:20px;background:#e3e8f5}
.case__media img{width:100%;height:100%;object-fit:cover}
.case__cat{margin-top:24px;font-size:14px;line-height:calc(12 / 7);text-transform:uppercase;color:var(--blue)}
.case__title{margin-top:5px;font-size:22px;line-height:calc(141 / 97);font-weight:700;letter-spacing:calc(-1em / 25)}
.case__text{margin-top:16px;margin-bottom:34px;font-size:14px;line-height:calc(12 / 7);color:var(--text-soft)}
.case__stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:auto;padding-top:27px;border-top:1px solid #f1f3f9}
.stat{display:flex;align-items:center;gap:11px;min-width:0}
.stat__body{display:flex;flex-direction:column;min-width:0}
.stat__ico{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:13px;background:#eaefff;color:var(--blue)}
.stat__ico svg{width:20px;height:20px}
.stat__num{display:block;font-size:22px;line-height:calc(6 / 5);font-weight:700;letter-spacing:calc(-3em / 100);white-space:nowrap}
.stat__lab{display:block;margin-top:4px;font-size:10px;line-height:calc(7 / 5);color:var(--text-soft)}
.case .btn{margin-top:30px;align-self:flex-start}
.btn--case{height:46px;padding:0 9px 0 20px;gap:12px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 25px -6px #2f5bff80}
.btn--case .btn__ico{width:28px;height:28px;border-radius:50%;background:#fff}
.btn--case svg{width:13px;height:13px}

/* ============================================================
   3 — INDUSTRIES MARQUEE
   ============================================================ */
.marquee{margin-top:97px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__row{display:flex;width:max-content;gap:11px;animation:slide 38s linear infinite}
.marquee__row > *{flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
.marquee:hover .marquee__row{animation-play-state:paused}
.tag{
  display:inline-flex;align-items:center;height:52px;padding:0 22px;
  border-radius:var(--pill);border:1px solid #e7e9f0;
  font-size:16px;font-weight:600;line-height:calc(13 / 8);white-space:nowrap}
.tag--fill{background:#eaefff;border-color:#eaefff;color:var(--blue)}
.tag--mute{border-color:#f1f3f9;color:#c7ccd9}

/* ============================================================
   4 — TWO PROBLEMS
   ============================================================ */
.probs__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.probs__head .h2{max-width:840px}
.probs__head .lead{flex:none;max-width:200px;padding-top:26px}

.prob{
  display:grid;
  grid-template-columns:minmax(0,565fr) minmax(0,661fr);
  column-gap:54px;row-gap:0;
  align-items:start;margin-top:100px}
/* on the desktop layer the text side is one block again — the wrapper keeps
   the column's natural flow, and tablet dissolves it with display:contents */
.prob__shot{grid-column:1;grid-row:1;align-self:start}
.prob__col{grid-column:2;grid-row:1;min-width:0}
.prob--flip{grid-template-columns:minmax(0,661fr) minmax(0,565fr)}
.prob--flip .prob__shot{grid-column:2}
.prob--flip .prob__col{grid-column:1}
.prob__shot{overflow:hidden;aspect-ratio:565 / 592;border-radius:31px;background:#eaeef8}
.prob__shot img{width:100%;height:100%;object-fit:cover}
.prob--flip .prob__shot{background:#e7e7ef}

.prob__body{display:flex;flex-direction:column}
.prob__title{margin-top:18px;font-size:clamp(28px,calc(14vw / 5),36px);line-height:calc(139 / 100);font-weight:700;letter-spacing:calc(-1em / 25)}
.prob__body .lead{margin-top:10px}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px}
.cols h4{margin:0;font-size:12px;font-weight:700;letter-spacing:calc(1em / 10);text-transform:uppercase;color:#a6abba}
.cols ul{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.cols li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:calc(12 / 7)}
.cols--bad li{color:var(--text-soft)}
.cols--bad li::before{content:"";flex:none;width:15px;height:3px;border-radius:var(--pill);background:#dfe4f0}
.cols--good li .tick{display:flex;align-items:center;justify-content:center;flex:none;width:21px;height:21px;border-radius:8px;background:#eaefff;color:var(--blue)}
.cols--good li .tick svg{width:12px;height:12px}

.advantage{margin-top:30px;padding:22px 25px;background:#f6f8fd;border-radius:23px}
.advantage__top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:calc(2em / 21);text-transform:uppercase;color:var(--blue)}
.advantage__top svg{width:16px;height:16px;flex:none}
.advantage p{margin-top:12px;font-size:14px;line-height:calc(12 / 7);color:#374151}
.advantage .advantage__top{margin-top:0;color:var(--blue)}

.kicker{display:flex;align-items:center;gap:17px;margin-top:38px}
@media (min-width:1200px){.kicker{white-space:nowrap}}
.kicker::before{content:"";flex:none;width:42px;height:4px;border-radius:var(--pill);background:var(--blue)}

/* ============================================================
   5 — SERVICES (dark)
   ============================================================ */
.services__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.services__head .h2{margin-top:18px;max-width:430px;color:#fff}
.services__aside{display:flex;align-items:center;gap:32px;flex:none;padding-top:78px}
.faces{display:flex}
.face{width:54px;height:54px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:var(--ink)}
.face + .face{margin-left:-6px}
.face--icon{display:flex;align-items:center;justify-content:center;background:var(--blue);border-width:1px}
.face--icon svg{width:24px;height:24px}
.btn--blue{height:51px;padding:0 10px 0 22px;gap:12px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;box-shadow:0 4px 25px #2f5bff8a}
.btn--blue .btn__ico{width:28px;height:28px;border-radius:50%;background:#fff}
.btn--blue svg{width:14px;height:14px}

.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:76px}
.svc{display:flex;flex-direction:column;min-height:338px;padding:30px 26px;border-radius:29px;border:1px solid #1e2130}
.svc:nth-child(1){background:#14161f}
.svc:nth-child(2){background:#1d1f28}
.svc:nth-child(3){background:#282a35;border-color:#1d1f28}
.svc:nth-child(4){background:var(--blue)}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.svc__ico{display:flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;border-radius:17px;background:#2f5bff2e;color:#8fa5ff}
.svc:nth-child(3) .svc__ico{background:#202a4f}
.svc:nth-child(4) .svc__ico{background:#ffffff2e;color:#fff}
.svc__ico svg{width:24px;height:24px}
.svc__num{font-size:13px;font-weight:700;color:#4b5563}
.svc:nth-child(3) .svc__num{color:#ffffff99}
.svc:nth-child(4) .svc__num{color:#fff}
.svc__title{margin-top:26px;font-size:22px;line-height:calc(141 / 97);font-weight:700;letter-spacing:calc(-1em / 25);color:#fff}
.svc__text{margin-top:auto;padding-top:24px;font-size:14px;line-height:calc(12 / 7);color:var(--grey)}
.svc:nth-child(3) .svc__text{color:#ffffffd1}
.svc:nth-child(4) .svc__text{color:#fff}

/* ============================================================
   6 — PROCESS
   ============================================================ */
.process{display:grid;grid-template-columns:minmax(0,539fr) minmax(0,683fr);gap:61px;align-items:start}
.shot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:539 / 645}
/* the rounded rectangle with the notch cut out for the round button */
.shot__bg{grid-area:1 / 1;border-radius:36px;background:#eaeef8 center/cover no-repeat;-webkit-clip-path:url(#shot-clip);clip-path:url(#shot-clip)}
/* "About us" — the design draws it as a union of three white shapes:
   the pill itself, a small tail under it and a round lobe below-left
   that holds the blue dot. Sizes are the design's own. */
.pill-badge{grid-area:1 / 1;z-index:1;display:grid;align-self:start;justify-self:start;margin:26px 0 0 26px}
.shot__go{grid-area:1 / 1;z-index:1;align-self:start;justify-self:end;margin-right:1%;width:12%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff}
.shot__go svg{width:52%;height:auto}

.steps{display:flex;flex-direction:column;gap:6px;margin:42px 0 0;padding:0;list-style:none}
.step{display:flex;align-items:flex-start;gap:36px;padding:23px 25px;border-radius:23px}
.step--on{background:#f6f8fd}
.step__no{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:#eaefff;color:var(--blue);font-size:14px;font-weight:700}
.step--on .step__no{background:var(--blue);color:#fff}
.step__body h3{font-size:22px;line-height:calc(32 / 25);font-weight:700;letter-spacing:calc(-1em / 25)}
.step__body p{margin-top:8px;color:var(--text-soft)}

/* ============================================================
   7 — WHAT CLIENTS SAY
   ============================================================ */
.says{padding:55px 64px 44px;border-radius:35px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1540 1266'%3E%3Cpath d='M1389 655 C1490 655 1540 709 1540 817 L1540 1105 C1540 1212 1490 1266 1389 1266 L1054 1266 C954 1266 903 1212 903 1105 L903 817 C903 632 916 477 940 352 C964 226 1027 124 1127 47 C1200 -9 1258 -15 1299 30 L1381 118 C1432 172 1425 226 1357 279 C1311 315 1280 361 1265 419 C1249 476 1241 555 1241 655 Z M486 655 C586 655 637 709 637 817 L637 1105 C637 1212 586 1266 486 1266 L151 1266 C50 1266 0 1212 0 1105 L0 817 C0 632 12 477 37 352 C61 226 123 124 224 47 C297 -9 354 -15 396 30 L477 118 C529 172 521 226 454 279 C408 315 377 361 361 419 C346 476 338 555 338 655 Z' fill='%232f5bff0d'/%3E%3C/svg%3E") calc(68% + 55px) 78px / 308px auto no-repeat,#f6f8fd}
.says .carousel{margin-top:44px}
.says .track{gap:45px}
.review{display:flex;flex-direction:column;flex:0 0 401px;padding:26px;background:#fff;border-radius:29px;box-shadow:0 7px 29px #00000014}
.stars{display:flex;gap:2px;color:var(--blue)}
.stars svg{width:16px;height:16px}
.review__quote{margin-top:30px;font-size:16px;line-height:calc(13 / 8);color:#1f2937}
.review__by{margin-top:auto;padding-top:30px;border-top:1px solid #eef1f8;font-size:14px;line-height:calc(12 / 7);color:var(--text-soft)}
.review__tag{align-self:flex-start;margin-top:12px;padding:0 13px;height:26px;display:inline-flex;align-items:center;border-radius:var(--pill);background:#f6f8fd;font-size:10px;color:var(--text-soft)}
.says__foot{display:flex;align-items:center;gap:24px;margin-top:38px}
.says__foot .rail{flex:1;margin-top:0}
.says__count{flex:none;font-size:14px;line-height:calc(12 / 7);color:#a6abba}

/* ============================================================
   8 — FAQ
   ============================================================ */
.faq{max-width:calc(942px + var(--gutter)*2);margin-left:auto;margin-right:auto;text-align:center}
.faq .h2{margin-top:32px}
.faq__list{display:flex;flex-direction:column;gap:14px;margin-top:66px;text-align:left}
.qa{background:#f6f8fd;border-radius:28px}
/* the open question is marked with a blue bar on its left edge */
.qa__q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  padding:32px 34px;text-align:left;
  font-size:22px;line-height:calc(141 / 97);font-weight:700;letter-spacing:calc(-1em / 25);color:var(--ink)}
.qa__sign{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:39px;height:39px;border-radius:50%;
  background:#fff;border:1px solid #e7e9f0;color:var(--blue);
  font-size:20px;font-weight:400;line-height:1}
.qa__sign::before{content:"+"}
.qa[open] .qa__sign{width:36px;height:36px;background:var(--blue);border-color:var(--blue);color:#fff}
.qa[open] .qa__sign::before{content:"–"}
.qa__a{padding:0 34px 32px;font-size:16px;line-height:calc(3 / 2);color:var(--text-soft)}
.qa__a p{max-width:790px}

/* ============================================================
   9 — RELATED ARTICLES
   ============================================================ */
.related__head{display:flex;align-items:center;justify-content:space-between;gap:32px}
.related .carousel{margin-top:30px}
.related .track{gap:23px}
.related .post{flex:0 0 410px}
.post__media{overflow:hidden}
.post__media img{width:100%;height:100%;object-fit:cover}

.tag-pill{
  display:inline-flex;align-items:center;height:29px;padding:0 15px;
  border-radius:var(--pill);background:var(--blue);color:#fff}
.tag-pill,.tag-text,.post__cat{
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.tag-text{color:var(--blue)}
.meta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:35px;border-top:1px solid #edf0f8;
  font-size:14px;line-height:calc(12 / 7);color:#8b93a7}
.meta__time{display:flex;align-items:center;gap:9px}
.meta svg{flex:none;width:15px;height:15px;color:#a6abba}
.post{
  display:flex;flex-direction:column;
  padding:20px;background:#fff;border:1px solid #e3e8f5;border-radius:32px}
/* the same placeholder shot as the design, cropped in % so it scales */
.post__media{aspect-ratio:371 / 232;border-radius:24px;background:#f6f8fd;border:1px solid #e3e8f5}
.post__cat{margin-top:22px;color:var(--blue)}
.post__title{margin-top:9px;font-size:22px;line-height:32px;font-weight:700;letter-spacing:calc(-1em / 25)}
.post__text{margin-top:9px;margin-bottom:29px;font-size:14px;line-height:calc(12 / 7);color:var(--text-soft)}
/* margin-top:auto drops the link to the foot of the card so the row lines up
   no matter how long each excerpt runs */
.post__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;
  font-size:14px;font-weight:700;color:var(--ink)}
.post__more span{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;background:var(--ink)}
.post__more svg{width:12px;height:12px}
.post .meta{margin-top:19px;padding-top:19px;font-size:13px}
.post .meta svg{width:14px;height:14px}
/* ============================================================
   CONTACT CARD
   ============================================================ */
.card{
  display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:56px;
  margin-top:48px;padding:60px;
  background:var(--blue);color:#fff;
  border-radius:44px;
  box-shadow:0 56px 92px -64px #2f5bfff2}

/* --- info column --- */
.card__info{display:flex;flex-direction:column}
.card__title{
  font-size:clamp(28px,calc(17vw / 5),42px);line-height:calc(32 / 25);
  font-weight:700;letter-spacing:calc(-1em / 25)}
.card__lead{margin-top:20px;color:var(--on-blue)}
.card__lead + .card__lead{margin-top:24px}

.contacts{margin-top:32px;border-top:1px solid var(--rule-card)}
.contact{
  display:flex;align-items:center;gap:16px;
  min-height:80px;padding:12px 0;
  border-bottom:1px solid var(--rule-card)}
.contact__ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:#ffffff29}
.contact__ico svg{width:18px;height:18px}
.contact__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact__label{
  font-size:12px;line-height:calc(5 / 4);font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  color:#ffffffb2}
.contact__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sits at the foot of the column, as in the design */
.worldwide{
  display:flex;align-items:center;gap:12px;
  margin-top:auto;padding-top:32px;
  font-weight:600;color:#ffffffe6}
.worldwide svg{width:16px;height:16px;flex:none}

/* --- form column --- */
.form{display:flex;flex-direction:column}
.form > * + *{margin-top:32px}

.form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 36px}
.field{display:block;padding-bottom:8px;border-bottom:1px solid var(--rule-field)}
.field input,.field textarea{
  display:block;width:100%;
  font-size:14px;line-height:calc(12 / 7);color:#fff}
.field textarea{height:84px;resize:none}
.field ::placeholder{color:#ffffffb8;opacity:1}

.group__title{font-weight:600}
.options{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:8px}

.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;line-height:calc(12 / 7)}
.radio input{
  width:16px;height:16px;flex:none;cursor:pointer;
  border:1px solid #ffffffb2;border-radius:50%}
.radio input:checked{background:#fff;box-shadow:inset 0 0 0 4px var(--blue)}

.group--chips{margin-top:24px}
.group--chips .options{gap:12px;margin-top:12px}
.chip{display:inline-grid}
.chip input{grid-area:1 / 1;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{grid-area:1 / 1;
  display:inline-flex;align-items:center;
  height:40px;padding:0 18px;
  font-size:14px;
  border:1px solid #ffffff8c;border-radius:var(--pill)}
.chip input:checked + span{background:#ffffff2e;border-color:#fff}

.form__area{margin-top:12px}

.form__actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:24px 40px;
  margin-top:40px}
.form__note{max-width:280px;font-size:14px;line-height:calc(12 / 7);color:#ffffffc7}


/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  container-type:inline-size;
  margin-top:120px;padding:56px 40px 0;
  background:var(--ink);color:var(--grey);
  border-radius:36px;overflow:hidden}
.foot__grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:36px 44px}
/* the subscribe block is one vertical pair spanning both rows */
.foot__sub{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:40px}

.foot__nav{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:14px;line-height:calc(12 / 7)}
.foot__nav a{color:#94979d;white-space:nowrap;transition:color 180ms ease}
.foot__nav a:focus-visible{color:#fff;font-weight:700}
@media (hover:hover){.foot__nav a:hover{color:#fff;font-weight:700}}

.foot__meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.foot__meta .foot__mail{margin-left:24px}

.socials{display:flex;gap:10px}
.socials a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#1e212d;border:1px solid #3f4357}
.socials .ig svg{width:20px;height:20px}
.socials .tg svg{width:22px;height:22px}
.socials .fb svg{width:26px;height:26px}

.foot__privacy{text-decoration:underline}
.foot__privacy,.foot__copy,.foot__weekly{font-size:14px;line-height:calc(12 / 7)}
.foot__weekly{color:#fff}

.subscribe{display:flex;gap:8px;max-width:300px}
.subscribe input{
  flex:1;min-width:0;height:40px;padding:0 18px;
  font-size:14px;color:#fff;
  background:#14161f;border:1px solid #1e2130;border-radius:var(--pill)}
.subscribe input::placeholder{color:#6b7280;opacity:1}
.subscribe button{
  flex:none;height:40px;padding:0 22px;
  font-size:12px;font-weight:700;color:#fff;
  background:var(--blue);border-radius:var(--pill)}
.foot__mail{
  color:#fff;text-decoration:underline;
  font-size:22px;line-height:calc(29 / 20);font-weight:700;letter-spacing:calc(-1em / 25)}

.foot__big{
  margin-top:56px;
  font-size:clamp(48px,18vw,280px);      
  font-size:min(280px,24cqw);            
  
  line-height:calc(4 / 5);height:calc(33em / 50);overflow:hidden;
  font-weight:600;letter-spacing:calc(-1em / 20);color:#fff;
  text-align:center;white-space:nowrap}



/* ============================================================
   INTERACTION — colour only, no movement
   ============================================================ */
.btn,.btn .btn__ico,.socials a,.subscribe button,.chip span,.radio input,
.field,.subscribe input,.brand,.contact__value,.foot__mail,.foot__privacy{
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,opacity 180ms ease}

@media (hover:hover){
  /* header CTA */
  .btn--dark:hover{background:#222839}
  .btn--dark:hover .btn__ico{background:#5578ff}

  /* primary CTA on the card */
  .btn--white:hover{background:#eaf0ff}

  /* subscribe */
  .subscribe button:hover{background:#5578ff}
  .subscribe input:hover{border-color:#2a2e42}

  /* choice controls */
  .chip:hover span{background:#ffffff1a;border-color:#ffffffe6}
  .chip:hover input:checked + span{background:#ffffff42}
  .radio:hover input{border-color:#fff}

  /* social buttons */
  .socials a:hover{background:#262b3b;border-color:#5a6079}

  /* text fields */
  .field:hover{border-color:#ffffffbf}

  .burger:hover{background:#0b0f190f}

  /* links */
  .brand:hover{opacity:85%}
  .contact__value:hover{opacity:75%}
  .foot__mail:hover{opacity:80%}
  .foot__privacy:hover{color:#fff}
}

/* selected chip stays above the hover tint */
.chip input:checked + span{background:#ffffff2e;border-color:#fff}

/* keyboard focus mirrors hover on the fields */
.field:focus-within{border-color:#fff}
.subscribe input:focus{border-color:#3a3f55}

/* press — one step further in the same direction */
.btn--dark:active{background:#2b3245}
.btn--white:active{background:#d7e1ff}
.subscribe button:active{background:#6684ff}
.socials a:active{background:#2e3446}
.chip:active span{background:#ffffff29}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}



/* --- interaction for the new blocks (colour only) --- */
.arrow,.tag,.svc,.qa__q,.qa__sign,.case,.review,.step{
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,opacity 180ms ease}
@media (hover:hover){
  .btn--primary:hover,.btn--case:hover,.btn--blue:hover{background:#4a6bff}
  .btn--ghost:hover{background:#f4f6ff;border-color:#d7ddf0}
  .arrow:not([disabled]):hover{border-color:#c8d2ea;color:#8b93a7}
  .arrow--next:not([disabled]):hover{background:#4a6bff;border-color:#4a6bff;color:#fff}
  .shot__go:hover{background:#4a6bff}
  .tag:hover{border-color:#c8d2ea}
  .tag--fill:hover{background:#dbe4ff;border-color:#dbe4ff}
  .tag--mute:hover{border-color:#e7e9f0;color:#a6abba}
  .qa__q:hover{color:var(--blue)}
  .qa__q:hover .qa__sign{border-color:var(--blue)}
  .qa[open] .qa__q:hover .qa__sign{background:#4a6bff}
  .niche:hover{box-shadow:0 10px 24px #1419321a}
  .case:hover,.review:hover{box-shadow:0 10px 32px #2f5bff29}
  .post:hover{border-color:var(--blue)}
  .post:hover .post__more{color:var(--blue)}
  .post:hover .post__more span{background:var(--blue)}
}
.btn--primary:active,.btn--case:active,.btn--blue:active{background:#6684ff}
.btn--ghost:active{background:#e9eeff}

/* ============================================================
   BREAKPOINTS — the desktop layer above is left untouched
   ============================================================ */
/* between 1200 and the full 1440 layer the illustration block keeps the
   design's proportions, so the connectors stay on their dots */
@media (min-width:1200px) and (max-width:1439px){
  .hero{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:40px}
  .hero__art{display:grid;grid-template-columns:166fr 67fr 523fr;gap:0}
  .niches{width:auto}
  .engine-wrap{grid-column:3}
}

@media (max-width:1199px){
  .sec{margin-top:96px}
  .hero{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px;margin-top:64px}
  .hero__cta{flex-direction:row;flex-wrap:wrap;gap:16px}
  .btn--primary,.btn--ghost{min-width:0;padding:0 28px}
  .hero__art{gap:32px}
  .niches{width:152px}
  .niches__list{gap:16px}
  .wires{display:none}
  .panel{padding:32px}
  .sec__aside{gap:28px}
  .track{gap:32px}
  .case{flex:0 0 340px}
  .marquee{margin-top:72px}
  .prob,.prob--flip{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;column-gap:32px;margin-top:64px}
  /* the closing line sits opposite the "Our advantage" box and shares its
     row, so the two read as a pair: equal top margins plus align-self:center
     put the line's centre exactly on the box's centre */
  .prob__col{display:contents}
  .prob__shot{grid-column:1;grid-row:1}
  .prob__body{grid-column:2;grid-row:1}
  .advantage{grid-column:2;grid-row:2;align-self:start;margin-top:40px}
  .kicker{grid-column:1;grid-row:2;align-self:center;margin-top:40px}
  .prob--flip .prob__shot,.prob--flip .kicker{grid-column:2}
  .prob--flip .prob__body,.prob--flip .advantage{grid-column:1}
  .cols{gap:24px;margin-top:40px}
  /* the closing line sits flush with the "Our advantage" box instead of
     hanging off the rule, which reads badly once it wraps */
  .kicker{flex-direction:column;align-items:flex-start;gap:14px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services__aside{padding-top:24px}
  /* the heading moves beside step 01 and the picture drops to the foot of
     the column; stretching the step list keeps both columns ending together */
  .process__body{display:contents}
  .process{grid-template-columns:minmax(0,539fr) minmax(0,683fr);grid-template-rows:auto 1fr;column-gap:36px;row-gap:0}
  .process__head{grid-column:1;grid-row:1}
  .process__title{text-wrap:balance}
  .shot{grid-column:1;grid-row:2;align-self:end;margin-top:32px}
  .steps{grid-column:2;grid-row:1/-1;align-self:stretch;justify-content:space-between;margin-top:0}
  .says{padding:40px 32px 32px}
  .says .track{gap:28px}
  .review{flex:0 0 340px}
  .faq__list{margin-top:44px}
  .qa__q{padding:24px 26px;font-size:20px}
  .qa__a{padding:0 26px 24px}
  .related .post{flex:0 0 340px}
}

@media (max-width:899px){
  .sec{margin-top:72px}
  .h2,.hero__title,.prob__title{text-wrap:balance}
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px;text-align:left}
  .hero__text{max-width:none}
  .hero__art{flex-direction:column-reverse;align-items:stretch;gap:28px}
  .engine-wrap{flex:none;max-width:520px;width:100%;margin:0 auto}
  .niches{width:auto}
  .niches__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px}
  .niche{flex:0 1 200px;padding-left:20px}
  .niche__ico{margin-left:0}
  .panel{padding:24px 20px}
  .sec__head{gap:20px}
  .sec__aside{gap:20px;padding-top:0;width:100%;justify-content:space-between}
  .carousel{margin-top:24px}
  .track{gap:20px}
  .case{flex:0 0 300px;padding:14px}
  .case__text{margin-bottom:24px}
  .case__stats{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:auto;padding-top:20px}
  .tag{height:44px;padding:0 18px;font-size:14px}
  .probs__head{flex-direction:column;gap:14px}
  .probs__head .lead{max-width:none;padding-top:0}
  .prob,.prob--flip{
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    row-gap:28px;margin-top:48px}
  .prob__col{display:block}
  .prob__shot,.prob__col,
  .prob--flip .prob__shot,.prob--flip .prob__col{
    grid-column:1;grid-row:auto;align-self:auto}
  .cols{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
  .advantage{margin-top:32px}
  .services{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:40px}
  .svc{min-height:0;padding:26px 22px}
  .svc__text{padding-top:20px}
  .services__head .h2{max-width:none}
  .services__aside{width:100%;justify-content:space-between;gap:16px}
  .process__body{display:block}
  .process{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:28px}
  .shot{grid-column:1;grid-row:auto;align-self:auto;margin-top:0}
  .steps{margin-top:32px}
  .pill-badge{margin:20px 0 0 20px}
  .step{gap:18px;padding:18px}
  .step__body h3{font-size:20px}
  .says{padding:28px 20px 24px;border-radius:28px;background-image:none}
  .says .carousel{margin-top:28px}
  .review{flex:0 0 290px;padding:20px}
  .says__foot{flex-wrap:wrap;gap:14px}
  .faq .h2{margin-top:20px}
  .faq__list{margin-top:32px;gap:10px}
  .qa{border-radius:22px}
  .qa__q{gap:16px;padding:20px;font-size:18px}
  .qa__sign{width:34px;height:34px}
  .qa[open] .qa__sign{width:34px;height:34px}
  .qa__a{padding:0 20px 20px;font-size:15px}
  .related .post{flex:0 0 300px}
  .related__head{gap:16px}
  .rail{margin-top:24px}
}

@media (max-width:599px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .btn--primary,.btn--ghost{width:100%}
  .niches__list .niche{flex:1 1 100%}
  .case,.review,.related .post{flex:0 0 100%}
  .br-m{display:inline}
  .faces{display:none}
  .services__aside{justify-content:flex-start}
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:1199px){
  .nav{gap:24px}
  .hero{margin-top:96px}
  .card{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;padding:48px}
  .foot{margin-top:96px;padding:48px 32px 0}
  .foot__grid{grid-template-columns:auto minmax(0,1fr);gap:32px 36px}
  .foot__sub{grid-column:1/-1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px}
}

@media (max-width:899px){
  .page{padding:16px 0 40px}
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:60px auto;align-items:center;min-height:60px;padding:0 8px 0 16px;border-radius:30px}
  .brand{gap:8px}
  .brand__mark{width:34px;height:31px}
  .brand__name{font-size:18px}

  .burger{display:flex}

  .menu{grid-column:1 / -1;display:flex;flex-direction:column;max-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:max-height 300ms ease,opacity 200ms ease,visibility 300ms}
  .topbar.is-open .menu{max-height:480px;visibility:visible;opacity:100%}

  .nav{
    display:flex;flex-direction:column;flex:none;
    align-items:stretch;gap:2px;font-size:15px;padding-top:8px;border-top:1px solid #edf0f8}
  .nav a{display:block;padding:12px 16px;border-radius:14px;color:var(--nav)}
  .nav a::before{display:none}
  .nav a:focus-visible{background:#0b0f190d;color:var(--nav-active)}
  .nav a:active{background:#0b0f1914}

  .btn--dark{width:100%;justify-content:center;margin:8px 0 16px;padding:0 6px 0 14px}
  .hero{margin-top:56px}
  .card{grid-template-columns:minmax(0,1fr);margin-top:32px;padding:32px 24px;gap:40px;border-radius:28px}
  .form__grid{grid-template-columns:minmax(0,1fr)}
  .worldwide{margin-top:0}
  .foot{margin-top:64px;padding:40px 24px 0;border-radius:28px}
  .foot__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot__sub{flex-direction:column;align-items:flex-start;gap:16px}
  /* the form spans the column instead of sizing to its content, which
     on narrow phones was wider than the footer itself */
  .subscribe{width:100%}
  .foot__meta .foot__mail{margin-left:0}
  .btn--white{width:100%;justify-content:center;padding:0 24px}
  .foot__big{margin-top:40px}
}

/* very narrow phones: the mark alone carries the brand */
@media (max-width:359px){
  .brand__name{display:none}
}

/* the collapsed menu: highlight on hover only, never on tap */
@media (max-width:899px) and (hover:hover){
  .nav a:hover{background:#0b0f190d;color:var(--nav-active)}
}


/* ============================================================
   MOTION — entrance, reveal on scroll, CTA shine.
   Opacity and transform only; everything is switched off for
   visitors who ask for reduced motion.
   ============================================================ */
@keyframes hrs-rise{from{opacity:0;transform:translate3d(0,22px,0)}}
@keyframes hrs-fade{from{opacity:0}}
@keyframes hrs-shine{0%{background-position:150% 0}30%,100%{background-position:-50% 0}}
@keyframes hrs-pop{from{opacity:0;transform:translate3d(0,16px,0) scale(98%)}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .site-header{animation:hrs-fade 600ms ease both}
  .hero__copy > *{animation:hrs-rise 800ms ease-out both}
  .hero__copy > *:nth-child(2){animation-delay:90ms}
  .hero__copy > *:nth-child(3){animation-delay:180ms}
  .hero__copy > *:nth-child(4){animation-delay:270ms}
  .hero__copy > *:nth-child(5){animation-delay:360ms}
  .hero__copy > *:nth-child(6){animation-delay:450ms}
  .hero__copy > *:nth-child(7){animation-delay:540ms}
  .hero__copy > *:nth-child(8){animation-delay:630ms}
  .hero__art{animation:hrs-fade 1000ms ease-out 250ms both}
  .hero__copy > .cta-shine{animation:hrs-rise 800ms ease-out both,hrs-shine 5500ms ease-in-out 1400ms infinite}

  /* reveal on scroll: the script only ever hides blocks that start below
     the fold, then takes the classes off again once they have arrived */
  .rv:not(.is-in){opacity:0;transform:translate3d(0,28px,0)}
  .rv{transition:opacity 700ms ease-out,transform 800ms ease-out !important;
      transition-delay:var(--rv-d,0ms) !important}
  .rv:not(.is-in) .rv-img{scale:107%}
  .rv .rv-img{transition:scale 1300ms ease-out var(--rv-d,0ms) !important}

  /* a soft light sweeping across the main call-to-action buttons: a gradient
     layer on the button's own background, moved with background-position */
  .cta-shine{
    background-image:linear-gradient(100deg,#fff0 43%,#ffffff57 50%,#fff0 57%) !important;
    background-size:300% 100% !important;background-repeat:no-repeat !important;
    background-position:150% 0;animation:hrs-shine 5500ms ease-in-out 1400ms infinite}
  .btn--white.cta-shine{background-image:linear-gradient(100deg,#2f5bff00 43%,#2f5bff24 50%,#2f5bff00 57%) !important}
  dialog.audit[open]{animation:hrs-pop 300ms ease-out}
  dialog.audit[open]::backdrop{animation:hrs-fade 300ms ease}
}
#contact{scroll-margin-top:24px}
/* footer: with Terms of Service next to Privacy Policy the e-mail takes its own
   line, so it starts flush left instead of keeping its in-row offset */
.foot__meta .foot__mail{margin-left:0}

/* ============================================================
   CONSENT CHECKBOX
   ============================================================ */
.consent{display:flex;align-items:flex-start;gap:10px;max-width:340px;cursor:pointer;
  font-size:14px;line-height:calc(3 / 2);color:#ffffffd6}
.consent input{
  flex:none;width:18px;height:18px;margin:1px 0 0;cursor:pointer;
  border:1px solid #ffffffb2;border-radius:5px;background:transparent center / 12px 12px no-repeat;
  transition:background-color 180ms ease,border-color 180ms ease}
.consent input:checked{
  background-color:#fff;border-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M25 62l24 24 46-49' fill='none' stroke='%232f5bff' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.consent a{color:#fff;text-decoration:underline}
.consent--dark{max-width:none;color:var(--grey)}
.consent--dark input{border-color:#3a3f55;background-color:#14161f}
.consent--dark input:checked{
  background-color:var(--blue);border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M25 62l24 24 46-49' fill='none' stroke='%23fff' stroke-width='18' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rts__consent{grid-column:1 / -1}
@media (hover:hover){
  .consent:hover input{border-color:#fff}
  .consent--dark:hover input:not(:checked){border-color:#5a6079}
  .consent a:hover{opacity:80%}
}

/* ============================================================
   FORM STATES — sending / sent / error
   ============================================================ */
form[data-lead][aria-busy="true"] [type="submit"]{opacity:60%;cursor:progress}
form[data-lead][hidden],input[name="_honey"]{display:none !important}
.form-done{display:flex;flex-direction:column;gap:8px;font-size:18px;line-height:calc(13 / 9);font-weight:700;letter-spacing:calc(-1em / 50)}
.form-done span{font-size:16px;line-height:calc(13 / 8);font-weight:400;letter-spacing:0;opacity:84%}
.audit .form-done{margin-top:32px}
.foot .form-done{font-size:14px;line-height:calc(12 / 7);color:#fff}
.form-error{margin-top:12px;font-size:14px;line-height:calc(3 / 2);color:#ffd5d5}
.form-error a{color:#fff;text-decoration:underline}
.rts .form-error{grid-column:1 / -1;margin-top:0}

@media (min-width:1200px){body{background:repeating-linear-gradient(to right,#2f5bff17 0 1px,#2f5bff00 1px 75px) right top / 47% 803px no-repeat,repeating-linear-gradient(to bottom,#2f5bff17 0 1px,#2f5bff00 1px 75px) right top / 47% 803px no-repeat,radial-gradient(circle 1000px at -50px -210px,#2f5bff1f 0,#2f5bff1c 150px,#2f5bff14 300px,#2f5bff0c 450px,#2f5bff06 600px,#2f5bff02 750px,#2f5bff01 900px,#2f5bff00 1000px) no-repeat,radial-gradient(circle 1000px at calc(100% - 18px) -244px,#2f5bff15 0,#2f5bff13 150px,#2f5bff0e 300px,#2f5bff08 450px,#2f5bff04 600px,#2f5bff02 750px,#2f5bff01 900px,#2f5bff00 1000px) no-repeat,#fff}}

.pill-badge__shape{grid-area:1 / 1;width:40px;height:49px}
.pill-badge__text{grid-area:1 / 1;align-self:start;display:inline-flex;align-items:center;height:29px;margin-left:23px;padding:0 12px 0 13px;background:#fff;border-radius:var(--pill);font-size:14px;line-height:calc(8 / 5);color:#1f1f1f}

.qa[open]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 75'%3E%3Crect width='4' height='75' rx='2' fill='%232f5bff'/%3E%3C/svg%3E") left center / 4px auto no-repeat,#f6f8fd}
@media (max-width:899px){.qa[open]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 56'%3E%3Crect width='4' height='56' rx='2' fill='%232f5bff'/%3E%3C/svg%3E")}}

/* ============================================================
   CAROUSELS IN A PANEL — the row runs to the panel's edges,
   so card shadows are never cut and the next card slides out
   from under the panel border instead of a hard inner line.
   The row itself is the flex scroller, so its side padding is
   kept at both ends of the scroll.
   ============================================================ */
.panel[data-carousel],.says{--edge:44px;--gap:69px;padding-inline:0}
.says{--edge:64px;--gap:45px}
.panel[data-carousel] > :not(.carousel),.says > :not(.carousel){margin-inline:var(--edge)}
.panel[data-carousel] > .carousel,.says > .carousel{
  display:flex;gap:var(--gap);padding:24px var(--edge) 36px;scroll-padding-inline:var(--edge)}
.panel[data-carousel] .track,.says .track{display:contents;gap:var(--gap)}
.panel[data-carousel] > .carousel{margin-top:14px}
.says > .carousel{margin-top:20px}
.panel[data-carousel] > .rail{margin-top:0}
.says > .says__foot{margin-top:2px}
@media (max-width:1199px){
  .panel[data-carousel]{--edge:32px;--gap:32px}
  .says{--edge:32px;--gap:28px}
}
@media (max-width:899px){
  .panel[data-carousel]{--edge:20px;--gap:20px}
  .says{--edge:20px}
  .panel[data-carousel] > .carousel{margin-top:0}
  .says > .carousel{margin-top:4px}
}