:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #030405;
  color: #f3f1ed;
  --accent: #ff4b1f;
  --blue: #287dff;
  --line: #2b2d31;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #030405; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero, .screen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #030405;
}

.screen {
  min-height: 0;
  height: min(100svh, 56.28vw);
}

.hero-stage, .screen-stage {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(100%, 177.68vh);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  container-type: size;
}

.hero__reference, .screen-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.hero__reference {
  transform: none;
}
.screen-stage { overflow: hidden; }
.screen-stage > img {
  transform: scale(1.003);
}
.desktop-hotspots { position: absolute; inset: 0; }
.hotspot, .screen-hotspot { position: absolute; z-index: 3; display: block; border: 0; background: transparent; cursor: pointer; }
.nav-glow { border-radius: 4px; transition: background-color .24s ease, box-shadow .24s ease, filter .24s ease; }
.nav-glow:hover { background: rgba(255,75,31,.055); box-shadow: 0 0 22px rgba(255,75,31,.22); filter: brightness(1.08); }
.button-hit { overflow: visible; border: 0; border-radius: 6px; transition: background-color .22s, box-shadow .22s, filter .22s, transform .22s; }
.button-hit:hover {
  background: rgba(255, 76, 29, .12);
  box-shadow: 0 0 18px rgba(255, 74, 30, .52), 0 10px 30px rgba(255, 48, 15, .24);
  filter: brightness(1.3) saturate(1.15);
  transform: translateY(-3px) scale(1.015);
}
.card-clickable {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color .24s, background-color .24s, box-shadow .24s, transform .24s, filter .24s;
}
.card-clickable:hover {
  border-color: rgba(255, 83, 38, .92);
  background: rgba(255, 72, 28, .035);
  box-shadow: 0 0 26px rgba(255, 70, 26, .28), inset 0 0 34px rgba(255, 70, 26, .08);
  filter: brightness(1.08);
  transform: translateY(-4px);
}
#services .card-clickable:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 83, 38, .92), inset 0 0 34px rgba(255, 70, 26, .08);
  transform: none;
}
.button-hit::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 55%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffb095;
  box-shadow: 11px -5px #ff5a2d, 23px 4px #ffd2c2;
  opacity: 0;
  pointer-events: none;
}
.button-hit:hover::after { animation: button-spark 1.05s ease-out infinite; }
@keyframes button-spark {
  0% { opacity: 0; transform: translateX(0) scale(.5); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translateX(75px) scale(1.15); }
}

