.ma-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
  isolation: isolate;
}

.ma-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(40% 55% at 74% 46%, var(--glow-a), transparent 70%),
    radial-gradient(30% 40% at 12% 90%, var(--glow-b), transparent 70%);
}

.ma-radar {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -9vw;
  width: min(66vw, 1000px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.ma-radar__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 141, 255, 0.07), transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.ma-radar__canvas,
.ma-ring__disc canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ma-radar__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ma-radar__ring--edge {
  width: 62%;
  height: 62%;
  border: 1px dashed var(--line-strong);
  box-shadow: 0 0 80px rgba(77, 141, 255, 0.12), inset 0 0 80px rgba(77, 141, 255, 0.1);
}

.ma-radar__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.ma-radar__pin i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--ice);
  box-shadow: 0 0 0 6px rgba(168, 212, 240, 0.12), 0 0 30px var(--ice), 0 0 90px var(--blue);
}

.ma-radar__pin b {
  position: absolute;
  top: 26px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(4, 6, 10, 0.7);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.ma-hero .crumbs {
  margin-bottom: clamp(28px, 5vh, 56px);
}

.ma-hero__title {
  margin: 0 0 0 -0.04em;
  font-weight: 800;
  font-size: clamp(64px, 11vw, 188px);
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.ma-hero__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(18px, 3vh, 30px) 0.04em;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: var(--t-label);
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ma-hero__kicker::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--ice);
  box-shadow: 0 0 12px var(--ice);
}

.ma-hero__title .line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.05em 0.1em;
  margin-bottom: -0.1em;
}

.ma-hero__title .line > span {
  display: inline-block;
}

.ma-hero__title .serif {
  font-weight: 400;
  color: var(--ice);
  font-size: 1.08em;
  letter-spacing: -0.035em;
}

.ma-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 34em) auto;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-top: clamp(24px, 4vh, 44px);
}

.ma-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ma-breath__text {
  max-width: 20em;
  color: var(--ink-3);
}

.ma-breath__text .serif {
  font-size: 1.08em;
}

.ma-breath__rule {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 34em;
}

.ma-ts {
  position: relative;
  border-top: 1px solid var(--line);
}

.ma-ts__pin {
  position: relative;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ma-ts__atmos {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 60% at 68% 52%, var(--glow-a), transparent 70%),
    radial-gradient(30% 40% at 20% 20%, rgba(168, 212, 240, 0.05), transparent 70%);
  pointer-events: none;
}

.ma-ts__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: 72px;
}

