:root {
  --ink: #0d0d10;
  --paper: #f3f1ec;
  --violet: #6c52ff;
  --line: rgba(13, 13, 16, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}

.nav {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}

.logo img {
  width: 170px;
  display: block;
}

.nav nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  background: var(--violet);
  color: #fff;
  padding: 17px 22px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

.button.small {
  padding: 13px 18px;
  font-size: 14px;
}

.hero {
  padding: 76px 0 56px;
}

.eyebrow,
.section-no {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font: 700 12px monospace;
}

h1 {
  max-width: 1080px;
  font-size: clamp(52px, 8vw, 108px);
  line-height: 0.89;
  letter-spacing: -0.065em;
  margin: 28px 0 32px;
  font-weight: 500;
}

h1 em {
  color: var(--violet);
  font-style: normal;
}

.lead {
  max-width: 650px;
  font-size: 20px;
  line-height: 1.55;
}

.actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 34px 0 64px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}

.metrics div {
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.metrics div + div {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}

.metrics strong {
  font-size: 26px;
}

.metrics span {
  color: #67676e;
  font-size: 13px;
}

.flow {
  margin-top: 28px;
  background: #111116;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px;
}

.flow div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flow small,
.flow span {
  color: #aaa;
  font-size: 11px;
}

.flow b {
  color: var(--violet);
}

h2 {
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0;
  font-weight: 500;
}

.statement,
.head {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
}

.statement {
  padding: 110px 0;
  border-top: 1px solid var(--line);
}

.statement p,
.head p,
.analytics p,
.contact p {
  line-height: 1.65;
  color: #666;
}

.section {
  padding: 110px 0;
}

.head {
  margin-bottom: 56px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.steps article,
.split article {
  min-height: 270px;
  padding: 24px;
}

.steps article + article {
  border-left: 1px solid var(--line);
}

.steps article > span,
.split span {
  font: 700 12px monospace;
  color: var(--violet);
}

.steps h3,
.split h3 {
  font-size: 25px;
  margin: 72px 0 16px;
}

.steps p,
.split p {
  color: #666;
  line-height: 1.55;
}

.dark {
  background: #101015;
  color: #fff;
}

.dark .section-no,
.dark .head p {
  color: #aaa;
}

.services {
  border-top: 1px solid #34343a;
}

.services div {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  padding: 22px 0;
  border-bottom: 1px solid #34343a;
  align-items: center;
}

.services strong {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
}

.services b {
  color: var(--violet);
  font-size: 25px;
}

.channels {
  margin-top: 44px;
  padding: 26px;
  border: 1px solid #34343a;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.channels p {
  margin: 0;
  color: #aaa;
}

.packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.package {
  min-height: 350px;
  padding: 28px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}

.package:hover {
  transform: translateY(-5px);
  border-color: var(--violet);
}

.package.featured {
  background: var(--violet);
  color: #fff;
}

.package h3 {
  font-size: 42px;
  margin: 64px 0 5px;
}

.package p {
  color: #666;
}

.featured p {
  color: #e5e0ff;
}

.package ul {
  padding-left: 20px;
  line-height: 1.8;
}

.package > b {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}

.analytics {
  background: #ded9ff;
}

.analytics-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.analytics h2 {
  margin: 22px 0;
}

.data {
  background: var(--paper);
  padding: 28px;
}

.data > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0;
}

.data ul {
  padding: 0;
  list-style: none;
}

.data ul b {
  font-size: 11px;
  color: var(--violet);
}

.data li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.data > strong {
  display: block;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 22px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split article {
  border: 1px solid var(--line);
}

.split article + article {
  border-left: 0;
}

.contact {
  background: var(--violet);
  color: #fff;
  padding: 110px 0;
}

.contact p {
  color: #e0dcff;
}

.contact h2 {
  margin: 24px 0;
}

.contact-grid {
  gap: 90px;
}

form {
  display: grid;
  gap: 22px;
}

label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
}

input,
textarea {
  border: 0;
  border-bottom: 1px solid #ffffff88;
  background: transparent;
  padding: 12px 0;
  color: #fff;
  font: 16px Arial;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #cbc4ff;
}

textarea {
  min-height: 90px;
}

form .button {
  background: #fff;
  color: var(--ink);
  width: max-content;
}

footer {
  min-height: 130px;
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 30px;
  align-items: center;
  font-size: 13px;
}

footer img {
  width: 150px;
}

footer p {
  color: #777;
}

@media (max-width: 800px) {
  .shell {
    width: calc(100% - 28px);
  }

  .nav nav {
    display: none;
  }

  .logo img {
    width: 135px;
  }

  .flow {
    grid-template-columns: 1fr;
  }

  .flow > b {
    transform: rotate(90deg);
  }

  .statement,
  .head,
  .analytics-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .section,
  .statement,
  .contact {
    padding: 78px 0;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .packages {
    grid-template-columns: 1fr;
  }

  .channels {
    flex-direction: column;
  }

  .contact-grid {
    gap: 50px;
  }

  footer {
    grid-template-columns: 1fr 1fr;
    padding: 30px 0;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 50px;
  }

  .metrics,
  .steps,
  .split,
  .data > div {
    grid-template-columns: 1fr;
  }

  .metrics div + div,
  .steps article + article,
  .split article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav .button {
    display: none;
  }
}

.menu-toggle {
  display: none;
  border: 0;
  background: none;
  font-size: 25px;
}

.light {
  background: #fff !important;
  color: var(--ink) !important;
}

.marquee {
  overflow: hidden;
  background: var(--violet);
  color: #fff;
  padding: 14px 0;
}

.marquee div {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: ticker 25s linear infinite;
}

.marquee span {
  font-weight: 700;
  white-space: nowrap;
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

.steps.five {
  grid-template-columns: repeat(5, 1fr);
}

.channels {
  align-items: center;
}

.channels > div {
  max-width: 340px;
}

.channels button {
  flex: none;
}

.destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 30px 0;
}

.destinations small {
  width: 100%;
  color: #aaa;
}

.package {
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.package > small {
  position: absolute;
  right: 28px;
}

.formats {
  margin-top: 70px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.formats h3 {
  font-size: 34px;
}

.formats button {
  width: 100%;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  padding: 20px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  text-align: left;
  cursor: pointer;
}

.inline-cta {
  margin-top: 25px;
  padding: 28px;
  background: #ded9ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.notice {
  display: grid;
  grid-template-columns: 120px 180px 1fr 1fr;
  gap: 25px;
  align-items: start;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 90px;
}

.notice > strong {
  font-size: 44px;
  color: var(--violet);
}

.notice h2 {
  font-size: 44px;
}

.notice p {
  margin: 0;
  line-height: 1.6;
}

form > small {
  line-height: 1.5;
  opacity: 0.7;
}

.quick {
  display: grid;
  gap: 14px;
  margin-top: 40px;
}

.quick > span {
  font-size: 12px;
  text-transform: uppercase;
}

.quick a {
  display: flex;
  justify-content: space-between;
  max-width: 340px;
  border-bottom: 1px solid currentColor;
  padding: 10px 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000b;
  display: grid;
  place-items: center;
  padding: 22px;
}

.modal-card {
  position: relative;
  background: var(--paper);
  width: min(940px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 45px;
}

.modal-card h2 {
  margin: 18px 0;
}

.close {
  position: absolute;
  right: 18px;
  top: 12px;
  border: 0;
  background: none;
  font-size: 38px;
  cursor: pointer;
}

.choice {
  padding: 15px;
  background: #ded9ff;
  margin: 22px 0;
}

.modal-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
}

.modal form input,
.modal form textarea {
  color: var(--ink);
  border-color: var(--line);
}

.modal form input::placeholder,
.modal form textarea::placeholder {
  color: #777;
}

@media (max-width: 800px) {
  .menu-toggle {
    display: block;
  }

  .nav {
    position: relative;
  }

  .nav nav {
    position: absolute;
    z-index: 20;
    top: 89px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 22px;
    box-shadow: 0 15px 30px #0002;
    flex-direction: column;
  }

  .nav nav.open {
    display: flex;
  }

  .steps.five {
    grid-template-columns: 1fr 1fr;
  }

  .channels {
    align-items: flex-start;
  }

  .notice {
    grid-template-columns: 1fr 1fr;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-card {
    padding: 32px 22px;
  }
}

@media (max-width: 520px) {
  .nav-cta {
    display: none !important;
  }

  .steps.five {
    grid-template-columns: 1fr;
  }

  .inline-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice {
    grid-template-columns: 1fr;
  }
}

/* Dark visual system matched to the original Ad2Hire prototype */
:root {
  --ink: #f7f7fa;
  --paper: #08090b;
  --violet: #7655ff;
  --line: rgba(255, 255, 255, 0.12);
}

body {
  background: #08090b;
  color: #f7f7fa;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

.shell {
  width: min(1170px, calc(100% - 48px));
}

.nav {
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100vw - 1170px) / 2));
  height: 74px;
  background: #27272a;
  border-color: #444;
}

.logo img {
  width: 116px;
}

.nav nav {
  gap: 32px;
  color: #aaa;
}

.nav nav a:hover {
  color: #fff;
}

.button {
  border-radius: 999px;
  background: linear-gradient(100deg, #4e72ff, #c846ff);
  box-shadow: 0 10px 35px rgba(113, 69, 255, 0.2);
}

.button.small {
  background: transparent;
  border: 1px solid #666;
  box-shadow: none;
}

.menu-toggle {
  color: #fff;
}

.hero {
  min-height: 850px;
  padding: 88px 0 48px;
  position: relative;
  overflow: hidden;
}

.hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: -260px;
  top: -80px;
  background: radial-gradient(
    circle,
    #30236f 0,
    rgba(23, 17, 67, 0.55) 35%,
    transparent 70%
  );
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid #34363d;
  border-radius: 999px;
  padding: 10px 15px;
  color: #b8bac2;
}

.eyebrow:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #795cff;
  margin-right: 9px;
  box-shadow: 0 0 10px #795cff;
}

.hero h1 {
  width: 650px;
  max-width: 58%;
  font-size: clamp(54px, 4.3vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 34px 0 24px;
}

.hero h1 em {
  display: block;
  background: linear-gradient(90deg, #71a0ff, #c345ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  width: 650px;
  max-width: 58%;
  font-size: 18px;
  color: #b4b5bd;
}

.actions {
  margin: 34px 0 52px;
}

.actions > a:not(.button) {
  border: 1px solid #4a4b52;
  border-radius: 999px;
  padding: 16px 24px;
}

.metrics {
  width: 650px;
  max-width: 58%;
  border-color: #34363d;
}

.metrics strong {
  font-size: 17px;
}

.metrics span {
  color: #858791;
}

.flow {
  position: absolute;
  right: -5%;
  top: 180px;
  width: 47%;
  height: 490px;
  margin: 0;
  background: transparent;
  border: 0;
  display: block;
}

.flow:before,
.flow:after {
  content: "";
  position: absolute;
  border: 1px solid rgba(117, 85, 255, 0.35);
  border-radius: 50%;
  inset: 30px;
}

.flow:after {
  inset: 85px;
  border-color: rgba(255, 255, 255, 0.15);
}

.flow div {
  position: absolute;
  z-index: 2;
  width: 205px;
  padding: 22px;
  background: #15171c;
  border: 1px solid #3a3c44;
  border-radius: 0 20px 0 0;
}

.flow div:nth-of-type(1) {
  left: 0;
  top: 0;
}

.flow div:nth-of-type(2) {
  right: 0;
  top: 175px;
}

.flow div:nth-of-type(3) {
  left: 65px;
  bottom: 0;
}

.flow > b {
  display: none;
}

.flow strong {
  font-size: 15px;
}

.flow small {
  color: #777b87;
}

.marquee {
  background: #0a0b0d;
  border-block: 1px solid #282a30;
  color: #858791;
  padding: 17px 0;
}

.marquee span {
  font-size: 12px;
  font-weight: 400;
}

.statement,
.section {
  border-color: #2d2e33;
}

.section-no {
  color: #8d8f99;
}

.statement h2 b,
.head h2 b {
  background: linear-gradient(90deg, #71a0ff, #c345ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.statement p,
.head p,
.analytics p,
.contact p,
.steps p,
.split p {
  color: #a2a4ad;
}

.steps,
.package,
.split article {
  background: rgba(15, 16, 20, 0.88);
  border-color: #30323a;
}

.steps article + article {
  border-color: #30323a;
}

.steps h3,
.split h3 {
  color: #fff;
}

.dark {
  background: #111216;
}

.services {
  border-color: #34363a;
}

.services div {
  border-color: #34363a;
}

.channels {
  background: #191a20;
  border-color: #393b43;
}

.packages {
  gap: 12px;
}

.package.featured {
  background: linear-gradient(145deg, #5439d8, #7c58ff);
}

.package p,
.featured p {
  color: #aeb0b9;
}

.formats button {
  color: #fff;
  border-color: #30323a;
}

.analytics {
  background: #111216;
}

.data {
  background: #090a0d;
  border: 1px solid #34363a;
}

.data li,
.data > strong {
  border-color: #34363a;
}

.inline-cta {
  background: #171923;
}

.notice {
  border-color: #30323a;
}

.contact {
  background: #111216;
  border-top: 1px solid #30323a;
}

.contact-grid {
  background: linear-gradient(135deg, #171822, #121319);
  padding: 48px;
  border: 1px solid #333641;
}

.contact input,
.contact textarea {
  color: #fff;
}

.contact form .button {
  background: linear-gradient(100deg, #4e72ff, #c846ff) !important;
  color: #fff !important;
}

footer {
  border-top: 1px solid #30323a;
}

footer p {
  color: #8b8d96;
}

.modal-card {
  background: #111216;
  border: 1px solid #383a43;
}

.modal form input,
.modal form textarea {
  color: #fff;
}

.modal form input::placeholder,
.modal form textarea::placeholder {
  color: #777;
}

.modal .light {
  background: linear-gradient(100deg, #4e72ff, #c846ff) !important;
  color: #fff !important;
}

.close {
  color: #fff;
}

@media (max-width: 900px) {
  .hero h1,
  .lead,
  .metrics {
    max-width: 100%;
    width: 100%;
  }

  .flow {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 430px;
    margin-top: 45px;
  }

  .hero {
    min-height: auto;
  }

  .steps.five {
    grid-template-columns: 1fr 1fr;
  }

  .nav {
    padding-inline: 18px;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 58px;
  }

  .hero h1 {
    font-size: 49px;
  }

  .flow {
    height: 500px;
  }

  .flow div {
    width: 180px;
  }

  .flow div:nth-of-type(2) {
    top: 190px;
  }

  .flow div:nth-of-type(3) {
    left: 20px;
  }

  .contact-grid {
    padding: 26px;
  }

  .steps.five {
    grid-template-columns: 1fr;
  }
}

.nav .logo img,
footer img {
  mix-blend-mode: screen;
}

/* Typography and header refinement */
body {
  font-family:
    Inter, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.nav {
  background: rgba(8, 9, 11, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.nav nav {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #9a9ca5;
}

.nav .button.small {
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f7;
  border-color: #3c3e45;
}

h1,
h2,
h3,
.services strong {
  font-family:
    Inter, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.hero h1 {
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

h2 {
  font-weight: 400;
  letter-spacing: -0.05em;
}

.lead,
.statement p,
.head p {
  font-weight: 400;
  letter-spacing: -0.015em;
}

.metrics strong {
  font-weight: 600;
}

.metrics span {
  font-weight: 400;
}

/* Requested navigation and hero corrections */
.eyebrow,
.section-no {
  font-family:
    Inter, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.hero h1 {
  line-height: 1.06;
  letter-spacing: -0.052em;
}

.actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

.actions > a:not(.button) {
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #d4d5db;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.actions > a:not(.button):hover {
  color: #fff;
}

@media (max-width: 800px) {
  .nav-cta {
    display: none !important;
  }

  .nav nav.open {
    background: #111216;
    border: 1px solid #34363d;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
    backdrop-filter: none;
  }

  .nav nav.open a {
    color: #e4e4e8;
    padding: 5px 0;
  }
}

@media (max-width: 520px) {
  .hero.shell {
    width: 100%;
    padding: 34px 27px 38px;
    margin: 0;
  }

  .hero:after {
    right: -320px;
    top: -110px;
    width: 680px;
    height: 680px;
  }

  .hero h1 {
    margin: 26px 0 22px;
    line-height: 1.08;
  }

  .hero .lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
  }

  .actions {
    margin: 30px 0 42px;
    gap: 18px;
  }

  .actions > a:not(.button) {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.2;
    padding: 2px 0;
  }

  .metrics {
    margin-top: 0;
  }

  .hero h1 em {
    margin-top: 26px;
  }
}

@media (max-width: 800px) {
  .nav {
    position: relative;
    z-index: 1000;
  }

  .nav nav.open {
    position: fixed !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw;
    height: calc(100vh - 74px);
    padding: 28px 24px 40px;
    background: #111216 !important;
    background-color: #111216 !important;
    background-image: none !important;
    opacity: 1 !important;
    border: 0;
    border-top: 1px solid #34363d;
    box-shadow: none;
    z-index: 9999;
    overflow-y: auto;
  }

  .nav nav.open:before {
    display: none !important;
  }

  .nav nav.open a {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    color: #f4f4f6;
    border-bottom: 1px solid #2f3138;
  }
}

/* Source-matched hero metrics and candidate-flow infographic */
.metrics > div {
  position: relative;
  padding-left: 18px;
}

.metrics > div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #795cff;
  box-shadow: 0 0 8px #795cff;
}

.metrics > div + div {
  padding-left: 46px;
}

.metrics > div + div:before {
  left: 28px;
}

.flow {
  position: absolute;
  right: -4%;
  top: 155px;
  width: 49%;
  height: 535px;
  margin: 0;
  background: transparent;
  border: 0;
  display: block;
  overflow: visible;
}

.flow .orbit {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.flow .orbit.outer {
  width: 405px;
  height: 405px;
  left: 65px;
  top: 55px;
}

.flow .orbit.inner {
  width: 295px;
  height: 295px;
  left: 120px;
  top: 110px;
  border-color: rgba(113, 83, 255, 0.4);
}

.flow .route-segment {
  position: absolute;
  z-index: 1;
  display: block;
  height: 1px;
  transform-origin: left center;
  background: #7655ff;
  opacity: 0.72;
  box-shadow: 0 0 6px rgba(118, 85, 255, 0.5);
  pointer-events: none;
}

.flow .route-a {
  left: 110px;
  top: 101px;
  width: 140px;
  transform: rotate(43deg);
}

.flow .route-b {
  left: 275px;
  top: 265px;
  width: 206px;
  transform: rotate(49deg);
}

.flow .route-ball {
  position: absolute;
  z-index: 2;
  display: block;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 7px 3px #7655ff,
    0 0 22px 7px rgba(118, 85, 255, 0.65);
  offset-path: path("M 110 101 L 212 196 L 275 265 L 410 420");
  offset-rotate: 0deg;
  animation: route-travel 5s linear infinite;
  pointer-events: none;
}

@keyframes route-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.flow .flow-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  background: linear-gradient(145deg, #2b2e35FF, #1c1d21dd);
  border: 1px solid #3a3d45;
  color: #fff;
  border-radius: 0 22px 0 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.flow .flow-card small,
.flow .flow-label small {
  font:
    600 10px/1.2 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  letter-spacing: 0.04em;
  color: #777b86;
}

.flow .flow-card strong {
  font:
    700 16px/1.2 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}

.flow .flow-card > span:not(.channel-icons):not(.candidate-dots),
.flow .channel-list,
.flow .flow-label strong {
  font:
    400 11px/1.55 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  color: #8e919b;
}

.flow .vacancy {
  width: 215px;
  left: 10px;
  top: 30px;
}

.flow .channels-card {
  width: 260px;
  left: 145px;
  top: 195px;
  border-radius: 22px 0 22px;
}

.flow .responses {
  width: 240px;
  left: auto !important;
  right: 10px;
  bottom: 10px;
  border-radius: 0 0 0 22px;
}

.channel-list {
  margin: 0;
  color: #b0b2ba;
}

.channel-icons {
  display: flex;
  gap: 8px;
}

.channel-icons b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2b2e35;
  font-size: 10px;
  color: #e5e5e8;
}

.candidate-dots {
  display: flex;
  margin: 3px 0;
}

.candidate-dots b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: -4px;
  border: 1px solid #17191e;
}

.candidate-dots b:nth-child(1) {
  background: #6554ff;
}

.candidate-dots b:nth-child(2) {
  background: #8d65cf;
}

.candidate-dots b:nth-child(3) {
  background: #d44ce4;
}

.candidate-dots b:nth-child(4) {
  background: #3e7fe7;
}

.candidate-dots b:nth-child(5) {
  background: #30343d;
}

.flow .flow-label {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 104px;
  min-height: 60px;
  padding: 12px 14px;
  background: #111318;
  border: 1px solid #363943;
}

.flow .flow-label strong {
  color: #fff;
}

.flow .source {
  right: 30px;
  top: 95px;
}

.flow .result {
  left: 10px;
  bottom: 95px;
}

.flow:before,
.flow:after {
  display: none !important;
}

.flow .source {
  right: 55px;
  left: auto;
  top: 105px;
  bottom: auto;
  border-radius: 0;
}

.flow .result {
  left: 10px;
  right: auto;
  bottom: 145px;
  top: auto;
  border-radius: 0;
}

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
}

.marquee span:after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7655ff;
  box-shadow: 0 0 7px #7655ff;
}

@media (max-width: 900px) {
  .flow {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 550px;
    height: 520px;
    margin: 45px auto 0;
  }

  .metrics > div + div {
    padding-left: 46px;
  }
}

@media (max-width: 520px) {
  .metrics > div {
    padding-left: 18px !important;
  }

  .metrics > div:before {
    left: 0 !important;
  }

  .flow {
    transform: scale(0.82);
    transform-origin: top left;
    width: 122%;
    margin-bottom: -80px;
  }
}

/* Balanced CTA labels and second-screen rhythm */
.button {
  position: relative;
  justify-content: center;
  text-align: center;
  padding-left: 52px;
  padding-right: 52px;
}

.button > span[aria-hidden="true"] {
  position: absolute;
  right: 22px;
}

.button.small {
  padding-left: 38px;
  padding-right: 38px;
}

.button.small > span[aria-hidden="true"] {
  right: 16px;
}

.statement h2 b {
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: -0.05em;
}

.statement > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.statement > div p {
  margin: 0;
}

@media (max-width: 800px) {
  .statement {
    gap: 26px;
    padding: 64px 0 36px;
  }

  .statement h2 {
    font-size: clamp(42px, 8.5vw, 52px);
  }

  #how.section {
    padding-top: 44px;
  }
}

/* Unified information sections and separated process cards */
.steps.five {
  border: 0;
  gap: 16px;
  background: transparent;
}

.steps.five article,
.steps.five article + article {
  min-height: 250px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  border: 1px solid #30323a;
  background: rgba(15, 16, 20, 0.88);
}

.steps.five article > span,
.steps.five article h3 {
  margin: 0;
  font:
    500 24px/1.2 Inter,
    "SF Pro Display",
    "Segoe UI",
    Arial,
    sans-serif;
}

.steps.five article > span {
  color: #7655ff;
}

.steps.five article p {
  margin: 0;
  line-height: 1.6;
}

.inline-cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 36px;
}

.inline-cta > strong {
  font-size: 20px;
  line-height: 1.35;
}

.inline-cta .button {
  align-self: center;
}

@media (max-width: 800px) {
  .statement,
  .head {
    gap: 28px;
  }

  .head {
    margin-bottom: 42px;
  }

  .steps.five {
    grid-template-columns: 1fr;
  }

  .steps.five article,
  .steps.five article + article {
    min-height: 0;
    padding: 26px;
    gap: 18px;
  }

  .inline-cta {
    margin-top: 22px;
    padding: 32px 22px;
  }

  .inline-cta .button {
    width: min(100%, 430px);
  }

  .hero .actions {
    gap: 24px;
    margin: 30px 0 26px;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .metrics > div {
    padding: 28px 0 28px 22px !important;
    gap: 7px;
  }

  .metrics > div + div {
    border-left: 0;
    border-top: 1px solid #34363d;
  }

  .metrics > div:before {
    left: 0 !important;
  }
}

@media (max-width: 520px) {
  .hero .actions {
    gap: 24px;
    margin: 30px 0 0;
  }

  .statement,
  .head {
    gap: 26px;
  }
}

/* Shared typography for Why, Process and Services */
.statement h2,
.head h2 {
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.statement h2 b,
.head h2 b {
  font-weight: 400;
  font-size: 0.82em;
  line-height: 1;
  letter-spacing: -0.05em;
}

.statement p,
.head p {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.services div {
  grid-template-columns: 70px 1fr;
}

.channels {
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.channels > div {
  width: 100%;
  max-width: none;
}

.channels .button {
  align-self: center;
  margin-inline: auto;
}

@media (max-width: 800px) {
  .metrics > div:before {
    left: 10px !important;
  }

  .hero .actions {
    margin-bottom: 28px;
  }

  .statement h2,
  .head h2 {
    font-size: clamp(42px, 8.5vw, 52px);
  }

  .statement p,
  .head p {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Candidate destinations */
.destinations {
  display: block;
  padding: 36px 0;
}

.destinations h3 {
  position: relative;
  margin: 0 0 28px;
  padding-left: 18px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
}

.destinations h3:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #9a6cff;
  box-shadow: 0 0 8px #795cff;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.destination-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 0 20px;
  border-bottom: 1px solid #34363d;
}

.destination-grid span {
  color: #9a6cff;
  font-size: 28px;
  line-height: 1;
}

.destination-grid strong {
  font-size: 18px;
  line-height: 1.3;
}

.destinations small {
  display: block;
  margin-top: 20px;
  color: #aaa;
}

@media (max-width: 800px) {
  .metrics > div:before {
    top: 39px;
  }

  .destinations h3 {
    font-size: 21px;
  }

  .destination-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
  }
}

/* Package cards matched to the original prototype */
#services.section {
  padding-bottom: 30px;
}

#packages.section {
  padding-top: 44px;
}

.packages {
  gap: 18px;
}

.package,
.package.featured {
  min-height: 470px;
  padding: 30px;
  background: #090a0d;
  color: #f7f7fa;
  border: 1px solid #34363d;
  border-radius: 0;
  box-shadow: none;
}

.package:hover {
  transform: translateY(-3px);
  border-color: #7655ff;
}

.package > span {
  color: #8067ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.package h3 {
  margin: 42px 0 10px;
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.package p,
.package.featured p {
  margin: 0;
  color: #a7a9b2;
  font-size: 14px;
  line-height: 1.6;
}

.package ul {
  margin: auto 0 26px;
  padding: 30px 0 0;
  list-style: none;
  color: #b8bac2;
  font-size: 13px;
  line-height: 1.55;
}

.package li {
  position: relative;
  padding: 6px 0 6px 16px;
}

.package li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7655ff;
}

.package > b {
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid #8d8f96;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
}

@media (max-width: 800px) {
  #services.section {
    padding-bottom: 16px;
  }

  #packages.section {
    padding-top: 30px;
  }

  .packages {
    gap: 14px;
  }

  .package,
  .package.featured {
    min-height: 410px;
    padding: 26px;
  }

  .package h3 {
    margin-top: 36px;
    font-size: 44px;
  }
}

/* Violet actions for services and packages */
.services .service-arrow {
  display: inline-block;
  color: #8f62ff;
  font-size: 30px;
  line-height: 1;
  font-weight: 300;
  transform: scaleX(1.5);
  transform-origin: left center;
}

.package > b {
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #7655ff;
  color: #a98aff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: 0.2s;
}

.package:hover > b {
  background: rgba(118, 85, 255, 0.09);
  border-color: #a98aff;
  color: #c5afff;
}

.package > b span {
  color: #a98aff;
}

/* Other formats and analytics hierarchy */
.formats {
  display: grid;
  gap: 0;
}

.formats h3 {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 400;
}

.formats > p {
  margin: 0 0 28px;
  color: #a2a4ad;
  font-size: 24px;
  line-height: 1.35;
}

.formats button {
  grid-template-columns: 1fr auto;
}

.analytics-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.analytics-copy h2 {
  margin: 0;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.analytics-copy h2 b {
  font-weight: 400;
  font-size: 0.82em;
  line-height: 1;
  background: linear-gradient(90deg, #71a0ff, #c345ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.analytics-copy p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #a2a4ad;
}

.analytics-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.data {
  padding: 28px;
}

.data > .data-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.data-head span {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.data-head small {
  color: #9699a4;
  font-size: 13px;
  line-height: 1.4;
}

.data .data-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 34px 0 0;
}

.data-lists ul {
  margin: 0;
}

.analytics-callout {
  padding: 24px 26px;
  border: 1px solid #7655ff;
  color: #d7cfff;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 800px) {
  .formats h3 {
    font-size: 32px;
  }

  .formats > p {
    font-size: 22px;
  }

  .analytics-copy {
    gap: 26px;
  }

  .analytics-copy h2 {
    font-size: clamp(42px, 8.5vw, 52px);
  }

  .data .data-lists {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .analytics-callout {
    font-size: 18px;
  }
}

/* Important note, cabinet list and form hints */
.notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 30px;
  margin: 0 0 64px;
  background: #191a20;
  border: 1px solid #393b43;
}

.notice > span {
  color: #fff;
  font:
    700 18px/1.2 Arial,
    sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.notice h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
}

.notice p {
  max-width: 850px;
  margin: 0;
  color: #a2a4ad;
  font-size: 17px;
  line-height: 1.6;
}

.cabinet-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #30323a;
}

.cabinet-list article {
  position: relative;
  padding: 28px 0 28px 24px;
  border-bottom: 1px solid #30323a;
}

.cabinet-list article:before {
  content: "";
  position: absolute;
  left: 0;
  top: 38px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #795cff;
  box-shadow: 0 0 8px #795cff;
}

.cabinet-list h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}

.cabinet-list p {
  margin: 0;
  color: #a2a4ad;
  font-size: 16px;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: #b8acd9;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
}

@media (max-width: 520px) {
  .notice {
    padding: 26px 22px;
    margin-bottom: 48px;
  }

  .notice h2 {
    font-size: 22px;
  }

  .notice p {
    font-size: 16px;
  }

  .cabinet-list h3 {
    font-size: 22px;
  }
}

/* Desktop rhythm and four-column package layout */
html,
body {
  /* clip, not hidden: hidden makes html a scroll container and kills the sticky header. */
  overflow-x: clip;
}

.keep-together {
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .shell {
    width: min(1420px, calc(100% - 96px));
  }

  .hero {
    min-height: 760px;
    padding-top: 52px;
    padding-bottom: 42px;
  }

  .hero h1 {
    font-size: clamp(58px, 4.15vw, 72px);
  }

  .flow {
    right: 0;
    width: 47%;
    top: 130px;
  }

  .metrics {
    width: 650px;
    max-width: 52%;
    border-top: 1px solid #34363d;
    border-bottom: 1px solid #34363d;
  }

  .metrics > div + div {
    border-left: 0;
  }

  .statement,
  .section {
    border-top: 1px solid #2d2e33;
  }

  #how.section,
  #packages.section,
  #reviews.section {
    padding-top: 88px;
  }

  .head h2 {
    font-size: clamp(46px, 4.2vw, 64px);
  }

  .packages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .package,
  .package.featured {
    min-height: 430px;
    padding: 24px;
  }

  .package h3 {
    font-size: 36px;
    line-height: 1.05;
    margin-top: 38px;
    white-space: nowrap;
  }

  .package p {
    font-size: 13px;
  }

  .package ul {
    font-size: 12px;
    padding-top: 22px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .packages {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .keep-together {
    white-space: normal;
  }
}

/* Compact section transitions, readable modal choice and cabinet cards */
.modal .choice {
  margin: 22px 0 10px;
  padding: 16px 18px;
  background: #171923;
  border: 1px solid #7655ff;
  color: #d9d2ff;
  font-weight: 400;
  line-height: 1.5;
}

.modal .choice strong {
  color: #fff;
  font-weight: 600;
}

.cabinet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-top: 0;
}

.cabinet-list article {
  min-height: 180px;
  padding: 30px 30px 30px 52px;
  background: #111216;
  border: 1px solid #30323a;
}

.cabinet-list article:before {
  left: 28px;
  top: 40px;
}

.cabinet-list h3 {
  margin-bottom: 18px;
}

.marquee + .statement {
  padding-top: 24px;
}

@media (max-width: 800px) {
  .marquee + .statement {
    padding-top: 18px;
  }

  #how.section {
    padding-bottom: 34px;
  }

  #services.section {
    padding-top: 48px;
  }

  #packages.section {
    padding-bottom: 36px;
  }

  #analytics.section {
    padding-top: 48px;
    padding-bottom: 38px;
  }

  #reviews.section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .cabinet-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cabinet-list article {
    min-height: 0;
    padding: 26px 24px 26px 48px;
  }

  .cabinet-list article:before {
    left: 24px;
    top: 36px;
  }

  .cabinet-list h3 {
    margin-bottom: 12px;
  }
}

/* Unified spacing across desktop, tablet and mobile */
#how.section {
  padding-bottom: 42px;
}

#services.section {
  padding-top: 62px;
  padding-bottom: 38px;
}

#packages.section {
  padding-top: 52px;
  padding-bottom: 42px;
}

#analytics.section {
  padding-top: 58px;
  padding-bottom: 42px;
}

#reviews.section {
  padding-top: 54px;
  padding-bottom: 38px;
}