.desktop-brand {
  position: absolute;
  z-index: 5;
  left: 2.15%;
  top: 1.7%;
  display: flex;
  align-items: center;
  width: 24.5%;
  height: 6.2%;
  color: #f4f2ee;
  background: #030405;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.75cqi;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.desktop-brand span, .footer-brand span { margin: 0 9px; color: var(--accent); }
.signature-patch {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.signature-patch img {
  position: absolute;
  width: 100cqw;
  height: 100cqh;
  max-width: none;
  object-fit: fill;
  user-select: none;
}
.responsibility-signature-patch { left: 74.2%; top: 84.5%; width: 22.8%; height: 10.5%; }
.responsibility-signature-patch img { left: -74.2cqw; top: -84.5cqh; }
.hotspot--discuss { left: 81.2%; top: 2.5%; width: 15%; height: 5.5%; }
.hotspot--audit { left: 3%; top: 68.2%; width: 22.5%; height: 8%; }
.hotspot--cases { left: 27.8%; top: 69%; width: 12%; height: 6%; }
.hotspot--nav-cases { left: 31.6%; top: 2.5%; width: 5%; height: 5%; }
.hotspot--nav-services { left: 39.2%; top: 2.5%; width: 5.5%; height: 5%; }
.hotspot--nav-steps { left: 47.4%; top: 2.5%; width: 5%; height: 5%; }
.hotspot--nav-contacts { left: 55.2%; top: 2.5%; width: 6%; height: 5%; }
.mobile-header, .mobile-menu, .mobile-copy, .mobile-headline, .mobile-lead, .mobile-hero-visual { display: none; }
.responsive-copy, .contact-responsive-copy { display: none; }

.case-hit-1 { left: 2.5%; top: 45%; width: 33.2%; height: 45.8%; }
.case-hit-2 { left: 36.65%; top: 45%; width: 30.3%; height: 45.8%; }
.case-hit-3 { left: 67.9%; top: 45%; width: 29.7%; height: 45.8%; }
.case-copy {
  position: absolute;
  z-index: 2;
  /* starts just above the old baked figures (y≈622 of 941) rather than well
     before them, so ~26px more photo stays visible; the bottom edge is unchanged
     at 90.3%, so the copy itself does not move */
  top: 65%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 25.3%;
  padding: 0 1.85cqi 2.1cqi;
  color: #f3f1ed;
  /* the lower half of every case card is this panel, not the photo — keeping it
     at near-black made the cards read as holes, so it now sits just above the
     page background and matches the fill painted into the PNG beneath it */
  background: linear-gradient(to bottom, rgba(6,9,12,.94), #0a0d10 24%, #0e1115 100%);
  pointer-events: none;
}
.case-copy-1 { left: 2.5%; width: 33.2%; }
.case-copy-2 { left: 36.65%; width: 30.3%; }
.case-copy-3 { left: 67.9%; width: 29.7%; }
.case-copy::before { content:""; position:absolute; right:0; bottom:100%; left:0; height:2.1cqi; background:linear-gradient(to bottom,transparent,rgba(6,9,12,.94)); }
.case-copy strong { font-size: 3.05cqi; line-height: 1.05; font-weight: 500; white-space: nowrap; }
.case-copy span { margin-top: .8cqi; color: #d4d5d6; font-size: 1.22cqi; line-height: 1.25; }
.case-copy em { width: max-content; margin-top: 2.25cqi; padding-bottom: .52cqi; border-bottom: 2px solid var(--accent); font-size: 1.05cqi; font-style: normal; }
.case-copy-2 strong { font-size: 2.52cqi; }
.case-copy-3 strong { font-size: 3.18cqi; }
.screen-stage:has(.case-hit-1:hover) .case-copy-1,
.screen-stage:has(.case-hit-2:hover) .case-copy-2,
.screen-stage:has(.case-hit-3:hover) .case-copy-3 { filter: brightness(1.1); }
.niche-hit-1 { left: 2.15%; top: 34.33%; width: 30.98%; height: 62.27%; }
.niche-hit-2 { left: 34.39%; top: 34.33%; width: 30.56%; height: 62.27%; }
.niche-hit-3 { left: 66.21%; top: 34.33%; width: 31.58%; height: 62.27%; }
.management-hit {
  left: 2.55%;
  top: 50.3%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22.5%;
  height: 8.5%;
  gap: .7cqw;
  border: 1px solid #3c8dff;
  color: #f4f6fa;
  background: #0b1b38;
  box-shadow: 0 0 18px rgba(40,125,255,.24);
  font-size: 1.1cqw;
  text-transform: uppercase;
}
.management-hit span { font-size: 1.35cqw; line-height: 1; }
.management-hit::after { background: #d5eaff; box-shadow: 11px -5px #4c9bff, 23px 4px #9dccff; }
.management-hit:hover {
  border-color: #71adff;
  color: #fff;
  background: #16498c;
  box-shadow: 0 0 24px rgba(47,135,255,.7), 0 12px 30px rgba(20,77,157,.42);
  filter: brightness(1.12);
  transform: translateY(-3px) scale(1.015);
}
.cycle-hit { left: 2.45%; top: 79%; width: 38.9%; height: 9.6%; }
.step-hit-1 { left: 23.7%; top: 42.7%; width: 3.7%; height: 6.8%; border-radius: 50%; }
.step-hit-2 { left: 50.6%; top: 42.7%; width: 3.7%; height: 6.8%; border-radius: 50%; }
.step-hit-3 { left: 77.3%; top: 42.7%; width: 3.7%; height: 6.8%; border-radius: 50%; }
.next-hit { left: 78.4%; top: 34.7%; width: 18.6%; height: 35.2%; }
.ai-hit-1 { left: 51.65%; top: 33.1%; width: 21.5%; height: 21.2%; }
.ai-hit-2 { left: 74.9%; top: 33.1%; width: 21.2%; height: 21.2%; }
.ai-hit-3 { left: 51.65%; top: 56.9%; width: 21.5%; height: 20.7%; }
.ai-hit-4 { left: 74.9%; top: 56.9%; width: 21.2%; height: 20.7%; }
.chat-hit { left: 41.6%; top: 83.3%; width: 3%; height: 5.2%; }
.ai-chat-panel {
  position: absolute;
  z-index: 4;
  left: 2.4%;
  top: 36.5%;
  display: grid;
  grid-template-rows: repeat(4, auto) 1fr;
  gap: 1.1cqh;
  width: 44.2%;
  height: 55.8%;
  padding: 2.2cqh 1.7cqw;
  border: 1px solid #2e3034;
  border-radius: 8px;
  background: #07090b;
  box-shadow: 0 18px 42px rgba(0,0,0,.36);
}
.ai-message {
  position: relative;
  min-height: 6.8cqh;
  padding: 1.25cqh 4.5cqw 1.25cqh 1.2cqw;
  border: 1px solid #272a2e;
  border-radius: 6px;
  color: #e4e5e7;
  background: #101215;
  font-size: 1.02cqw;
  line-height: 1.35;
}
.ai-message b { color: var(--accent); font-weight: 500; }
.ai-message.bot { border-left-color: var(--accent); background: #111316; }
.ai-message time { position: absolute; right: 1.1cqw; top: 1.25cqh; color: #72757a; font-size: .82cqw; }
.ai-chat-input {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.8cqh;
  padding-left: 1.2cqw;
  border: 1px solid #2b2e32;
  border-radius: 6px;
  color: #777a7f;
  background: #050607;
  font-size: .95cqw;
}
.ai-chat-input .ai-chat-send { display: grid; place-items: center; width: 4.4cqh; height: 4.4cqh; margin-right: .7cqw; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); background: #0a0b0d; pointer-events: none; }
.responsibility-hit-1 { left: 38.1%; top: 32.5%; width: 28.2%; height: 18.1%; }
.responsibility-hit-2 { left: 67.9%; top: 32.5%; width: 27.5%; height: 18.1%; }
.responsibility-hit-3 { left: 38.1%; top: 53.2%; width: 28.2%; height: 17.5%; }
.responsibility-hit-4 { left: 67.9%; top: 53.2%; width: 27.5%; height: 17.5%; }
.responsibility-cta { left: 38.1%; top: 75.7%; width: 57.3%; height: 8.2%; }
.responsibility-copy-cover {
  position: absolute;
  z-index: 3;
  left: 77.1%;
  top: 18.5%;
  width: 20.8%;
  height: 10%;
  background: #030405;
}
.responsibility-subtitle {
  position: absolute;
  z-index: 4;
  left: 38.1%;
  top: 28.8%;
  width: 57.3%;
  margin: 0;
  color: #d8d9db;
  background: #030405;
  font-size: 1.3cqw;
  line-height: 1.35;
  letter-spacing: 0;
}
.numberless::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 1.8%;
  top: 3.2%;
  width: 22%;
  height: 6.8%;
  background: #030405;
  pointer-events: none;
}
#services .numberless::before {
  top: 2.8%;
  height: 5.8%;
}
.mobile-services { display: none; }

.feature-toast {
  position: absolute;
  z-index: 5;
  right: 4%;
  bottom: 4%;
  max-width: 35%;
  padding: 1.2cqh 1.5cqw;
  border: 1px solid var(--blue);
  border-radius: 6px;
  color: #fff;
  background: rgba(5, 8, 13, .94);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.feature-toast.is-visible { opacity: 1; transform: translateY(0); }

.reviews-section {
  position: relative;
  overflow: hidden;
  width: min(100%, 177.68vh);
  min-height: 100svh;
  margin-inline: auto;
  padding: 52px 0 30px;
  border-block: 1px solid #0d0f11;
  background: #030405;
}
.reviews-shell {
  position: relative;
  z-index: 1;
  width: min(95.3%, 1600px);
  margin: 0 auto;
}
.reviews-ribbon {
  position: absolute;
  z-index: 0;
  top: -270px;
  right: -170px;
  width: 690px;
  height: 370px;
  border-bottom: 17px solid #e85027;
  border-radius: 50%;
  box-shadow: 0 9px 0 #8f2817, 0 18px 0 #3d1510;
  transform: rotate(10deg);
  pointer-events: none;
}
.reviews-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin: 0 0 38px;
}
.reviews-heading > div:first-child { min-width: 0; }
.reviews-label { margin: 0 0 13px; color: var(--accent); font-size: 15px; font-weight: 700; letter-spacing: 5px; }
.reviews-heading h2 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 58px; font-weight: 600; line-height: 1.06; letter-spacing: 0; white-space: normal; }
.reviews-heading > div:first-child > p:last-child { margin: 10px 0 0; color: #b8b9bb; font-size: 20px; }
.reviews-rating { display: grid; flex: 0 0 220px; justify-items: start; padding: 16px 18px; border: 1px solid #303338; border-radius: 8px; background: #111315; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.reviews-rating strong { font-size: 50px; line-height: .9; font-weight: 700; }
.reviews-rating span { margin-top: 10px; color: #8b8d91; font-size: 11px; letter-spacing: 2px; }
.reviews-rating b { margin-top: 9px; color: #ffc21c; font-size: 20px; letter-spacing: 3px; }
.reviews-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; }
.review-card {
  display: flex;
  flex-direction: column;
  min-height: 315px;
  padding: 16px 20px 18px;
  border: 1px solid #303338;
  border-radius: 8px;
  background: #131517;
}
.review-card header { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #292c30; }
.review-card header div { min-width: 0; }
.review-card h3 { overflow: hidden; margin: 0; color: #f1f1f1; font-size: 17px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.review-card header p { margin: 4px 0 0; color: #85888d; font-size: 12px; }
.review-card header b { color: #ffc21c; font-size: 12px; letter-spacing: 1px; }
.review-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 700; }
.avatar-s { background: #7a8890; }.avatar-a { background: #9b6e3f; }.avatar-ya { color: #777; background: #e6e3dc; }.avatar-al { background: #3095ef; }
.avatar-mk { background: #a83dcc; }.avatar-max { background: #b7c7c7; }.avatar-z { background: #20bed1; }.avatar-v { background: #936b3d; }
.review-card > p { margin: 15px 0 20px; color: #d0d1d2; font-size: 15px; line-height: 1.35; }
.review-card footer { margin-top: auto; color: var(--accent); font-size: 11px; letter-spacing: 1px; }
.quiz-section { width: min(100%, 177.68vh); min-height: 88svh; display: grid; place-items: center; margin-inline: auto; padding: 48px 40px; border-block: 1px solid #0d0f11; background: #030405; }
.quiz-shell { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; width: min(1320px, 100%); align-items: center; }
.section-label { margin: 0 0 24px; color: var(--accent); font-size: 15px; text-transform: uppercase; }
.quiz-intro h2 { margin: 0; max-width: 650px; font-size: 58px; line-height: 1.08; font-weight: 600; letter-spacing: 0; }
.quiz-intro > p:not(.section-label) { max-width: 570px; margin: 28px 0; color: #c7c8ca; font-size: 20px; line-height: 1.55; }
.quiz-benefit { display: flex; align-items: center; gap: 14px; color: #d7d8da; text-transform: uppercase; }
.quiz-benefit span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--blue); border-radius: 50%; color: #fff; box-shadow: 0 0 18px rgba(40,125,255,.2); }
.quiz-card { min-height: 550px; padding: 34px; border: 1px solid #34373b; border-radius: 8px; background: #0b0d0f; box-shadow: 0 28px 70px rgba(0,0,0,.42); }
.quiz-top { display: flex; justify-content: space-between; color: #9b9da2; font-size: 13px; }
.quiz-progress { height: 3px; margin: 15px 0 42px; background: #272a2f; }
.quiz-progress i { display: block; width: 20%; height: 100%; background: var(--accent); box-shadow: 0 0 14px rgba(255,75,31,.7); transition: width .25s; }
.quiz-step { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-step.is-active { display: block; }
.quiz-step legend { padding: 0; color: #f4f2ee; font-size: 32px; font-weight: 600; }
.quiz-step > p { margin: 13px 0 32px; color: #aeb0b4; line-height: 1.5; }
.quiz-step > input, .quiz-fields input {
  width: 100%; height: 58px; border: 1px solid #383b40; border-radius: 5px; padding: 0 16px; color: #fff; background: #111418; outline: none;
}
.quiz-step input:focus { border-color: var(--accent); box-shadow: 0 0 15px rgba(255,75,31,.12); }
.quiz-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quiz-fields label { display: grid; gap: 9px; color: #cacbcd; font-size: 14px; }
.quiz-result { display: grid; gap: 10px; margin: 18px 0 26px; padding: 18px; border-left: 2px solid var(--accent); background: #101215; color: #d9dadd; line-height: 1.45; }
.quiz-result strong { color: #fff; }
.quiz-controls { display: flex; justify-content: space-between; gap: 14px; margin-top: 42px; }
.quiz-back { min-width: 110px; min-height: 54px; border: 1px solid #393c41; border-radius: 4px; color: #ddd; background: transparent; cursor: pointer; }
.quiz-back:disabled { opacity: .35; cursor: default; }
.quiz-submit { display: none; }
.quiz-status { min-height: 22px; margin: 18px 0 0; color: #c4c6c9; }

.inline-audit { position: absolute; z-index: 4; left: 59.85%; top: 25.3%; width: 34.35%; height: 46.2%; display: grid; grid-template-rows: repeat(5, 1fr); gap: 3.2%; }
.inline-audit input { min-width: 0; border: 1px solid #33363a; border-radius: 6px; padding: 0 4.6%; color: #f4f2ee; background: rgba(10,12,14,.96); outline: none; }
.inline-audit input:focus { border-color: var(--accent); box-shadow: 0 0 18px rgba(255,75,31,.18); }
.inline-audit button { position: relative; overflow: hidden; border: 1px solid #ff5a24; border-radius: 6px; color: #fff; background: #e84016; box-shadow: 0 0 20px rgba(255,68,20,.3); cursor: pointer; transition: box-shadow .2s, background-color .2s, filter .2s; }
.inline-audit button:hover { background:#ff5123; box-shadow:0 0 28px rgba(255,68,20,.42); filter:brightness(1.08); }
.primary-button:hover { transform:translateY(-2px); background:#ff5123; box-shadow:0 10px 28px rgba(255,68,20,.32); }
.inline-audit p { position: absolute; top: calc(100% + 12px); left: 0; width: 100%; min-height: 1em; margin: 0; color: #bfc1c4; text-align: center; font-size: 12px; }
.footer-brand { position: absolute; z-index: 5; left: 2.25%; top: 86.1%; display: flex; align-items: center; width: 25.5%; height: 6.7%; color: #f4f2ee; background: #030405; font-size: 20px; text-decoration: none; }
.footer-cases { left: 35.1%; top: 86.4%; width: 5.3%; height: 6%; }.footer-services { left: 42.2%; top: 86.4%; width: 5.3%; height: 6%; }.footer-steps { left: 50.3%; top: 86.4%; width: 5.3%; height: 6%; }.footer-contacts { left: 58.1%; top: 86.4%; width: 7%; height: 6%; }

.contact-dialog, .case-dialog { width: min(540px, calc(100% - 32px)); padding: 0; border: 1px solid #31343a; border-radius: 8px; color: #f3f1ed; background: #0b0d0f; box-shadow: 0 22px 80px rgba(0,0,0,.65); }
.contact-dialog::backdrop, .case-dialog::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(5px); }
.contact-form, .case-content { position: relative; display: grid; gap: 18px; padding: 40px; }
.contact-form h2, .case-content h2 { margin: 0; font-size: 34px; letter-spacing: 0; }
.contact-form > p, .case-content > p { margin: 0; color: #b8bac0; line-height: 1.5; }
.contact-form .eyebrow { margin: 0; color: var(--accent); font-size: 13px; }
.contact-form label { display: grid; gap: 8px; color: #d6d7d9; font-size: 14px; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #33363c; border-radius: 4px; padding: 14px 15px; color: #fff; background: #111418; outline: none; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.dialog-close, .case-close { position: absolute; z-index: 2; top: 13px; right: 13px; width: 34px; height: 34px; border: 0; color: #d9d9d9; background: transparent; font-size: 28px; cursor: pointer; }
.primary-button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; min-height: 54px; border: 1px solid var(--accent); border-radius: 4px; padding: 0 24px; color: #fff; background: var(--accent); line-height: 1.1; text-align: center; text-transform: uppercase; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s; }
.primary-button::after, .inline-audit button::after { content: ""; position: absolute; left: 12%; top: 62%; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 14px -7px #ffc4b0, 30px 2px #ffb095; opacity: 0; }
.primary-button:hover::after, .inline-audit button:hover::after { animation: button-spark 1.05s ease-out infinite; }
.form-status { min-height: 20px; color: #f3f1ed !important; }
.case-content strong { color: var(--accent); font-size: 32px; }

@media (max-width: 1200px) and (min-width: 761px) {
  .footer-brand { font-size: 14px; }
  .reviews-heading h2 { max-width: 900px; font-size: 48px; white-space: normal; }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .hero { min-height: 860px; }
  .hero-stage { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .hero__reference { opacity: .5; object-fit: cover; object-position: 67% center; filter: saturate(.85) contrast(1.08); }
  .hero::after { content: ""; position: absolute; inset: 0; background: rgba(3,4,5,.36); pointer-events: none; }
  .desktop-hotspots, .desktop-brand, .hero-person-label { display: none; }
  .mobile-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; }
  .mobile-brand { max-width: 270px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; }.mobile-brand span, .eyebrow span { color: var(--accent); }
  .menu-button { display: grid; place-content: center; gap: 7px; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #3a3d42; border-radius: 4px; background: rgba(4,5,6,.8); }.menu-button span { width: 20px; height: 2px; background: #fff; transition: transform .2s; }.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .mobile-menu { position: absolute; z-index: 4; top: 74px; right: 20px; display: none; width: 220px; padding: 10px; border: 1px solid #33363c; border-radius: 6px; background: #0b0d0f; }.mobile-menu.is-open { display: grid; }.mobile-menu a, .mobile-menu button { padding: 13px 12px; border: 0; color: #fff; background: transparent; text-align: left; text-decoration: none; text-transform: uppercase; }
  .mobile-copy { position: relative; z-index: 2; display: block; max-width: 520px; padding: 105px 20px 48px; }.eyebrow { margin: 0 0 22px; color: var(--accent); font-size: 13px; font-weight: 700; }.mobile-copy h1 { margin: 0; max-width: 440px; font-size: 44px; line-height: 1.08; letter-spacing: 0; }.lead { max-width: 430px; margin: 26px 0 0; color: #d1d2d4; font-size: 18px; line-height: 1.55; }.mobile-actions { display: grid; gap: 18px; margin-top: 34px; }.mobile-actions a { width: max-content; padding-bottom: 7px; border-bottom: 2px solid var(--accent); color: #fff; text-decoration: none; text-transform: uppercase; }.mobile-benefits { display: grid; gap: 10px; margin-top: 38px; color: #e5e5e5; font-size: 14px; text-transform: uppercase; }.mobile-benefits span { width: max-content; max-width: 100%; padding: 15px 16px; border: 1px solid #34373c; border-radius: 5px; background: rgba(7,8,9,.72); }
  .screen { min-height: auto; height: auto; padding: 0; }.screen-stage { position: relative; inset: auto; width: 100%; transform: none; }.screen-hotspot { display: none; }
  .services-stage { width: 100%; }
  .reviews-section { min-height: 0; padding: 54px 0 40px; }.reviews-shell { width: calc(100% - 36px); }.reviews-ribbon { top: -90px; right: -70px; width: 250px; height: 120px; }.reviews-heading { display: grid; gap: 24px; margin-bottom: 30px; }.reviews-label { letter-spacing: 3px; }.reviews-heading h2 { font-size: 38px; font-weight: 600; white-space: normal; }.reviews-heading > div:first-child > p:last-child { font-size: 17px; line-height: 1.45; }.reviews-rating { grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: end; column-gap: 14px; padding: 14px 16px; }.reviews-rating strong { grid-row: 1 / 3; font-size: 44px; }.reviews-rating span { margin: 0; }.reviews-rating b { margin-top: 5px; }.reviews-grid { grid-template-columns: 1fr; gap: 14px; }.review-card { min-height: 0; }
  .quiz-section { padding: 58px 18px; }.quiz-shell { grid-template-columns: 1fr; gap: 38px; }.quiz-intro h2 { font-size: 38px; }.quiz-intro > p:not(.section-label) { font-size: 17px; }.quiz-card { min-height: 530px; padding: 24px 18px; }.quiz-step legend { font-size: 27px; }.quiz-fields { grid-template-columns: 1fr; }.quiz-controls { margin-top: 30px; }.quiz-controls .primary-button { flex: 1; padding-inline: 14px; }
  #contacts .screen-stage { aspect-ratio: auto; }.inline-audit { position: relative; left: auto; top: auto; width: auto; height: auto; grid-template-rows: repeat(4,56px) 56px auto; gap: 12px; margin: 18px; padding: 20px; border: 1px solid #33363a; border-radius: 8px; background: #090b0d; }.inline-audit p { position: static; }.footer-brand { display: none; }
  .contact-form, .case-content { padding: 34px 22px 24px; }
}

@media (max-width: 380px) { .mobile-copy { padding-top: 76px; }.mobile-copy h1 { font-size: 38px; }.lead { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

@media (max-width: 1024px) {
  .hero {
    min-height: 860px;
    background-image: linear-gradient(90deg,rgba(3,4,5,.94) 0%,rgba(3,4,5,.7) 46%,rgba(3,4,5,.38) 100%), url('./assets/hero-retouched.png');
    background-repeat: no-repeat;
    background-size: auto 118%;
    background-position: 62% center;
  }
  .hero-stage,.desktop-hotspots,.desktop-brand { display:none; }
  .mobile-header { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:22px 24px; background:linear-gradient(to bottom,rgba(3,4,5,.98),rgba(3,4,5,.88)); }
  .mobile-brand { color:#fff; font-size:16px; font-weight:700; text-decoration:none; }
  .menu-button { display:grid; place-content:center; gap:7px; width:44px; height:44px; border:1px solid #3a3d42; border-radius:4px; background:rgba(4,5,6,.8); }
  .menu-button span { width:20px; height:2px; background:#fff; }
  .mobile-menu { position:absolute; z-index:8; top:74px; right:24px; display:none; width:220px; padding:10px; border:1px solid #33363c; border-radius:6px; background:#0b0d0f; }
  .mobile-menu.is-open { display:grid; }
  .mobile-menu a,.mobile-menu button { padding:13px 12px; border:0; color:#fff; background:transparent; text-align:left; text-decoration:none; text-transform:uppercase; }
  .mobile-copy { position:relative; z-index:2; display:block; width:min(100% - 48px,720px); margin:0 auto; padding:100px 0 64px; }
  .tablet-headline, .tablet-lead { display:block; }
  .mobile-copy h1 { margin:0; max-width:680px; font-size:clamp(44px,7vw,68px); line-height:1.05; }
  .mobile-copy .lead { max-width:580px; }
  .screen {
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid #14171a;
  }
  .screen-stage { display: none; }
  .screen-stage .screen-hotspot,
  .screen-stage .case-copy,
  .screen-stage .numberless::before,
  .screen-stage .responsibility-copy-cover,
  .screen-stage .responsibility-subtitle,
  .screen-stage .signature-patch { display: none; }
  .responsive-copy {
    position: relative;
    z-index: 6;
    display: block;
    width: min(100% - 48px, 920px);
    margin: 0 auto;
    padding: 64px 0;
  }
  .responsive-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 2px; }
  .responsive-copy h2 { max-width: 900px; margin: 0; font-size: clamp(36px, 6vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: 0; }
  .responsive-lead { max-width: 720px; margin: 20px 0 30px; color: #c4c6c9; font-size: 18px; line-height: 1.5; }
  .responsive-grid { display: grid; gap: 14px; }
  .responsive-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .responsive-grid--facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .responsive-grid--cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .responsive-card {
    min-width: 0;
    min-height: 178px;
    padding: 22px;
    border: 1px solid #30343a;
    border-radius: 7px;
    color: #f3f1ed;
    background: linear-gradient(145deg, #15181b, #090b0d);
    text-align: left;
  }
  button.responsive-card { cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
  button.responsive-card:hover { border-color: var(--accent); box-shadow: 0 0 22px rgba(255,75,31,.2); transform: translateY(-2px); }
  .responsive-card b, .responsive-card > span { display: block; margin-bottom: 22px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
  .responsive-card strong { display: block; font-size: 23px; line-height: 1.15; text-transform: uppercase; }
  .responsive-card small { display: block; margin-top: 10px; color: #b9bbc0; font-size: 14px; line-height: 1.4; }
  .responsive-card em { display: block; margin-top: 22px; color: #f3f1ed; font-size: 13px; font-style: normal; text-transform: uppercase; }
  .responsive-case { position: relative; overflow: hidden; min-height: 255px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; }
  .responsive-case::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(3,4,5,.12), #060708 82%); }
  .responsive-case > * { position: relative; z-index: 1; }
  /* hero-clean.png is NOT clean — it is the full desktop screen with the headline
     and metric cards baked in, which showed through this card at wider widths.
     hero-photo.webp is the text-free crop. */
  .responsive-case--build { background-image: url('./assets/case-construction-hero-photo.webp'); background-position:center; }
  .responsive-case--post { background-image: url('./assets/case-umbrellas-cta-bg.png'); background-position:78% center; }
  .responsive-case--beds { background-image: url('./assets/case-beds-cta-bg.png'); background-position:80% center; }
  .responsive-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: flow; }
  .responsive-flow span { counter-increment: flow; min-height: 72px; padding: 18px; border: 1px solid #30343a; border-radius: 7px; color: #e7e8e9; background: #0d0f12; }
  .responsive-flow span::before { content: "0" counter(flow); display: block; margin-bottom: 7px; color: var(--accent); font-size: 12px; }
  .responsive-flow--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .responsive-cta { min-height: 56px; margin-top: 24px; border: 0; border-radius: 5px; padding: 0 22px; color: #fff; background: var(--accent); text-transform: uppercase; cursor: pointer; }
  .responsive-cta--blue { border: 1px solid #3f8fff; background: #102e5c; box-shadow: 0 0 20px rgba(40,125,255,.18); }
  #ai-manager { display: flex; flex-direction: column; }
  #ai-manager .responsive-copy { order: 1; padding-bottom: 28px; }
  #ai-manager .screen-stage { order: 2; position: relative; inset: auto; display: block; width: min(100% - 48px, 920px); min-height: 570px; margin: 0 auto 64px; aspect-ratio: auto; transform: none; }
  #ai-manager .screen-stage > img { display: none; }
  #ai-manager .ai-chat-panel {
    position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 520px; gap: 12px; padding: 22px;
  }
  #ai-manager .ai-message { min-height: 0; padding: 9px 56px 9px 10px; font-size: 12px; }
  #ai-manager .ai-message time { right: 9px; top: 9px; font-size: 10px; }
  #ai-manager .ai-chat-input { height: 42px; padding-left: 10px; font-size: 12px; }
  #contacts .screen-stage { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.82fr); align-items: center; gap: 44px; width: min(100% - 48px, 1080px); min-height: 0; margin: 0 auto; padding: 72px 0 120px; aspect-ratio: auto; transform: none; }
  #contacts .screen-stage > img { display: none; }
  .contact-responsive-copy { display: block; }
  .contact-responsive-copy h2 { margin: 0; font-size: clamp(38px,6vw,58px); line-height: 1.06; }
  .contact-responsive-copy > p:last-child { margin: 22px 0 0; color: #c4c6c9; font-size: 18px; line-height: 1.5; }
  #contacts .inline-audit { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0; grid-template-rows: none; gap: 12px; padding: 20px; background: rgba(7,9,11,.94); }
  #contacts .inline-audit input, #contacts .inline-audit button { min-height: 56px; }
  #contacts .footer-brand { left: 0; top: auto; bottom: 35px; width: auto; height: auto; background: transparent; font-size: 15px; }
  #contacts .footer-cases, #contacts .footer-services, #contacts .footer-steps, #contacts .footer-contacts { display: none; }
  .quiz-section { width: 100%; min-height: 0; padding: 64px 24px; }
  .quiz-shell { grid-template-columns: 1fr; gap: 38px; width: min(720px,100%); }
  .quiz-intro h2 { font-size: clamp(38px, 7vw, 58px); }
  .reviews-section { width: 100%; }
}

@media (max-width: 760px) {
  body { min-width: 0; }
  .hero { background-size:auto 112%; background-position:61% center; }
  .mobile-copy { width:auto; padding-right:20px; padding-left:20px; }
  .responsive-copy { width: calc(100% - 36px); margin: 0 auto; padding: 54px 0; }
  .responsive-copy h2 { font-size: clamp(32px, 9.4vw, 42px); }
  .responsive-lead { margin: 17px 0 24px; font-size: 16px; }
  .responsive-grid--three, .responsive-grid--facts, .responsive-grid--cases, .responsive-flow, .responsive-flow--four { grid-template-columns: 1fr; }
  .responsive-grid--facts { grid-template-columns: 1fr 1fr; }
  .responsive-card { min-height: 142px; padding: 18px; }
  .responsive-case { min-height: 235px; }
  .responsive-card strong { font-size: 21px; }
  .responsive-flow span { min-height: 65px; }
  #ai-manager .screen-stage { width: calc(100% - 36px); min-height: 0; padding: 0; }
  #ai-manager .ai-chat-panel { position: relative; left: auto; top: auto; width: 100%; height: auto; gap: 9px; padding: 14px; }
  #ai-manager .ai-message { padding: 11px 48px 11px 11px; font-size: 13px; }
  #ai-manager .responsive-copy { margin: 0 auto; }
  #contacts .screen-stage { grid-template-columns: 1fr; gap: 28px; width: calc(100% - 36px); padding: 54px 0 100px; }
  #contacts .inline-audit { padding: 16px; }
  .quiz-section { padding: 54px 18px; }
  .quiz-card { min-height: 520px; padding: 22px 18px; }
  .quiz-step legend { font-size: 26px; }
  .quiz-fields { grid-template-columns: 1fr; }
  .quiz-controls { margin-top: 30px; }
  .mobile-header { background: linear-gradient(to bottom, rgba(3,4,5,.98), rgba(3,4,5,.9)); }
  #cases .responsive-copy { padding-top: 54px; }
  #cases .responsive-copy--cases > .responsive-eyebrow,
  #cases .responsive-copy--cases > h2,
  #cases .responsive-copy--cases > .responsive-lead {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  #cases .responsive-copy--cases > h2 {
    max-width: 350px;
    font-size: clamp(23px, 6vw, 30px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: normal;
  }
  #cases .responsive-copy--cases > .responsive-lead {
    max-width: 540px;
    margin-top: 16px;
    margin-bottom: 28px;
  }
  .reviews-heading > div:first-child {
    width: 100%;
    text-align: center;
  }
  .reviews-label,
  .reviews-heading h2,
  .reviews-heading > div:first-child > p:last-child {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .reviews-heading h2 {
    max-width: 350px;
    font-size: clamp(23px, 6vw, 30px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
  }
  .reviews-heading > div:first-child > p:last-child {
    max-width: 540px;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.5;
  }
  #services .screen-stage,
  #services > .responsive-copy { display: none; }
  #services .mobile-services {
    display: block;
    width: calc(100% - 36px);
    max-width: 560px;
    margin: 0 auto;
    padding: 54px 0 50px;
    text-align: center;
  }
  .mobile-services__kicker {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0 0 24px; color: var(--accent);
    font-size: clamp(13px, 3.9vw, 17px); font-weight: 600; line-height: 1.2;
  }
  .target-icon {
    position: relative; display: inline-block; flex: 0 0 28px;
    width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; color: var(--accent);
  }
  .target-icon::before, .target-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%);
  }
  .target-icon::before { width: 38px; height: 2px; }
  .target-icon::after { width: 2px; height: 38px; }
  .target-icon--blue { color: #2384ff; }
  .mobile-services h2 {
    margin: 0 auto; font-size: clamp(23px, 6vw, 30px); font-weight: 700;
    line-height: 1.12; letter-spacing: 0;
  }
  .mobile-services__lead {
    margin: 18px auto 24px; color: #c4c6c9;
    font-size: clamp(15px, 4.1vw, 18px); line-height: 1.5;
  }
  .mobile-services__strategy {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    width: min(100%, 390px); min-height: 68px; margin: 0 auto 24px; padding: 12px 18px;
    border: 1px solid #278cff; border-radius: 7px; color: #e3e8ef; background: rgba(7,15,28,.86);
    box-shadow: 0 0 24px rgba(38,132,255,.14); font-size: clamp(13px,3.7vw,16px); line-height: 1.25;
  }
  .mobile-services__cards { display: grid; gap: 10px; }
  .mobile-niche {
    position: relative; overflow: hidden; display: block; width: 100%; aspect-ratio: 2 / 1; min-height: 170px;
    padding: 24px 18px; border: 1px solid #5b422c; border-radius: 8px; color: #fff;
    background-image: url('./assets/screen-05-specialization-v4.png'); background-repeat: no-repeat;
    background-size: 300% auto; text-align: left; cursor: pointer;
  }
  .mobile-niche--build { background-position: 0 91%; }
  .mobile-niche--goods { background-position: 50% 91%; }
  .mobile-niche--pro { background-position: 100% 91%; }
  .mobile-niche__shade {
    position: absolute; inset: 0;
    background: linear-gradient(110deg,rgba(4,5,6,.97) 0,rgba(4,5,6,.75) 39%,rgba(4,5,6,.08) 76%),linear-gradient(to bottom,rgba(4,5,6,.76),transparent 50%,rgba(4,5,6,.38));
  }
  .mobile-niche__number, .mobile-niche strong, .mobile-niche__arrow, .mobile-niche__tags { position: relative; z-index: 2; }
  .mobile-niche__number {
    display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 18px; font-weight: 700;
  }
  .mobile-niche__number i { width: 28px; height: 1px; background: var(--accent); }
  .mobile-niche strong {
    display: block; margin-top: 14px; font-size: clamp(20px,5.7vw,28px); font-weight: 600; line-height: 1.12;
  }
  .mobile-niche__arrow {
    position: absolute; right: 16px; top: 15px; display: grid; place-items: center;
    width: 52px; height: 52px; border: 1px solid #666b70; border-radius: 50%; color: var(--accent);
    background: rgba(8,10,12,.94); font-size: 34px; font-weight: 300; line-height: 1;
    transition: color .2s, background .2s, transform .2s;
  }
  .mobile-niche__tags {
    position: absolute; left: 16px; bottom: 14px; max-width: calc(100% - 32px); padding: 9px 12px;
    border: 1px solid #41464b; border-radius: 6px; background: rgba(9,11,13,.94);
    font-size: clamp(10px,3vw,14px); line-height: 1.15; white-space: nowrap;
  }
  .mobile-niche__tags b { margin: 0 7px; color: var(--accent); font-weight: 700; }
  .mobile-niche:hover .mobile-niche__arrow, .mobile-niche:focus-visible .mobile-niche__arrow {
    color: #fff; background: var(--accent); transform: translate(2px,-2px);
  }
}

/* Mobile hero: every interface element is code; only the portrait is raster. */
@media (max-width: 760px) {
  .hero {
    width: 100%;
    min-height: max(100svh, 900px);
    padding: 0 0 18px;
    border: 1px solid #2b2d30;
    border-radius: 30px;
    background: #030405;
  }
  .hero::after { display: none; }
  .hero .mobile-header {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 76px;
    padding: 20px 20px 10px;
    background: transparent;
  }
  .hero .mobile-brand {
    font-size: clamp(20px, 6vw, 25px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }
  .hero .menu-button {
    display: grid;
    width: 46px;
    height: 46px;
    gap: 6px;
    padding: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .hero .menu-button span {
    display: block;
    width: 31px;
    height: 2px;
    background: #f3f3f3;
    transform-origin: center;
  }
  .hero .menu-button[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
  .hero .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hero .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-8px) rotate(-45deg); }
  .hero .mobile-menu {
    top: 70px;
    right: 18px;
    border-radius: 8px;
    background: rgba(10, 12, 14, .98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  }
  .hero .mobile-copy {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 57px 18px 0;
    text-align: center;
  }
  .hero .tablet-headline,
  .hero .tablet-lead { display: none; }
  .hero .mobile-headline,
  .hero .mobile-lead,
  .hero .mobile-hero-visual { display: block; }
  .hero .mobile-copy .eyebrow {
    margin: 0 0 24px;
    color: #ff4b1f;
    font-size: clamp(14px, 4.1vw, 18px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .hero .mobile-copy h1 {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(23px, 6vw, 30px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
    text-align: center;
  }
  .hero .mobile-copy h1 span { display: block; white-space: nowrap; }
  .hero .mobile-copy .lead {
    max-width: 490px;
    margin: 24px auto 0;
    color: #d3d4d6;
    font-size: clamp(16px, 4.4vw, 20px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: center;
  }
  .mobile-hero-visual {
    position: relative;
    height: 355px;
    margin: 8px 0 0;
    isolation: isolate;
  }
  .mobile-orbit {
    position: absolute;
    z-index: -1;
    left: 3%;
    top: 62px;
    width: 91%;
    height: 218px;
    border: 2px solid #ff4b12;
    border-right-width: 8px;
    border-bottom-width: 9px;
    border-radius: 50%;
    opacity: .95;
    box-shadow: 0 0 7px #ff5b19, inset 0 0 10px rgba(255, 76, 20, .32), 0 10px 18px rgba(255, 54, 8, .2);
    transform: rotate(-23deg);
  }
  .mobile-orbit::after {
    content: "";
    position: absolute;
    inset: 7px -4px -8px 5px;
    border: 14px solid rgba(116, 24, 7, .5);
    border-right-color: rgba(244, 57, 12, .72);
    border-bottom-color: rgba(238, 55, 10, .78);
    border-radius: inherit;
    filter: blur(1px);
  }
  .mobile-portrait {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    display: block;
    width: min(76vw, 335px);
    height: auto;
    max-height: 350px;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.62));
  }
  .mobile-hero-signature {
    position: absolute;
    z-index: 4;
    right: 9%;
    bottom: 15%;
    margin: 0;
    color: #fff;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(14px, 4.4vw, 18px);
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7), 0 0 18px rgba(0, 0, 0, .55);
    pointer-events: none;
  }
  .hero .mobile-actions {
    display: grid;
    gap: 10px;
    margin: 0 16px;
  }
  .hero .mobile-actions .primary-button,
  .hero .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 61px;
    margin: 0;
    border-radius: 7px;
    padding: 0 12px;
    color: #fff;
    font-size: clamp(16px, 4.6vw, 20px);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }
  .hero .mobile-actions .primary-button {
    border: 1px solid #ff5b20;
    background: linear-gradient(105deg, #f13b12, #d24b2a);
    box-shadow: 0 0 20px rgba(255, 71, 24, .18);
  }
  .hero .mobile-actions a { border: 1px solid #ff4b14; background: #030405; }
  .hero .mobile-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 11px 16px 0;
    color: #f0f0f0;
  }
  .hero .mobile-benefits > span {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    width: 100%;
    min-height: 88px;
    padding: 10px 9px;
    border: 1px solid #3b3d41;
    border-radius: 7px;
    background: #090a0c;
    text-align: left;
  }
  .hero .mobile-benefits b { font-size: clamp(12px, 3.55vw, 16px); font-weight: 400; line-height: 1.35; }
  .benefit-globe {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    border: 3px solid #ff4b12;
    border-radius: 50%;
  }
  .benefit-globe::before,
  .benefit-globe::after { content: ""; position: absolute; inset: 4px 10px; border: 2px solid #ff4b12; border-block: 0; border-radius: 50%; }
  .benefit-globe::after { inset: 20px -2px auto; height: 2px; border: 0; background: #ff4b12; box-shadow: 0 -11px 0 -0.4px #ff4b12, 0 11px 0 -0.4px #ff4b12; }
  .benefit-bolt {
    position: relative;
    display: block;
    width: 40px;
    height: 52px;
    margin-left: 5px;
    border: 0;
    background: #ff4b12;
    clip-path: polygon(41% 0, 90% 0, 65% 35%, 95% 35%, 25% 100%, 39% 55%, 5% 55%);
  }
  .benefit-bolt::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #090a0c;
    clip-path: inherit;
  }
  .hero .mobile-copy .tablet-headline,
  .hero .mobile-copy .tablet-lead { display: none; }
}

@media (max-width: 370px) {
  .hero { min-height: 870px; }
  .hero .mobile-copy { padding-top: 42px; }
  .hero .mobile-copy h1 {
    width: calc(100% - 8px);
    margin-inline: auto;
    font-size: clamp(14px, 5.4vw, 19px);
  }
  #cases .responsive-copy--cases > h2 {
    font-size: clamp(14px, 5.4vw, 19px);
  }
  .reviews-heading h2 {
    font-size: clamp(14px, 5.4vw, 19px);
  }
  .mobile-services h2 { font-size: clamp(14px,5.4vw,19px); }
  .mobile-services__lead br { display: none; }
  .mobile-services__strategy { gap: 12px; padding-inline: 12px; }
  .mobile-niche { min-height: 156px; padding: 18px 14px; }
  .mobile-niche strong { font-size: 18px; }
  .mobile-niche__arrow { right: 12px; top: 12px; width: 44px; height: 44px; font-size: 28px; }
  .mobile-niche__tags { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px; font-size: 9px; }
  .mobile-niche__tags b { margin-inline: 4px; }
  .hero .mobile-copy .lead { font-size: 15px; }
  .mobile-hero-visual { height: 328px; }
  .mobile-portrait { max-height: 325px; }
  .mobile-hero-signature { font-size: clamp(14px, 4.4vw, 18px); }
  .hero .mobile-benefits > span { grid-template-columns: 46px 1fr; min-height: 80px; }
  .benefit-globe { width: 39px; height: 39px; }
  .benefit-globe::after { top: 17px; }
  .benefit-bolt { width: 35px; height: 44px; }
}

@media (max-width: 300px) {
  .hero .mobile-brand { font-size: 18px; white-space: nowrap; }
  .mobile-hero-signature { font-size: 13px; }
  .hero .mobile-benefits > span {
    grid-template-columns: 34px 1fr;
    padding-inline: 5px;
  }
  .hero .mobile-benefits b { font-size: 10px; }
  .benefit-globe { width: 30px; height: 30px; border-width: 2px; }
  .benefit-globe::before { inset: 3px 7px; border-width: 1px; }
  .benefit-globe::after { top: 13px; box-shadow: 0 -7px 0 -0.4px #ff4b12, 0 7px 0 -0.4px #ff4b12; }
  .benefit-bolt { width: 27px; height: 36px; margin-left: 2px; }
}