.ma-ts__title {
  margin: 20px 0 0;
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.ma-ts__title .serif {
  color: var(--ice);
  font-size: 1.08em;
}

.ma-ts__beats {
  list-style: none;
  margin: clamp(20px, 3vh, 32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.ma-ts__beat {
  padding: clamp(12px, 1.8vh, 18px) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.32;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.ma-ts__beat.is-on {
  opacity: 1;
}

.ma-ts__beat h3 {
  margin: 0;
  font-size: var(--t-q);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.ma-ts__beat p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  max-width: 30em;
}

.ma-ts__stage {
  position: relative;
  height: min(80svh, 780px);
  display: grid;
  place-items: center;
  perspective: 1600px;
}

.ma-phone {
  position: relative;
  height: min(74svh, 700px);
  aspect-ratio: 0.486;
  will-change: transform;
}

.ma-phone__frame {
  position: relative;
  height: 100%;
  padding: 3.2%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(145deg, #1a2130, #070a10 40%, #121826);
  box-shadow:
    inset 0 0 0 1px rgba(168, 212, 240, 0.18),
    inset 0 0 0 5px #05070b,
    0 50px 120px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(77, 141, 255, 0.18);
}

.ma-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 10.5% / 5%;
  overflow: hidden;
  background: #06080d;
  container-type: size;
}

.ma-phone__status {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 9cqw;
  padding: 0 8cqw;
  font-size: 3.6cqw;
  font-weight: 600;
  background: #06080d;
}

.ma-phone__status i {
  width: 6cqw;
  height: 2.6cqw;
  border-radius: 1cqw;
  box-shadow: inset 0 0 0 1px var(--ink-2);
  background: linear-gradient(90deg, var(--ink-2) 70%, transparent 70%);
}

.ma-phone__bar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 11cqw;
  padding: 0 5cqw;
  background: #06080d;
  border-bottom: 1px solid var(--line);
}

.ma-phone__bar b {
  font-size: 5.4cqw;
  letter-spacing: -0.04em;
}

.ma-phone__bar span {
  display: flex;
  gap: 3cqw;
}

.ma-phone__bar span i {
  width: 5cqw;
  height: 5cqw;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}

.ma-feed {
  position: absolute;
  top: 20cqw;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.ma-feed__track {
  position: relative;
  will-change: transform;
}

.ma-ghost {
  display: block;
  padding: 4cqw 0 5cqw;
  border-bottom: 1px solid var(--line);
  opacity: 0.9;
}

.ma-ghost__head {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4cqw 3cqw;
}

.ma-ghost__head i {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.ma-ghost__head em {
  width: 30cqw;
  height: 2.6cqw;
  border-radius: 2cqw;
  background: var(--line-strong);
}

.ma-ghost__img {
  display: block;
  aspect-ratio: 1;
  background: var(--g, var(--bg-2));
}

.ma-ghost--a { --g: radial-gradient(70% 60% at 30% 30%, rgba(77, 141, 255, 0.55), transparent 70%), linear-gradient(160deg, #141b29, #0a0e16); }

.ma-ghost--b { --g: radial-gradient(60% 50% at 70% 60%, rgba(169, 182, 198, 0.45), transparent 70%), linear-gradient(200deg, #262f40, #0b0f16); }

.ma-ghost--c { --g: radial-gradient(80% 50% at 50% 100%, rgba(61, 90, 128, 0.95), transparent 70%), linear-gradient(180deg, #1a2336, #080b12); }

.ma-ghost--d { --g: radial-gradient(50% 50% at 40% 50%, rgba(168, 212, 240, 0.4), transparent 70%), linear-gradient(120deg, #222b3c, #090c13); }

.ma-ghost--e { --g: radial-gradient(70% 70% at 80% 20%, rgba(107, 122, 141, 0.65), transparent 70%), linear-gradient(90deg, #1d2534, #0a0d14); }

.ma-ghost__lines {
  display: grid;
  gap: 2cqw;
  padding: 4cqw 4cqw 0;
}

.ma-ghost__lines i {
  height: 2.4cqw;
  border-radius: 2cqw;
  background: var(--line-strong);
}

.ma-ghost__lines i + i {
  width: 60%;
  background: var(--line);
}

.ma-ad {
  position: relative;
  padding: 4cqw 0 4cqw;
  border-bottom: 1px solid var(--line);
  background: #06080d;
}

.ma-ad::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--ice), inset 0 0 40px rgba(168, 212, 240, 0.25);
  opacity: var(--ad-glow, 0);
}

.ma-ad__head {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4cqw 3cqw;
}

.ma-ad__av {
  position: relative;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1d2a40, #080b12);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.ma-ad__av i {
  position: absolute;
  top: 50%;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 0.5cqw;
  background: var(--ice);
  transform: translateY(-50%) rotate(45deg);
}

.ma-ad__av i:first-child {
  left: 2.2cqw;
}

.ma-ad__av i:last-child {
  right: 2.2cqw;
  background: var(--navy);
}

.ma-ad__who {
  display: grid;
  line-height: 1.2;
}

.ma-ad__who b {
  font-size: 3.6cqw;
  font-weight: 600;
}

.ma-ad__who small {
  font-size: 2.9cqw;
  color: var(--ink-3);
}

.ma-ad__dots {
  display: flex;
  gap: 1cqw;
  margin-left: auto;
}

.ma-ad__dots i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: var(--ink-2);
}

.ma-ad__cap {
  margin: 0;
  padding: 0 4cqw 3cqw;
  font-size: 3.4cqw;
  line-height: 1.4;
  color: var(--ink);
}

.ma-ad__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.ma-ad__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-ad__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3cqw;
  padding: 3cqw 4cqw;
  background: #0d121c;
}

.ma-ad__cta span:first-child {
  display: grid;
  line-height: 1.25;
}

.ma-ad__cta small {
  font-size: 2.6cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ma-ad__cta b {
  font-size: 3.4cqw;
  font-weight: 600;
}

.ma-ad__btn {
  position: relative;
  flex: none;
  padding: 2.2cqw 3.6cqw;
  border-radius: 1.8cqw;
  font-size: 3.2cqw;
  font-weight: 600;
  color: var(--bg);
  background: var(--ink);
}

.ma-ad__react {
  display: flex;
  gap: 4cqw;
  padding: 3.4cqw 4cqw 0;
}

.ma-ad__react i {
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}

.ma-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16cqw;
  height: 16cqw;
  margin: -8cqw 0 0 -8cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 244, 250, 0.55), rgba(168, 212, 240, 0.15) 60%, transparent 70%);
  box-shadow: 0 0 0 1.5px rgba(238, 244, 250, 0.6);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

.ma-form {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3cqw 6cqw 8cqw;
  border-radius: 7cqw 7cqw 0 0;
  background: #0f1420;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--line-strong);
  transform: translateY(105%);
}

.ma-form__grab {
  display: block;
  width: 12cqw;
  height: 1.2cqw;
  margin: 0 auto 5cqw;
  border-radius: 1cqw;
  background: var(--line-strong);
}

.ma-form__kicker {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 2.6cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ma-form__title {
  margin: 1.6cqw 0 4.4cqw;
  font-size: 6cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.ma-form__field {
  display: grid;
  gap: 1cqw;
  padding: 2.4cqw 0;
  border-bottom: 1px solid var(--line-strong);
}

.ma-form__field small {
  font-size: 2.6cqw;
  color: var(--ink-3);
}

.ma-form__field span {
  font-size: 3.7cqw;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  clip-path: inset(0 var(--fill-cut, 0%) 0 0);
}

.ma-form__q {
  margin: 4cqw 0 2.4cqw;
  font-size: 3.4cqw;
  font-weight: 600;
}

.ma-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
}

.ma-form__chips span {
  padding: 1.8cqw 3.2cqw;
  border-radius: 999px;
  font-size: 3cqw;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}

.ma-form__chips span.is-picked {
  color: var(--bg);
  background: var(--ice);
  box-shadow: none;
}

.ma-form__submit {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 5cqw;
  height: 11cqw;
  border-radius: 3cqw;
  background: var(--ice);
  color: var(--bg);
  font-size: 3.8cqw;
  overflow: hidden;
}

.ma-form__submit b,
.ma-form__submit em {
  grid-area: 1 / 1;
  font-weight: 700;
  font-style: normal;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}

.ma-form__submit em {
  transform: translateY(120%);
  opacity: 0;
}

.ma-form__submit.is-sent b {
  transform: translateY(-120%);
  opacity: 0;
}

.ma-form__submit.is-sent em {
  transform: none;
  opacity: 1;
}

.ma-ping {
  position: absolute;
  z-index: 5;
  top: 16%;
  right: -34%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 16px;
  background: rgba(13, 18, 28, 0.86);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(77, 141, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  opacity: 0;
}

.ma-ping i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}

.ma-ping span {
  display: grid;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ma-ping b {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

.ma-lift {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}

.ma-lift__stack {
  position: relative;
  width: min(52svh, 440px);
  aspect-ratio: 1;
  margin-right: min(280px, 22vw);
  transform-style: preserve-3d;
  will-change: transform;
}

.ma-layer {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: calc(var(--t) * 100%);
  height: calc(var(--h) * 100%);
  transform-style: preserve-3d;
}

.ma-layer__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(168, 212, 240, 0.16);
}

.ma-layer__clip img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(100% / var(--h));
  top: calc(-100% * var(--t) / var(--h));
}

.ma-layer__tag {
  position: absolute;
  left: calc(100% + 34px);
  top: 50%;
  width: min(250px, 20vw);
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.ma-layer__tag::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: 0.7em;
  width: 26px;
  height: 1px;
  background: var(--ice);
  box-shadow: 0 0 8px var(--ice);
}

.ma-layer__tag b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}

.reduced .ma-ts__pin,
.no-anim .ma-ts__pin {
  height: auto;
  min-height: 0;
  padding: var(--space-section) 0;
}

.reduced .ma-ts__beat,
.no-anim .ma-ts__beat {
  opacity: 1;
}

.reduced .ma-ts__stage,
.no-anim .ma-ts__stage {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.reduced .ma-feed__track > .ma-ghost:nth-child(-n + 10),
.no-anim .ma-feed__track > .ma-ghost:nth-child(-n + 10) {
  display: none;
}

.reduced .ma-lift,
.no-anim .ma-lift {
  position: relative;
  opacity: 1;
  display: block;
}

.reduced .ma-lift__stack,
.no-anim .ma-lift__stack {
  width: 280px;
  margin: 0 250px 0 0;
}

.reduced .ma-layer[data-layer="0"],
.no-anim .ma-layer[data-layer="0"] {
  transform: translateY(-24px);
}

.reduced .ma-layer[data-layer="2"],
.no-anim .ma-layer[data-layer="2"] {
  transform: translateY(14px);
}

.reduced .ma-layer[data-layer="3"],
.no-anim .ma-layer[data-layer="3"] {
  transform: translateY(30px);
}

.reduced .ma-layer__tag,
.no-anim .ma-layer__tag {
  width: 220px;
}

.ma-proof {
  overflow-x: clip;
}

.ma-proof__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-bottom: var(--space-head);
}

.ma-proof__head .h-lg {
  margin: 20px 0 28px;
}

.ma-creatives {
  position: relative;
  height: clamp(340px, 38vw, 560px);
  perspective: 1200px;
}

.ma-creative {
  position: absolute;
  margin: 0;
  width: 62%;
  transform-style: preserve-3d;
  will-change: transform;
}

.ma-creative img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line-strong), 0 0 80px rgba(77, 141, 255, 0.14);
}

.ma-creative--a {
  left: 0;
  top: 0;
  z-index: 2;
  --rest: -5deg;
  rotate: -5deg;
}

.ma-creative--b {
  right: 0;
  bottom: 0;
  width: 52%;
  rotate: 6deg;
}

.ma-rings {
  border-top: 1px solid var(--line);
  background: radial-gradient(50% 50% at 50% 60%, rgba(77, 141, 255, 0.07), transparent 70%);
}

.ma-rings .h-lg {
  max-width: 11em;
}

.ma-rings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 80px);
  max-width: 1120px;
  margin: 0 auto;
}

.ma-ring {
  margin: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 28px;
}

.ma-ring__disc {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
}

.ma-ring__edge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rad) * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 60px rgba(77, 141, 255, 0.12);
}

.ma-ring__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--ice);
  box-shadow: 0 0 20px var(--ice), 0 0 60px var(--blue);
}

.ma-ring figcaption {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.ma-ring .micro {
  color: var(--ice);
}

.ma-ring b {
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ma-ring p {
  margin: 0;
  max-width: 24em;
  color: var(--ink-2);
}

.ma-rings__plus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  max-width: 44em;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-2);
}

.ma-run {
  border-top: 1px solid var(--line);
}

.ma-run__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.ma-run__side {
  position: sticky;
  top: 120px;
}

.ma-run__side .h-lg {
  margin: 20px 0 26px;
}

.ma-run__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-run__item {
  position: relative;
  padding: clamp(28px, 3.6vw, 48px) 0;
  border-top: 1px solid var(--line);
  opacity: 0.38;
  transition: opacity 0.8s var(--ease-out);
}

.ma-run__item:last-child {
  border-bottom: 1px solid var(--line);
}

.ma-run__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--ice), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-out);
}