.contact {
  padding-top: 58px;
}

.formats {
  margin-top: 38px;
}

.channels {
  width: min(900px, 100%);
  margin: 38px auto 0;
}

.notice {
  width: min(920px, 100%);
  margin: 0 auto 54px;
}

.notice p {
  max-width: 760px;
}

.cabinet-list article {
  min-height: 0;
}

@media (max-width: 1100px) {
  #how .head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #how .head h2 {
    max-width: 760px;
  }

  #how .head p {
    max-width: 640px;
    margin: 0;
  }

  .channels,
  .notice {
    width: min(760px, 100%);
  }
}

@media (max-width: 800px) {
  #how.section {
    padding-top: 38px;
    padding-bottom: 24px;
  }

  #services.section {
    padding-top: 36px;
    padding-bottom: 24px;
  }

  #packages.section {
    padding-top: 34px;
    padding-bottom: 24px;
  }

  #analytics.section {
    padding-top: 36px;
    padding-bottom: 24px;
  }

  #reviews.section {
    padding-top: 34px;
    padding-bottom: 24px;
  }

  .contact {
    padding-top: 34px;
    padding-bottom: 52px;
  }

  .formats {
    margin-top: 28px;
    padding-top: 24px;
  }

  .channels {
    margin-top: 28px;
    padding: 24px 20px;
  }

  .notice {
    margin-bottom: 34px;
  }
}

/* Final responsive rhythm and analytics hierarchy */
.statement {
  padding-top: 58px;
  padding-bottom: 42px;
}

.data ul b {
  display: block;
  padding: 0 0 10px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
}

@media (min-width: 801px) and (max-width: 1100px) {
  .statement {
    padding-top: 48px;
    padding-bottom: 36px;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .analytics-copy {
    max-width: 760px;
  }

  .analytics-side {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    align-items: stretch;
    gap: 18px;
  }

  .analytics-callout {
    display: flex;
    align-items: center;
  }

  .data .data-lists {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .statement {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .destinations {
    padding-bottom: 10px;
  }

  .destinations small {
    margin-top: 14px;
  }

  #packages.section {
    padding-top: 18px;
  }

  .data ul b {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .analytics-copy h2 {
    font-size: 40px;
  }
  .analytics-copy h2 b {
    font-size: 1em;
  }
}

/* Tablet-specific navigation, statement and analytics composition */
@media (min-width: 801px) and (max-width: 1100px) {
  .nav {
    height: 74px;
    gap: 18px;
    padding-inline: 18px;
  }

  .nav nav {
    align-items: center;
    gap: 22px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .nav nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
  }

  .nav .logo img {
    width: 132px;
  }

  .nav .button.small {
    padding: 12px 16px;
    gap: 22px;
    font-size: 12px;
  }

  .hero {
    padding-top: 34px;
  }

  .statement {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px 38px;
    align-items: start;
  }

  .statement > .section-no {
    grid-column: 1/-1;
  }

  .statement h2 {
    font-size: clamp(44px, 6vw, 58px);
  }

  .statement > div {
    gap: 20px;
  }

  .analytics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .analytics-copy {
    display: contents;
  }

  .analytics-copy > .section-no {
    grid-row: 1;
  }

  .analytics-copy > h2 {
    grid-row: 2;
    margin: 0;
    max-width: 760px;
  }

  .analytics-copy > p {
    grid-row: 3;
    margin: 0;
    max-width: 760px;
  }

  .analytics-side {
    grid-row: 4;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .analytics-callout {
    min-height: 0;
    padding: 22px 26px;
  }

  .analytics-copy > .button {
    grid-row: 5;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Remove the inherited gap before the process section */
#how.section {
  padding-top: 30px;
}

@media (min-width: 801px) and (max-width: 1100px) {
  .nav nav {
    gap: 18px;
  }

  .nav .button.small {
    min-width: 148px;
    justify-content: space-between;
    gap: 0;
    white-space: nowrap;
  }

  .nav .button.small span {
    margin-left: 16px;
    flex: 0 0 auto;
  }

  #how.section {
    padding-top: 26px;
  }

  #packages.section {
    padding-bottom: 18px;
  }

  #analytics.section {
    padding-top: 24px;
  }
}

@media (max-width: 800px) {
  #how.section {
    padding-top: 22px;
  }
}

/* Static Cloudflare Pages interactions */
.modal[hidden] {
  display: none;
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
}

.form-status[data-state="success"] {
  color: #9af0b0;
}

.form-status[data-state="error"] {
  color: #ffaaa5;
}

.button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

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

/* Layout corrections: hero headline vs infographic, card row alignment */
@media (min-width: 901px) {
  .hero h1,
  .hero .lead,
  .metrics {
    max-width: 52%;
  }

  .flow {
    right: 0;
    width: 47%;
  }
}

@media (max-width: 400px) {
  /* 156% * 0.64 fills the column exactly; the diagram needs ~405px of internal width. */
  .flow {
    width: 156%;
    transform: scale(0.64);
    margin-bottom: -187px;
  }
}

.metrics {
  grid-template-rows: auto auto;
}

.metrics > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 5px;
}