.ma-run__item.is-on {
  opacity: 1;
}

.ma-run__item.is-on::before {
  transform: none;
}

.ma-run__item h3 {
  margin: 0;
  font-size: var(--t-h4);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.ma-run__item p {
  margin: 14px 0 0;
  color: var(--ink-2);
  max-width: 36em;
}

.reduced .ma-run__item,
.no-anim .ma-run__item {
  opacity: 1;
}

.ma-voice {
  border-top: 1px solid var(--line);
  background: radial-gradient(40% 50% at 20% 30%, rgba(77, 141, 255, 0.08), transparent 70%);
}

.ma-quote {
  position: relative;
  margin: 0 0 clamp(60px, 8vw, 110px);
  max-width: 1100px;
}

.ma-quote blockquote {
  margin: 0;
  max-width: 24em;
  font-size: var(--t-h4);
  color: var(--ink-3);
}

.ma-quote .serif {
  font-size: 1.08em;
}

.ma-quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.ma-quote figcaption img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ma-quote figcaption span {
  display: grid;
  gap: 2px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ma-quote figcaption b {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

.ma-voice__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}

.ma-win {
  margin: 0;
}

.ma-win__shot {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 90px rgba(77, 141, 255, 0.12);
  rotate: -2deg;
}

.ma-win__shot img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ma-win figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ma-win figcaption i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue);
}

.ma-results {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.ma-result {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 20px;
  gap: 24px;
  align-items: center;
  min-height: 56px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur-ui) var(--ease-out), opacity var(--dur-micro);
}

.ma-results:hover .ma-result {
  opacity: 0.4;
}

.ma-results:hover .ma-result:hover {
  opacity: 1;
  padding-left: 14px;
}

.ma-result__num {
  font-weight: 650;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, var(--ice) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.ma-result__num em {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 0.7em;
  margin: 0 0.12em;
  -webkit-text-fill-color: var(--ink-3);
}

.ma-result__who {
  display: grid;
  gap: 4px;
  font-size: 14px;
  color: var(--ink-3);
}

.ma-result__who b {
  font-size: var(--t-q);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ma-result svg {
  width: 18px;
  height: 18px;
  color: var(--ice);
}

.ma-steps .head-split .h-lg {
  margin-top: 20px;
}

.ma-steps {
  border-top: 1px solid var(--line);
}

.ma-steps__list {
  --p: 0;
  --pad: clamp(90px, 14vw, 220px);
  --line-x: 6px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--pad);
}

.ma-steps__list::before,
.ma-steps__list::after {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.ma-steps__list::after {
  background: linear-gradient(180deg, var(--ice), var(--blue));
  box-shadow: 0 0 12px var(--ice);
  transform-origin: top;
  transform: scaleY(var(--p));
}

.ma-step {
  position: relative;
  padding: clamp(32px, 4.4vw, 60px) 0;
  border-top: 1px solid var(--line);
}

.ma-step__num {
  display: none;
  position: absolute;
  right: calc(100% + clamp(24px, 3vw, 48px));
  top: clamp(24px, 3.6vw, 50px);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  transition: color 0.9s var(--ease-out), -webkit-text-stroke-color 0.9s var(--ease-out);
}

.ma-step.is-on .ma-step__num {
  color: var(--ice);
}

.ma-step::before {
  content: "";
  position: absolute;
  top: calc(clamp(24px, 3.6vw, 50px) + 0.2em);
  left: calc(var(--line-x) - var(--pad) - 5px);
  width: 11px;
  height: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}

.ma-step.is-on::before {
  background: var(--ice);
  box-shadow: 0 0 14px var(--ice);
}

.ma-step__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px clamp(24px, 4vw, 64px);
}

.ma-step__body .micro {
  grid-column: 1 / -1;
  color: var(--ice);
}

.ma-step__body h3 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.ma-step__body p {
  margin: 0;
  color: var(--ink-2);
  max-width: 34em;
}

.reduced .ma-steps__list,
.no-anim .ma-steps__list {
  --p: 1;
}

.reduced .ma-step .ma-step__num,
.no-anim .ma-step .ma-step__num {
  color: var(--ice);
}

.ma-proof .stat__num {
  font-size: clamp(44px, 4vw, 64px);
  margin: 0 0 12px;
}

.ma-more {
  border-top: 1px solid var(--line);
}

.ma-more .link-list a > span {
  display: block;
}

@media (max-width: 1020px) {
  .ma-proof__top,
  .ma-voice__grid {
    grid-template-columns: 1fr;
  }
  .ma-creatives {
    height: clamp(360px, 70vw, 560px);
    max-width: 640px;
  }
  .ma-run__grid {
    grid-template-columns: 1fr;
  }
  .ma-run__side {
    position: static;
  }
}

@media (max-width: 820px) {
  .ma-hero {
    align-items: flex-end;
    padding-top: 120px;
  }
  .ma-radar__pin b {
    display: none;
  }
  .ma-radar {
    top: -20px;
    right: 50%;
    width: 128vw;
    transform: translateX(50%);
  }
  .ma-hero__row {
    grid-template-columns: 1fr;
  }
  .ma-ts__pin {
    min-height: 0;
    align-items: stretch;
  }
  .ma-ts__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding-top: 76px;
    padding-bottom: 20px;
    height: 100%;
  }
  .ma-ts__title {
    margin-top: 12px;
    font-size: clamp(34px, 9vw, 48px);
  }
  .ma-ts__beats {
    position: relative;
    display: grid;
    border: 0;
  }
  .ma-ts__beat {
    grid-area: 1 / 1;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  }
  .ma-ts__beat.is-on {
    opacity: 1;
    transform: none;
  }
  .ma-ts__beat p {
    font-size: 14px;
  }
  .ma-ts__stage {
    height: 100%;
    min-height: 0;
  }
  .ma-phone {
    height: min(100%, 560px);
  }
  .ma-ping {
    right: 4%;
    top: 9%;
    padding: 9px 14px 9px 12px;
  }
  .ma-ping b {
    font-size: 13px;
  }
  .ma-lift__stack {
    width: min(50vw, 300px);
    margin-right: 42vw;
  }
  .ma-layer__tag {
    left: calc(100% + 18px);
    width: 38vw;
    font-size: 0;
    line-height: 1.35;
  }
  .ma-layer__tag b {
    margin: 0;
  }
  .ma-layer__tag::before {
    width: 12px;
    right: calc(100% + 4px);
  }
  .reduced .ma-ts__grid,
  .no-anim .ma-ts__grid {
    height: auto;
    padding-top: 0;
  }
  .reduced .ma-ts__beats,
  .no-anim .ma-ts__beats {
    display: block;
  }
  .reduced .ma-ts__beat,
  .no-anim .ma-ts__beat {
    opacity: 1;
    transform: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .reduced .ma-phone,
  .no-anim .ma-phone {
    height: 560px;
    max-height: 130vw;
  }
  .reduced .ma-lift__stack,
  .no-anim .ma-lift__stack {
    width: 50vw;
    margin: 0 42vw 0 0;
  }
  .reduced .ma-layer__tag,
  .no-anim .ma-layer__tag {
    width: 38vw;
  }
  .ma-rings__grid {
    gap: 16px;
  }
  .ma-ring {
    gap: 16px;
    align-content: start;
  }
  .ma-ring figcaption {
    gap: 6px;
  }
  .ma-ring p {
    font-size: 14px;
    line-height: 1.45;
  }
  .ma-rings__plus {
    margin-top: 36px;
  }
  .ma-result {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 10px 16px;
  }
  .ma-result__who {
    grid-row: 2;
  }
  .ma-result svg {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
  .ma-steps__list {
    --swipe-w: min(46%, 440px);
    --swipe-gap: 14px;
  }
  .ma-steps__list::before,
  .ma-steps__list::after,
  .ma-step::before {
    display: none;
  }
  .ma-step {
    padding: 24px 22px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .ma-step__body {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 621px) and (max-width: 1020px) {
  .ma-run__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    border-bottom: 1px solid var(--line);
  }
  .ma-run__item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .ma-ring b {
    font-size: 22px;
  }
  .ma-ring p {
    font-size: 13.5px;
  }
  .ma-run__list {
    --swipe-w: 82%;
  }
  .ma-run__item,
  .ma-run__item:last-child {
    padding: 24px 22px;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: inset 0 0 0 1px var(--line);
    opacity: 1;
  }
  .ma-run__item::before {
    display: none;
  }
  .ma-run__item p {
    margin-top: 10px;
    font-size: 15px;
  }
  .ma-steps__list {
    --swipe-w: 84%;
  }
  .ma-step__body p {
    font-size: 15px;
  }
}

@media (max-width: 520px) {
  .ma-hero__title {
    font-size: 14.6vw;
  }
  .ma-hero__actions .btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 621px) and (max-width: 1180px) and (orientation: portrait) {
  .ma-hero {
    min-height: min(100svh, 90vw);
    align-items: center;
  }
}