@media (min-width: 1101px) {
  .packages {
    grid-template-rows: auto auto auto 1fr auto;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .packages {
    grid-template-rows: repeat(2, auto auto auto 1fr auto);
  }
}

@media (min-width: 801px) {
  .package {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }

  /* subgrid already bottom-aligns the CTA row; auto top margin would re-stagger the lists. */
  .package ul {
    margin-top: 0;
  }
}

/* Header: full-bleed bar, content on the same gutters as .shell.
   100vw included the scrollbar, which pushed the bar right of the content. */
.nav {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(24px, calc((100% - 1170px) / 2));
}

@media (min-width: 1101px) {
  .nav {
    padding-inline: max(48px, calc((100% - 1420px) / 2));
  }
}

/* The ambient glow is decoration and may bleed past the section; clipping it
   drew a hard vertical edge. Nothing else in the hero overflows any more. */
.hero {
  overflow: visible;
}

/* The route ball follows an offset-path in absolute pixels, so the diagram is a
   fixed 650x535 canvas: anchoring parts to the container edge made them drift
   apart as it resized. Scale the whole canvas instead of reflowing it. */
.flow {
  width: 650px;
  height: 535px;
}

.flow .source {
  left: 500px;
  right: auto;
}

.flow .responses {
  left: 400px !important;
  right: auto;
  bottom: 0;
}

@media (min-width: 1400px) {
  .flow {
    zoom: 0.92;
  }
}

@media (min-width: 1600px) {
  .flow {
    zoom: 1;
  }
}

@media (min-width: 1250px) and (max-width: 1399px) {
  .flow {
    zoom: 0.84;
  }
}

@media (min-width: 1101px) and (max-width: 1249px) {
  .flow {
    zoom: 0.74;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .flow {
    zoom: 0.62;
  }
}

@media (max-width: 900px) {
  .flow {
    width: 650px;
    max-width: none;
    height: 535px;
    zoom: 0.95;
    transform: none;
    margin: 45px auto 0;
  }
}

/* Each step keeps the 650px canvas inside the column: zoom * 650 <= width - 48. */
@media (max-width: 760px) {
  .flow {
    zoom: 0.85;
  }
}

@media (max-width: 680px) {
  .flow {
    zoom: 0.75;
  }
}

@media (max-width: 600px) {
  .flow {
    zoom: 0.68;
  }
}

@media (max-width: 520px) {
  .flow {
    zoom: 0.58;
  }
}

@media (max-width: 430px) {
  .flow {
    zoom: 0.5;
  }
}

@media (max-width: 380px) {
  .flow {
    zoom: 0.44;
  }
}

@media (max-width: 340px) {
  .flow {
    zoom: 0.4;
  }
}

/* 1fr floors at min-content, so long words pushed the fifth column past the
   container between 901 and 1100px. */
@media (min-width: 901px) {
  .steps.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  /* 24px headings do not fit a fifth of this width; long words spilled past
     the card padding. */
  .steps.five article,
  .steps.five article + article {
    padding: 20px;
  }
}

.steps.five article h3 {
  overflow-wrap: break-word;
}

@media (min-width: 901px) {
  /* One fifth of the row is too narrow for a fixed 24px heading below ~1280px. */
  .steps.five article h3 {
    font-size: clamp(17px, 1.875vw, 24px);
  }
}

/* The ticker duplicates its list and shifts by half its width, so the spacing
   between the two copies has to come from the items, not from a flex gap -
   a gap adds one extra step that the -50% shift does not account for. */
.marquee div {
  gap: 0;
}

.marquee span {
  margin-right: 28px;
}

/* script.js clones the list until the strip is wider than the viewport and sets
   the shift to exactly one copy, so the loop has no seam. */
@keyframes ticker {
  to {
    transform: translateX(calc(-1 * var(--ticker-shift, 50%)));
  }
}

/* Widen the contact card by its own padding so the text inside sits on the same
   gutters as every other section (1420 + 2 * 48). */
@media (min-width: 1101px) {
  .contact-grid {
    width: min(1516px, 100%);
  }
}

@media (max-width: 1100px) {
  .contact-grid {
    width: 100%;
    padding-inline: 24px;
  }
}

@media (max-width: 380px) {
  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 9px 12px;
  }
}

/* Footer link that opens the privacy dialog: a button, styled as body text. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.link-button:hover {
  color: #fff;
}

.modal-legal .modal-card {
  width: min(760px, 100%);
}

.modal-legal h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.modal-legal h3 {
  margin: 30px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.modal-legal p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #b0b2ba;
}

.modal-legal a {
  color: #a894ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal-legal .legal-date {
  color: #8d8f99;
}

@media (max-width: 560px) {
  .modal-legal .modal-card {
    --card-pad-x: 20px;
    --card-pad-y: 28px;
    padding: var(--card-pad-y) var(--card-pad-x);
  }
}

/* Above the sticky header, which sits at 1000. */
.modal {
  z-index: 2000;
}

/* One column below 560px: the privacy link is kept on one line and does not
   fit half of a narrow footer. */
@media (max-width: 560px) {
  footer {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }

  footer span {
    text-align: left;
  }
}

/* Sticky, not absolute: the card itself scrolls, so an absolute button scrolls
   out of view with the content. The negative margins cancel the card padding so
   the button sits 12px from its corner whatever that padding is. */
.modal-card {
  --card-pad-x: 45px;
  --card-pad-y: 45px;
}

.modal-card .close {
  position: sticky;
  /* sticky offsets are measured from the content box, so the padding is added
     back in; subtracting it pins the button 12px from the card corner. */
  top: calc(12px - var(--card-pad-y));
  right: auto;
  float: right;
  margin: calc(12px - var(--card-pad-y)) calc(12px - var(--card-pad-x)) 0 16px;
  line-height: 1;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* the text scrolls underneath, so the button needs the card's own backdrop */
  background: #111216;
}