:root {
  --blue: #1d1cfe;
  --off-white: #f5f7fa;
  --white: #ffffff;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.62);
  --muted-light: rgba(245, 247, 250, 0.72);
  --line-dark: rgba(0, 0, 0, 0.1);
  --line-light: rgba(245, 247, 250, 0.2);
  --radius-sm: 16px;
  --radius-lg: 22px;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, Poppins, "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: geometricPrecision;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

section {
  scroll-margin-top: 70px;
}

.section-blue {
  color: var(--off-white);
  background: var(--blue);
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0 7vw;
  color: var(--off-white);
  background: rgba(29, 28, 254, 0.74);
  border-bottom: 1px solid var(--line-light);
  backdrop-filter: blur(18px);
}

.brand,
.main-nav {
  display: flex;
  align-items: center;
}

.brand {
  gap: 0.72rem;
  font-size: 1.05rem;
  font-weight: 900;
}

.brand-logo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 34px;
  padding: 0.28rem;
  background: var(--white);
  border-radius: 5px;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-nav {
  gap: 2rem;
  color: rgba(245, 247, 250, 0.82);
  font-size: 0.92rem;
  font-weight: 700;
}

.main-nav a,
.header-cta,
.primary-button,
.subscribe-form button,
.article-card button,
.carousel-button,
.modal-close {
  transition: transform 220ms var(--ease), background 220ms var(--ease),
    color 220ms var(--ease), opacity 220ms var(--ease), border-color 220ms var(--ease);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--off-white);
}

.header-cta,
.glass-button {
  color: var(--off-white);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(245, 247, 250, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 42px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px);
}

.header-cta {
  justify-self: end;
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 850;
}

.header-cta:hover,
.header-cta:focus-visible,
.primary-button:hover,
.primary-button:focus-visible,
.subscribe-form button:hover,
.subscribe-form button:focus-visible,
.article-card button:hover,
.article-card button:focus-visible {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  min-height: 96vh;
  padding: 11.6rem 7vw 8rem;
  overflow: hidden;
  background: var(--blue);
}

.hero-inner,
.section-shell {
  max-width: 1280px;
  margin: 0 auto;
}

.eyebrow,
.section-kicker,
.road-stop span,
.modern-step span,
.article-card span,
.article-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.eyebrow {
  color: rgba(245, 247, 250, 0.8);
}

.eyebrow.dark {
  color: rgba(0, 0, 0, 0.5);
}

.hero-headline {
  max-width: 1180px;
  margin: 2.4rem 0 2.1rem;
  font-weight: 900;
  line-height: 1.06;
}

.hero-headline span {
  display: block;
  opacity: 0;
  transform: translateY(34px);
  animation: headlineRise 920ms var(--ease) forwards;
}

.hero-headline .headline-main {
  font-size: 5.8rem;
}

.hero-headline .headline-sub {
  max-width: 900px;
  margin-top: 0.72rem;
  font-size: 2.42rem;
  line-height: 1.17;
  color: rgba(245, 247, 250, 0.82);
}

.hero-headline .headline-sub:nth-child(2) {
  animation-delay: 180ms;
}

.hero-headline .headline-sub:nth-child(3) {
  animation-delay: 320ms;
}

.hero-actions {
  display: flex;
  align-items: center;
}

.primary-button {
  min-height: 46px;
  padding: 0.72rem 1.15rem;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 900;
}

.rocket {
  position: absolute;
  top: 25%;
  left: -9rem;
  width: 84px;
  height: 34px;
  animation: rocketFly 7.2s var(--ease) 900ms infinite;
  opacity: 0;
}

.rocket span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--off-white);
  border-radius: 50% 58% 58% 50%;
  box-shadow: 0 0 36px rgba(245, 247, 250, 0.36);
}

.rocket span::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 14px;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-radius: 50%;
}

.rocket span::after {
  content: "";
  position: absolute;
  top: 9px;
  left: -46px;
  width: 52px;
  height: 15px;
  background: linear-gradient(90deg, transparent, rgba(245, 247, 250, 0.78));
  border-radius: 999px;
}

.section-flow {
  position: absolute;
  right: -6vw;
  bottom: -1px;
  left: -6vw;
  height: 128px;
  background: var(--white);
  clip-path: polygon(0 52%, 16% 38%, 35% 48%, 54% 24%, 74% 44%, 100% 26%, 100% 100%, 0 100%);
  animation: flowIn 1.25s var(--ease) both;
}

.problem-section,
.strategy-section {
  background: var(--white);
}

.problem-section {
  padding: 6.2rem 0 5.2rem;
}

.problem-grid,
.process-intro {
  display: grid;
  grid-template-columns: 0.34fr 1fr;
  gap: 4.5rem;
  padding: 0 2rem;
}

.section-kicker {
  color: rgba(0, 0, 0, 0.5);
}

.section-kicker.light {
  color: rgba(245, 247, 250, 0.72);
}

.section-title {
  margin: 0;
  font-size: 3.55rem;
  font-weight: 900;
  line-height: 1.1;
}

.large-copy,
.strategy-head p,
.process-intro p,
.footer-copy p {
  max-width: 790px;
  margin: 1.45rem 0 0;
  font-size: 1.16rem;
  color: var(--muted);
}

.reveal-text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pain-layout {
  margin-top: 4.5rem;
  padding: 0 2rem;
}

.pain-layout h3 {
  max-width: none;
  margin: 0 0 2rem;
  font-size: 1.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

.problem-road,
.solution-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  min-height: 390px;
  padding-top: 138px;
}

.road-line {
  position: absolute;
  top: 72px;
  right: 2rem;
  left: 2rem;
  height: 58px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 50%, transparent 50%) center / 74px 4px repeat-x,
    #101010;
  border-radius: 999px;
  box-shadow: inset 0 0 0 8px #232323;
}

.road-car {
  position: absolute;
  z-index: 4;
  top: 42px;
  left: 2rem;
  width: 116px;
  height: 72px;
  transform: translateX(0);
}

.reveal-road.is-visible .road-car.damaged {
  animation: crashDrive 3.6s var(--ease) both;
}

.reveal-road.is-visible .road-car.clean {
  animation: fastDrive 3.2s var(--ease) both;
}

.car-body {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 8px;
  height: 38px;
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 24px 34px 12px 12px;
}

.car-body::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 7px;
  width: 16px;
  height: 8px;
  background: #c8ff6b;
  border-radius: 999px;
}

.car-window {
  position: absolute;
  top: 10px;
  left: 40px;
  width: 42px;
  height: 28px;
  background: var(--off-white);
  border: 3px solid var(--ink);
  border-radius: 20px 20px 4px 4px;
}

.wheel {
  position: absolute;
  bottom: 8px;
  width: 24px;
  height: 24px;
  background: #0b0b0b;
  border: 5px solid #f5f7fa;
  border-radius: 50%;
}

.wheel.front {
  right: 16px;
}

.wheel.back {
  left: 22px;
}

.damaged .car-body {
  clip-path: polygon(0 0, 70% 0, 75% 12%, 86% 2%, 100% 10%, 100% 100%, 0 100%);
}

.spark,
.speed-line {
  position: absolute;
  opacity: 0;
}

.spark {
  right: -8px;
  top: 28px;
  width: 15px;
  height: 15px;
  background: #ffde59;
  clip-path: polygon(50% 0, 62% 36%, 100% 45%, 66% 61%, 74% 100%, 50% 74%, 26% 100%, 34% 61%, 0 45%, 38% 36%);
}

.spark-b {
  top: 8px;
  right: 9px;
  width: 10px;
  height: 10px;
}

.reveal-road.is-visible .spark {
  animation: sparkFlash 800ms steps(2, jump-none) 850ms 4;
}

.speed-line {
  left: -42px;
  width: 38px;
  height: 5px;
  background: var(--blue);
  border-radius: 999px;
}

.speed-a {
  top: 28px;
}

.speed-b {
  top: 48px;
  width: 24px;
}

.reveal-road.is-visible .speed-line {
  animation: speedFlash 600ms ease-out 800ms 5;
}

.road-stop {
  position: relative;
  min-height: 206px;
  padding: 1.35rem;
  background: #f8f9fb;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease), background 680ms var(--ease);
}

.reveal-road.is-visible .road-stop {
  opacity: 1;
  transform: translateY(0);
}

.road-stop:nth-of-type(2) {
  transition-delay: 140ms;
}

.road-stop:nth-of-type(3) {
  transition-delay: 280ms;
}

.road-stop:nth-of-type(4) {
  transition-delay: 420ms;
}

.road-stop span {
  color: var(--blue);
}

.road-stop h4,
.road-stop h3 {
  min-height: 42px;
  margin: 2.3rem 0 0.8rem;
  font-size: 1.34rem;
  line-height: 1.2;
}

.road-stop p {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.strategy-section {
  padding: 6.2rem 0 5.8rem;
  overflow: hidden;
}

.strategy-head {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 4rem;
  align-items: end;
  padding: 0 2rem;
}

.strategy-head .section-title {
  margin-top: 0.7rem;
}

.strategy-head strong,
.process-intro strong {
  color: inherit;
}

.video-lab {
  position: relative;
  width: min(100%, 1480px);
  margin: 4.4rem auto 0;
  padding: 0 4.5rem;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.video-lab.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.video-track {
  display: grid;
  grid-auto-columns: minmax(260px, 320px);
  grid-auto-flow: column;
  gap: 1.7rem;
  overflow-x: auto;
  padding: 1rem 0 2.8rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.video-track::-webkit-scrollbar {
  display: none;
}

.phone-card {
  scroll-snap-align: center;
  color: var(--off-white);
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.2));
  transform: translateY(0) rotate(-1deg);
  animation: floatCard 5.2s ease-in-out infinite;
}

.phone-card:nth-child(2) {
  animation-delay: -1.3s;
  transform: rotate(1deg);
}

.phone-card:nth-child(3) {
  animation-delay: -2.4s;
}

.phone-card:nth-child(4) {
  animation-delay: -3.1s;
  transform: rotate(1.4deg);
}

.video-scene {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111111;
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.video-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.video-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 38%, rgba(0, 0, 0, 0.68));
}

.scene-glow::before {
  background:
    radial-gradient(circle at 50% 28%, #fff3d8 0 12%, transparent 13%),
    linear-gradient(135deg, #91c2ff, #f7c4dc 48%, #efefef);
}

.scene-routine::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.36) 0 49%, transparent 50%),
    radial-gradient(circle at 80% 18%, #ffffff 0 8%, transparent 9%),
    linear-gradient(145deg, #d6fbff, #ffc6cf 62%, #f7f1e7);
}

.scene-shop::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 52px),
    linear-gradient(145deg, #0e0e0e, #2a6bff 48%, #f7f7f7);
}

.scene-creator::before {
  background:
    radial-gradient(circle at 68% 28%, #ffec99 0 9%, transparent 10%),
    linear-gradient(145deg, #f4ffc6, #b6d2ff 54%, #ffcad9);
}

.scene-editorial::before {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.9) 0 8%, transparent 9%),
    linear-gradient(145deg, #f3f0df, #b9d3ff 44%, #ffccd8);
}

.video-brand,
.video-copy,
.comment-bubble,
.floating-metrics {
  position: absolute;
  z-index: 2;
}

.video-brand {
  top: 18px;
  left: 16px;
  padding: 0.35rem 0.55rem;
  color: var(--ink);
  background: rgba(245, 247, 250, 0.88);
  border-radius: 4px;
  font-weight: 900;
}

.video-copy {
  right: 14px;
  left: 14px;
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 950;
  line-height: 1.02;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.36);
}

.video-copy.top {
  top: 74px;
}

.creator,
.product-bottle,
.product-jar,
.split-screen {
  position: absolute;
  z-index: 1;
}

.creator {
  right: 26px;
  bottom: 78px;
  width: 122px;
  height: 170px;
  border-radius: 62px 62px 28px 28px;
  background: linear-gradient(180deg, #2b1911 0 38%, #101010 39% 58%, #ff6f91 59%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.creator::before {
  content: "";
  position: absolute;
  top: -44px;
  left: 26px;
  width: 70px;
  height: 70px;
  background: #8f5f49;
  border-radius: 50%;
}

.creator-a {
  transform: rotate(-4deg);
}

.creator-b {
  right: 82px;
  background: linear-gradient(180deg, #3c2218 0 38%, #0052ff 39% 58%, #111111 59%);
  transform: rotate(3deg);
}

.product-bottle {
  left: 34px;
  bottom: 80px;
  width: 72px;
  height: 168px;
  border-radius: 24px 24px 14px 14px;
  background: linear-gradient(180deg, #ffffff, #b5dcff);
  border: 4px solid rgba(255, 255, 255, 0.72);
}

.product-bottle::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 18px;
  width: 34px;
  height: 28px;
  background: #ffffff;
  border-radius: 9px 9px 2px 2px;
}

.bottle-b {
  left: auto;
  right: 34px;
  background: linear-gradient(180deg, #f7f7f7, #ffe3ed);
}

.product-jar {
  left: 42px;
  bottom: 88px;
  width: 130px;
  height: 92px;
  border-radius: 22px 22px 38px 38px;
  background: linear-gradient(180deg, #ffffff, #f7b6c8);
  border: 5px solid rgba(255, 255, 255, 0.66);
}

.split-screen {
  inset: 132px 26px 128px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(0, 82, 255, 0.62) 0 50%, rgba(255, 255, 255, 0.56) 50%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.24));
  border-radius: 12px;
}

.comment-bubble {
  left: 18px;
  right: 42px;
  bottom: 150px;
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  background: #ffffff;
  border-radius: 8px;
  font-weight: 800;
}

.floating-metrics {
  right: 22px;
  bottom: 160px;
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  background: #c8ff6b;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 900;
}

.play-button {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  padding: 0;
  background: rgba(0, 0, 0, 0.78);
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.play-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 24px solid #ffffff;
  transform: translate(-50%, -50%);
}

.play-button.pause::before,
.play-button.pause::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 28px;
  background: #ffffff;
  border: 0;
  transform: translateY(-50%);
}

.play-button.pause::before {
  left: 26px;
}

.play-button.pause::after {
  left: 39px;
}

.video-progress {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 22px;
  left: 16px;
  height: 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 999px;
}

.video-progress span {
  display: block;
  width: 56%;
  height: 100%;
  background: #ffffff;
  border-radius: inherit;
}

.analysis-strip {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.analysis-strip span {
  padding: 0.6rem 0.72rem;
  color: var(--ink);
  background: #f5f7fa;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 850;
}

.carousel-button {
  position: absolute;
  z-index: 5;
  top: 41%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-size: 2.4rem;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  display: none;
}

.carousel-button.prev {
  left: 1.2rem;
}

.carousel-button.next {
  right: 1.2rem;
}

.solution-road {
  margin-top: 3.2rem;
  padding-right: 2rem;
  padding-left: 2rem;
}

.solution-road .road-line {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.54) 50%, transparent 50%) center / 74px 4px repeat-x,
    var(--blue);
  box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.12);
}

.solution-stop {
  background: #ffffff;
  border-color: var(--line-dark);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.06);
}

.solution-road.is-visible .solution-stop {
  background: #f5f7ff;
}

.process-section {
  padding: 6.4rem 0;
  background: var(--blue);
}

.process-intro p {
  grid-column: 2;
  margin-top: 1.25rem;
  color: var(--muted-light);
}

.process-intro .section-title {
  max-width: 920px;
  font-size: 3.05rem;
}

.process-intro .section-title span {
  color: rgba(245, 247, 250, 0.82);
}

.modern-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3.6rem;
  padding: 0 2rem;
}

.modern-step {
  position: relative;
  min-height: 260px;
  padding: 1.35rem;
  overflow: hidden;
  background: rgba(245, 247, 250, 0.12);
  border: 1px solid rgba(245, 247, 250, 0.2);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(12px);
}

.modern-step::before {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(90deg, var(--off-white) 0 34%, transparent 34% 66%, var(--off-white) 66%),
    linear-gradient(var(--off-white), var(--off-white));
  opacity: 0.18;
  transform: rotate(45deg);
}

.modern-step span {
  color: rgba(245, 247, 250, 0.66);
}

.modern-step h3 {
  margin: 4.2rem 0 1rem;
  font-size: 1.42rem;
  line-height: 1.18;
}

.modern-step p {
  margin: 0;
  color: var(--muted-light);
}

.footer-cta {
  padding: 1rem 0 4rem;
}

.footer-copy {
  padding: 0 2rem;
}

.footer-copy h2 {
  max-width: 950px;
  margin: 0;
  font-size: 3.7rem;
  font-weight: 900;
  line-height: 1.12;
}

.footer-copy p {
  color: var(--muted-light);
}

.articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
  padding: 0 2rem;
}

.article-card button {
  display: grid;
  min-height: 244px;
  width: 100%;
  padding: 1.35rem;
  text-align: left;
  color: var(--ink);
  background: var(--off-white);
  border: 1px solid rgba(245, 247, 250, 0.28);
  border-radius: var(--radius-sm);
}

.article-card button:hover,
.article-card button:focus-visible {
  background: #ffffff;
}

.article-card span {
  color: var(--blue);
}

.article-card h3 {
  align-self: end;
  margin: 3rem 0 0.8rem;
  font-size: 1.38rem;
  line-height: 1.22;
}

.article-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
}

.subscribe-form {
  display: grid;
  grid-template-columns: 0.24fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1.2rem;
  padding: 0 2rem;
}

.subscribe-form label {
  padding-top: 1rem;
  color: rgba(245, 247, 250, 0.72);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subscribe-form div {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 0.7rem;
}

.subscribe-form input,
.modal-panel input {
  width: 100%;
  min-height: 54px;
  padding: 0 1rem;
  color: var(--ink);
  background: rgba(245, 247, 250, 0.94);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  outline: 0;
}

.subscribe-form input:focus,
.modal-panel input:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(245, 247, 250, 0.32);
}

.subscribe-form button {
  min-height: 54px;
  color: var(--ink);
  background: var(--off-white);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 900;
}

.form-message {
  grid-column: 2;
  min-height: 1.4rem;
  margin: 0;
  color: rgba(245, 247, 250, 0.8);
  font-weight: 700;
}

.contact-modal,
.article-modal {
  width: min(92vw, 560px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.article-modal {
  width: min(92vw, 760px);
}

.contact-modal::backdrop,
.article-modal::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

.modal-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 2rem;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.modal-panel .eyebrow,
.article-label {
  color: var(--blue);
}

.modal-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 2.6rem;
  line-height: 1.1;
}

.modal-panel label {
  display: grid;
  gap: 0.45rem;
  font-weight: 850;
}

.modal-panel input {
  background: #f2f3f5;
}

.modal-panel .primary-button {
  color: var(--off-white);
  background: var(--blue);
}

.modal-panel .form-message {
  grid-column: auto;
  color: rgba(0, 0, 0, 0.68);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: #f2f3f5;
  border: 0;
  border-radius: 50%;
  font-size: 1.65rem;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--ink);
  color: var(--off-white);
}

.article-reader {
  max-height: 86vh;
  overflow: auto;
}

.article-reader h2 {
  max-width: 620px;
}

.article-reader p {
  color: rgba(0, 0, 0, 0.68);
  font-size: 1.05rem;
}

.article-reader h3 {
  margin: 1.6rem 0 0.45rem;
}

@keyframes headlineRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rocketFly {
  0% {
    opacity: 0;
    transform: translate(-8vw, 72px) rotate(-8deg);
  }
  12% {
    opacity: 1;
  }
  54% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0;
    transform: translate(118vw, -130px) rotate(-8deg);
  }
}

@keyframes flowIn {
  from {
    transform: translateY(72px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes crashDrive {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  24% {
    transform: translateX(24vw) rotate(-2deg);
  }
  50% {
    transform: translateX(46vw) rotate(4deg);
  }
  76% {
    transform: translateX(68vw) rotate(-3deg);
  }
  100% {
    transform: translateX(min(980px, 78vw)) rotate(5deg);
  }
}

@keyframes fastDrive {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(min(980px, 78vw));
  }
}

@keyframes sparkFlash {
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(20deg);
  }
}

@keyframes speedFlash {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-34px);
  }
}

@keyframes floatCard {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -16px;
  }
}

@media (max-width: 1180px) {
  .site-header {
    padding: 0 3rem;
  }

  .hero {
    padding-right: 3rem;
    padding-left: 3rem;
  }

  .hero-headline .headline-main {
    font-size: 4.45rem;
  }

  .hero-headline .headline-sub {
    font-size: 2rem;
  }

  .problem-road,
  .solution-road,
  .modern-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-road,
  .solution-road {
    min-height: 610px;
  }

  .road-line {
    top: 58px;
  }

  @keyframes crashDrive {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    100% {
      transform: translateX(min(660px, 72vw)) rotate(5deg);
    }
  }

  @keyframes fastDrive {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(min(660px, 72vw));
    }
  }

  .strategy-head {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 58px;
    padding: 0 1rem;
  }

  .brand {
    font-size: 0.98rem;
  }

  .brand-logo {
    width: 48px;
    height: 30px;
  }

  .main-nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 8rem 1.2rem 7rem;
  }

  .hero-headline {
    margin-top: 1.8rem;
  }

  .hero-headline .headline-main {
    font-size: 3rem;
  }

  .hero-headline .headline-sub {
    font-size: 1.35rem;
  }

  .problem-section,
  .strategy-section,
  .process-section {
    padding-top: 4.4rem;
  }

  .problem-grid,
  .process-intro {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 0 1.2rem;
  }

  .section-title,
  .footer-copy h2 {
    font-size: 2.35rem;
  }

  .process-intro .section-title {
    font-size: 2.24rem;
  }

  .large-copy,
  .strategy-head p,
  .process-intro p,
  .footer-copy p {
    font-size: 1.03rem;
  }

  .process-intro p {
    grid-column: auto;
  }

  .pain-layout,
  .strategy-head,
  .solution-road,
  .modern-steps,
  .footer-copy,
  .articles,
  .subscribe-form {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .pain-layout h3 {
    font-size: 1.18rem;
    white-space: normal;
  }

  .problem-road,
  .solution-road {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 96px;
  }

  .road-line {
    top: 44px;
    right: 1.2rem;
    left: 1.2rem;
    height: 44px;
  }

  .road-car {
    top: 20px;
    left: 1.4rem;
    width: 92px;
    height: 60px;
  }

  .car-body {
    height: 32px;
  }

  .car-window {
    top: 8px;
    left: 32px;
    width: 34px;
    height: 24px;
  }

  .wheel {
    width: 20px;
    height: 20px;
  }

  @keyframes crashDrive {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    100% {
      transform: translateX(calc(100vw - 138px)) rotate(5deg);
    }
  }

  @keyframes fastDrive {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(100vw - 138px));
    }
  }

  .video-lab {
    padding: 0 1.2rem;
  }

  .video-track {
    grid-auto-columns: minmax(230px, 78vw);
  }

  .carousel-button {
    display: none;
  }

  .modern-steps,
  .articles,
  .subscribe-form {
    grid-template-columns: 1fr;
  }

  .modern-step {
    min-height: 210px;
  }

  .subscribe-form div {
    grid-template-columns: 1fr;
  }

  .form-message {
    grid-column: auto;
  }

  .modal-panel {
    padding: 1.4rem;
  }
}

/* Subtle ambient hero motion replacing rocket */
.rocket,
.spark-dot {
  display: none !important;
}

.ambient-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ambient-field .orb,
.ambient-field .line {
  position: absolute;
  display: block;
  opacity: 0;
}

.ambient-field .orb {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.42);
  animation: ambientDrift 12s ease-in-out infinite;
}

.ambient-field .o1 {
  top: 28%;
  left: 18%;
  animation-delay: 0.2s;
}

.ambient-field .o2 {
  top: 42%;
  right: 16%;
  width: 10px;
  height: 10px;
  animation-delay: 2.4s;
}

.ambient-field .o3 {
  bottom: 24%;
  left: 62%;
  width: 5px;
  height: 5px;
  animation-delay: 4.2s;
}

.ambient-field .line {
  width: 128px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform-origin: center;
  animation: ambientLine 10s ease-in-out infinite;
}

.ambient-field .l1 {
  top: 34%;
  left: 8%;
  transform: rotate(-12deg);
}

.ambient-field .l2 {
  top: 58%;
  right: 12%;
  width: 160px;
  transform: rotate(18deg);
  animation-delay: 2.8s;
}

.ambient-field .l3 {
  bottom: 23%;
  left: 38%;
  width: 100px;
  transform: rotate(4deg);
  animation-delay: 5.2s;
}

@keyframes ambientDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.68);
  }
  18%,
  72% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate3d(34px, -46px, 0) scale(1.18);
  }
}

@keyframes ambientLine {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  28%,
  64% {
    opacity: 0.45;
    clip-path: inset(0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}

@media (max-width: 820px) {
  .ambient-field .line {
    width: 84px;
  }

  .ambient-field .l2 {
    width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-field .orb,
  .ambient-field .line {
    animation: none !important;
    opacity: 0.35;
  }
}

@media (max-width: 430px) {
  .header-cta {
    padding: 0.42rem 0.72rem;
  }

  .hero-headline .headline-main {
    font-size: 2.45rem;
  }

  .section-title,
  .footer-copy h2 {
    font-size: 2.05rem;
  }

  .process-intro .section-title {
    font-size: 1.92rem;
  }

  .video-copy {
    font-size: 1.35rem;
  }
}

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

  .hero-headline span,
  .reveal-text,
  .video-lab,
  .road-stop {
    opacity: 1;
    transform: none;
  }
}

/* Current revision overrides */
.site-header {
  min-height: 58px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.brand {
  color: var(--ink);
}

.brand-logo {
  width: 58px;
  height: 32px;
  padding: 0;
  background: transparent;
}

.main-nav {
  color: rgba(0, 0, 0, 0.58);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ink);
}

.header-cta {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.hero {
  min-height: 94vh;
  padding-top: 10.4rem;
}

.hero-headline {
  max-width: 1190px;
}

.hero-headline .headline-main {
  font-size: 5.7rem;
}

.hero-headline .headline-sub {
  display: inline-block;
  max-width: none;
  min-height: 1.5em;
  margin-top: 1.4rem;
  color: rgba(245, 247, 250, 0.78);
  font-size: 1.58rem;
  font-weight: 500;
  line-height: 1.42;
  white-space: nowrap;
}

.typed-sub::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.2rem;
  background: currentColor;
  vertical-align: -0.12em;
  animation: caretBlink 780ms steps(1) infinite;
}

.rocket {
  top: 22%;
  left: -8rem;
  width: 96px;
  height: 42px;
  animation: rocketFly 6.8s cubic-bezier(0.16, 0.84, 0.24, 1) 700ms infinite;
}

.rocket .rocket-body {
  position: absolute;
  inset: 7px 0 7px 24px;
  display: block;
  background: linear-gradient(90deg, #ffffff, #d9e5ff 62%, #ffffff);
  border-radius: 999px 58% 58% 999px;
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.34);
}

.rocket .rocket-body::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-radius: 50%;
}

.rocket .rocket-body::after {
  content: "";
  position: absolute;
  left: -21px;
  top: 7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 25px solid #ffffff;
  filter: drop-shadow(-10px 0 18px rgba(255, 255, 255, 0.72));
}

.rocket .spark-dot {
  position: absolute;
  left: 2px;
  top: 20px;
  display: block;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px currentColor;
  animation: fireworkSpark 980ms ease-out infinite;
}

.rocket .spark-dot::before,
.rocket .spark-dot::after {
  content: none;
}

.spark-dot.s1 { --x: -42px; --y: -28px; color: #fff3a8; animation-delay: 40ms; }
.spark-dot.s2 { --x: -58px; --y: 4px; color: #ffffff; animation-delay: 120ms; }
.spark-dot.s3 { --x: -34px; --y: 34px; color: #91f7ff; animation-delay: 210ms; }
.spark-dot.s4 { --x: -78px; --y: -18px; color: #ffd2ef; animation-delay: 80ms; }
.spark-dot.s5 { --x: -72px; --y: 24px; color: #c8ff6b; animation-delay: 260ms; }
.spark-dot.s6 { --x: -26px; --y: -44px; color: #ffffff; animation-delay: 320ms; }
.spark-dot.s7 { --x: -92px; --y: 0; color: #fff3a8; animation-delay: 390ms; }
.spark-dot.s8 { --x: -50px; --y: 48px; color: #ffffff; animation-delay: 470ms; }
.spark-dot.s9 { --x: -108px; --y: -30px; color: #91f7ff; animation-delay: 530ms; }
.spark-dot.s10 { --x: -112px; --y: 30px; color: #ffd2ef; animation-delay: 620ms; }
.spark-dot.s11 { --x: -20px; --y: 22px; color: #ffffff; animation-delay: 690ms; }
.spark-dot.s12 { --x: -88px; --y: 52px; color: #c8ff6b; animation-delay: 760ms; }

.code-rain {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  height: 210px;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}

.code-rain span {
  position: absolute;
  top: -42px;
  color: rgba(245, 247, 250, 0.44);
  font-size: 0.82rem;
  font-weight: 900;
  animation: codeDrop 4.8s linear infinite;
}

.code-rain span:nth-child(1) { left: 10%; animation-delay: 0.1s; }
.code-rain span:nth-child(2) { left: 22%; animation-delay: 0.8s; }
.code-rain span:nth-child(3) { left: 36%; animation-delay: 1.4s; }
.code-rain span:nth-child(4) { left: 49%; animation-delay: 0.4s; }
.code-rain span:nth-child(5) { left: 62%; animation-delay: 1.9s; }
.code-rain span:nth-child(6) { left: 74%; animation-delay: 0.9s; }
.code-rain span:nth-child(7) { left: 84%; animation-delay: 1.6s; }
.code-rain span:nth-child(8) { left: 93%; animation-delay: 0.2s; }

.section-flow {
  height: 86px;
  clip-path: none;
}

.centered-copy {
  display: block;
  max-width: 920px;
  text-align: center;
}

.centered-copy .section-kicker {
  margin-bottom: 1.1rem;
}

.centered-copy .large-copy {
  margin-right: auto;
  margin-left: auto;
}

.centered-copy .section-title {
  font-size: 4.2rem;
}

.pain-layout h3 {
  margin-bottom: 2.4rem;
  font-size: 2.6rem;
  white-space: normal;
}

.motion-stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

.motion-panel {
  position: relative;
  min-height: 280px;
  padding: 1.35rem;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.09);
  backdrop-filter: blur(18px);
  transition: transform 520ms var(--ease), color 520ms var(--ease),
    background 520ms var(--ease), box-shadow 520ms var(--ease);
}

.motion-panel + .motion-panel {
  margin-top: 0.4rem;
}

.motion-panel.is-active {
  color: var(--off-white);
  background: #050505;
  box-shadow: 0 38px 86px rgba(0, 0, 0, 0.28);
  transform: translateY(-10px);
}

.motion-panel span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.motion-panel.is-active span {
  color: #c8ff6b;
}

.motion-panel h4,
.motion-panel h3 {
  position: relative;
  z-index: 2;
  margin: 3.2rem 0 1rem;
  font-size: 1.28rem;
  line-height: 1.12;
  transition: transform 520ms var(--ease), font-size 520ms var(--ease);
}

.motion-panel.is-active h4,
.motion-panel.is-active h3 {
  font-size: 2rem;
  transform: translateY(-6px);
}

.motion-panel p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
  font-weight: 680;
  transition: color 520ms var(--ease);
}

.motion-panel.is-active p {
  color: rgba(245, 247, 250, 0.68);
}

.panel-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.motion-panel.is-active .panel-effect {
  opacity: 1;
}

.money-effect i {
  position: absolute;
  top: -18px;
  color: #c8ff6b;
  font-style: normal;
  font-weight: 950;
  animation: moneyFall 1.45s ease-in infinite;
}

.money-effect i:nth-child(1) { left: 14%; animation-delay: 0s; }
.money-effect i:nth-child(2) { left: 26%; animation-delay: 0.18s; }
.money-effect i:nth-child(3) { left: 38%; animation-delay: 0.34s; }
.money-effect i:nth-child(4) { left: 52%; animation-delay: 0.11s; }
.money-effect i:nth-child(5) { left: 64%; animation-delay: 0.44s; }
.money-effect i:nth-child(6) { left: 74%; animation-delay: 0.25s; }
.money-effect i:nth-child(7) { left: 84%; animation-delay: 0.55s; }
.money-effect i:nth-child(8) { left: 92%; animation-delay: 0.06s; }

.dart-effect b {
  position: absolute;
  right: 22px;
  bottom: 32px;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(245, 247, 250, 0.5);
  border-radius: 50%;
}

.dart-effect b::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(245, 247, 250, 0.28);
  border-radius: 50%;
}

.dart {
  position: absolute;
  left: 20px;
  width: 54px;
  height: 3px;
  background: #ff5c7a;
  transform-origin: left center;
  animation: dartMiss 1.25s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

.dart::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -4px;
  border-left: 10px solid #ff5c7a;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.dart.d1 { top: 64px; animation-delay: 0s; }
.dart.d2 { top: 102px; animation-delay: 0.28s; }
.dart.d3 { top: 138px; animation-delay: 0.56s; }

.quality-effect i {
  position: absolute;
  right: 30px;
  width: 92px;
  height: 10px;
  background: rgba(245, 247, 250, 0.32);
  border-radius: 999px;
  animation: qcJitter 1.1s ease-in-out infinite;
}

.quality-effect i:nth-child(1) { bottom: 118px; }
.quality-effect i:nth-child(2) { bottom: 88px; animation-delay: 0.16s; }
.quality-effect i:nth-child(3) { bottom: 58px; animation-delay: 0.32s; }
.quality-effect b {
  position: absolute;
  right: 48px;
  bottom: 40px;
  width: 42px;
  height: 42px;
  border: 4px solid #ffde59;
  border-radius: 50%;
  animation: qcSpin 1.4s linear infinite;
}

.data-effect i {
  position: absolute;
  bottom: 42px;
  width: 16px;
  background: rgba(245, 247, 250, 0.32);
  border-radius: 8px 8px 0 0;
  animation: dataDrop 1.2s ease-in-out infinite;
}

.data-effect i:nth-child(1) { right: 106px; height: 94px; }
.data-effect i:nth-child(2) { right: 78px; height: 68px; animation-delay: 0.1s; }
.data-effect i:nth-child(3) { right: 50px; height: 44px; animation-delay: 0.2s; }
.data-effect i:nth-child(4) { right: 22px; height: 24px; animation-delay: 0.3s; }
.data-effect b {
  position: absolute;
  right: 18px;
  bottom: 146px;
  width: 112px;
  height: 2px;
  background: #ff5c7a;
  transform: rotate(-18deg);
  transform-origin: right center;
}

.video-lab {
  opacity: 1;
  transform: none;
  width: 100%;
  max-width: none;
  margin-top: 3.8rem;
  padding: 0;
  overflow: hidden;
}

.video-track {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.72rem;
  min-width: 1180px;
  height: 440px;
  overflow: visible;
  padding: 0 1rem;
}

.phone-card,
.phone-card:nth-child(2),
.phone-card:nth-child(3),
.phone-card:nth-child(4),
.phone-card:nth-child(5) {
  flex: 0 0 250px;
  filter: none;
  transform: none;
  animation: none;
}

.phone-card:nth-child(1),
.phone-card:nth-child(5) {
  flex-basis: 210px;
  transform: translateY(118px);
}

.phone-card:nth-child(2),
.phone-card:nth-child(4) {
  flex-basis: 255px;
  transform: translateY(72px);
}

.phone-card:nth-child(3) {
  flex-basis: 300px;
  transform: translateY(18px);
}

.video-scene {
  border-radius: 8px;
  box-shadow: none;
}

.analysis-strip {
  display: none;
}

.solution-block {
  margin-top: 4.5rem;
  padding: 0 2rem;
}

.solution-block h2 {
  margin: 0 0 1.8rem;
  font-size: 2.8rem;
  line-height: 1.12;
}

.solution-stack {
  padding: 0 2rem;
}

.solution-stack::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(29, 28, 254, 0.12));
}

.solution-effect i {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.72;
}

.data-map i:nth-child(1) { right: 34px; bottom: 112px; width: 14px; height: 14px; animation: nodePulse 1s infinite; }
.data-map i:nth-child(2) { right: 86px; bottom: 62px; width: 22px; height: 22px; animation: nodePulse 1s 0.2s infinite; }
.data-map i:nth-child(3) { right: 136px; bottom: 132px; width: 10px; height: 10px; animation: nodePulse 1s 0.4s infinite; }

.path-map::before,
.pulse-map::before,
.scale-map::before {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 64px;
  width: 128px;
  height: 64px;
  border-bottom: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
  border-radius: 0 0 46px 0;
  animation: pathDraw 1.25s ease-in-out infinite alternate;
}

.pulse-map i,
.scale-map i {
  right: 82px;
  bottom: 72px;
  width: 18px;
  height: 18px;
  animation: nodePulse 1s infinite;
}

.scale-map i:nth-child(2) { right: 48px; bottom: 120px; animation-delay: 0.2s; }
.scale-map i:nth-child(3) { right: 124px; bottom: 46px; animation-delay: 0.4s; }

.modern-steps {
  position: relative;
}

.modern-steps::before {
  content: "";
  position: absolute;
  top: 32px;
  right: 2rem;
  left: 2rem;
  height: 2px;
  background: rgba(245, 247, 250, 0.28);
}

.modern-step {
  transition: transform 520ms var(--ease), background 520ms var(--ease);
}

.modern-step.is-active {
  transform: translateY(-10px);
  background: rgba(245, 247, 250, 0.2);
}

.modern-step h3 {
  transition: font-size 520ms var(--ease), transform 520ms var(--ease);
}

.modern-step.is-active h3 {
  font-size: 1.9rem;
  transform: translateY(-6px);
}

.footer-copy h2 {
  max-width: 1040px;
  text-align: left;
}

.article-card button {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px);
}

.article-card strong {
  align-self: end;
  justify-self: start;
  margin-top: 1.2rem;
  color: var(--blue);
  font-size: 0.88rem;
  text-transform: uppercase;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

@keyframes fireworkSpark {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0.05);
  }
}

@keyframes codeDrop {
  to {
    transform: translateY(255px);
    opacity: 0;
  }
}

@keyframes moneyFall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.8); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(270px) rotate(42deg) scale(0.25); }
}

@keyframes dartMiss {
  0% { opacity: 0; transform: translateX(0) rotate(-10deg); }
  18% { opacity: 1; }
  78% { opacity: 1; transform: translateX(150px) rotate(-4deg); }
  100% { opacity: 0; transform: translateX(176px) translateY(-34px) rotate(18deg); }
}

@keyframes qcJitter {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-18px); }
  65% { transform: translateX(8px); }
}

@keyframes qcSpin {
  to { transform: rotate(360deg); }
}

@keyframes dataDrop {
  50% { transform: scaleY(0.35); opacity: 0.5; }
}

@keyframes nodePulse {
  50% { transform: scale(1.8); opacity: 0.24; }
}

@keyframes pathDraw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@media (max-width: 1180px) {
  .centered-copy .section-title {
    font-size: 3.45rem;
  }
}

@media (max-width: 820px) {
  .site-header {
    background: rgba(255, 255, 255, 0.92);
  }

  .hero-headline .headline-sub {
    max-width: 100%;
    font-size: 1rem;
    white-space: normal;
  }

  .centered-copy {
    text-align: left;
  }

  .centered-copy .section-title {
    font-size: 2.35rem;
  }

  .pain-layout h3,
  .solution-block h2 {
    font-size: 2rem;
  }

  .motion-panel {
    min-height: 250px;
  }

  .solution-stack::before,
  .modern-steps::before {
    top: 0;
    bottom: 0;
    left: 2rem;
    right: auto;
    width: 2px;
    height: auto;
  }

  .video-track {
    justify-content: flex-start;
    min-width: 0;
    height: auto;
    overflow-x: auto;
    padding: 0 1.2rem 1.2rem;
    scroll-snap-type: x mandatory;
  }

  .phone-card,
  .phone-card:nth-child(1),
  .phone-card:nth-child(2),
  .phone-card:nth-child(3),
  .phone-card:nth-child(4),
  .phone-card:nth-child(5) {
    flex: 0 0 76vw;
    transform: none;
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .hero,
  .typed-main::after,
  .typed-sub::after,
  .rocket,
  .rocket .spark-dot,
  .code-rain span,
  .money-effect i,
  .dart,
  .quality-effect i,
  .quality-effect b,
  .data-effect i,
  .data-map i,
  .path-map::before,
  .pulse-map::before,
  .scale-map::before,
  .pulse-map i,
  .scale-map i {
    animation: none !important;
  }
}

/* Header and hero refinements */
.site-header {
  min-height: 58px;
  color: var(--ink);
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  animation: headerIntro 760ms var(--ease) both;
}

.header-cta {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.88);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.hero {
  min-height: 90vh;
  padding-top: 9.4rem;
  padding-bottom: 5.2rem;
  border-bottom-right-radius: 34px;
  border-bottom-left-radius: 34px;
  animation: heroIntro 880ms var(--ease) 120ms both;
}

.hero-headline .headline-main {
  min-height: 1.08em;
  font-size: 5.15rem;
}

.typed-main,
.typed-sub {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.typed-main:not(.is-typing):not(.is-typed),
.typed-sub:not(.is-typing):not(.is-typed) {
  color: transparent;
}

.typed-main::after,
.typed-sub::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.2rem;
  background: currentColor;
  vertical-align: -0.12em;
  animation: caretBlink 780ms steps(1) infinite;
}

.typed-main:not(.is-typing)::after,
.typed-sub:not(.is-typing)::after {
  opacity: 0;
}

.code-rain {
  bottom: 8px;
  height: 260px;
}

.code-rain span {
  left: var(--x);
  font-size: var(--size);
  animation: codeDrop var(--duration) linear var(--delay) infinite;
}

.section-flow {
  height: 44px;
  border-top-right-radius: 34px;
  border-top-left-radius: 34px;
  clip-path: none;
}

.problem-section {
  padding: 4.2rem 0 4rem;
}

.pain-layout {
  margin-top: 2.8rem;
}

.pain-layout h3 {
  margin-bottom: 2.1rem;
  font-size: 2.18rem;
  line-height: 1.18;
}

.motion-panel,
.modern-step,
.article-card button,
.video-scene,
.modal-panel,
.subscribe-form input,
.subscribe-form button {
  border-radius: var(--radius-lg);
}

@keyframes headerIntro {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroIntro {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: 5.2rem 1.05rem 3.2rem;
  }

  .hero-headline {
    margin: 1rem 0 1.2rem;
  }

  .hero-headline .headline-main {
    min-height: 3.35em;
    font-size: 2rem;
    line-height: 1.12;
  }

  .hero-headline .headline-sub {
    min-height: 3em;
    margin-top: 0.9rem;
    font-size: 0.92rem;
    line-height: 1.42;
  }

  .hero .eyebrow {
    font-size: 0.68rem;
  }

  .rocket {
    top: 16%;
    transform: scale(0.78);
  }

  .code-rain {
    height: 170px;
  }

  .section-flow {
    height: 28px;
  }

  .problem-section {
    padding-top: 3rem;
  }

  .pain-layout h3 {
    font-size: 1.58rem;
    line-height: 1.22;
  }
}

@media (max-width: 430px) {
  .hero-headline .headline-main {
    font-size: 1.82rem;
  }

  .hero-actions .primary-button {
    min-height: 40px;
    padding: 0.58rem 0.95rem;
    font-size: 0.86rem;
  }
}

/* Immersive hero gradient and transparent header */
.site-header {
  color: rgba(245, 247, 250, 0.82);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.site-header .brand,
.site-header .main-nav {
  color: inherit;
}

.site-header .brand-logo img {
  filter: invert(1);
  transition: filter 260ms var(--ease);
}

.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled .brand-logo img {
  filter: none;
}

.site-header.is-scrolled .main-nav {
  color: rgba(0, 0, 0, 0.58);
}

.site-header:not(.is-scrolled) .main-nav a:hover,
.site-header:not(.is-scrolled) .main-nav a:focus-visible {
  color: #ffffff;
}

.hero {
  isolation: isolate;
  min-height: 86vh;
  background:
    radial-gradient(80% 62% at 100% 38%, rgba(119, 139, 255, 0.72), transparent 58%),
    radial-gradient(52% 44% at 6% 28%, rgba(45, 69, 190, 0.86), transparent 60%),
    linear-gradient(180deg, #050814 0%, #09113a 20%, #1d1cfe 48%, #eef4ff 82%, #ffffff 100%);
  border-bottom-right-radius: 44px;
  border-bottom-left-radius: 44px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -18% -10% 18%;
  z-index: -2;
  background:
    radial-gradient(circle at 24% 50%, rgba(29, 28, 254, 0.72), transparent 26%),
    radial-gradient(circle at 72% 48%, rgba(155, 178, 255, 0.88), transparent 30%),
    conic-gradient(from 120deg at 54% 46%, rgba(255, 255, 255, 0.04), rgba(29, 28, 254, 0.6), rgba(3, 6, 20, 0.86), rgba(255, 255, 255, 0.12));
  filter: blur(44px);
  opacity: 0.9;
  animation: auroraMove 9s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -74px;
  left: -12vw;
  z-index: -1;
  height: 230px;
  background: #ffffff;
  border-radius: 50% 50% 0 0 / 72% 72% 0 0;
  transform: rotate(-1.5deg);
}

.hero-inner {
  position: relative;
  z-index: 3;
}

.hero-headline .headline-sub {
  color: #ffffff;
}

.code-rain {
  z-index: 1;
  bottom: 42px;
  height: 340px;
}

.code-rain span {
  opacity: var(--opacity);
  filter: blur(0.1px);
  white-space: nowrap;
}

.section-flow {
  display: none;
}

.problem-section {
  padding-top: 2.4rem;
}

@keyframes auroraMove {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 2%, 0) scale(1.04);
  }
}

@keyframes codeDrop {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  12% {
    opacity: var(--opacity);
  }
  86% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 350px, 0);
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 76svh;
    align-items: start;
    padding-top: 4.2rem;
    padding-bottom: 2rem;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
  }

  .hero::after {
    bottom: -54px;
    height: 150px;
  }

  .hero-headline .headline-main {
    min-height: 2.35em;
    font-size: 1.78rem;
  }

  .hero-headline .headline-sub {
    min-height: 2.6em;
    color: #ffffff;
    font-size: 0.9rem;
  }

  .code-rain {
    bottom: 10px;
    height: 210px;
  }

  .problem-section {
    padding-top: 1.35rem;
  }

  .centered-copy .section-title {
    font-size: 2.08rem;
  }
}

/* Case study system */
.footer-cta.section-blue {
  color: #1f2024;
  background: #f7f4ee;
}

.footer-cta .footer-copy p,
.footer-cta .subscribe-form label,
.footer-cta .form-message {
  color: rgba(0, 0, 0, 0.62);
}

.case-study-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 1.15rem;
  padding: 0 1rem;
  color: #ffffff;
  background: #1f2024;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.case-carousel {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  overflow-x: auto;
  padding: 0 2rem 1.6rem;
  scroll-snap-type: x mandatory;
}

.case-card {
  flex: 0 0 min(850px, 82vw);
  scroll-snap-align: start;
}

.case-card a {
  display: grid;
  gap: 1.65rem;
  color: inherit;
}

.case-card figure {
  position: relative;
  height: 410px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #d8d8d8;
}

.case-card img,
.case-list-item img,
.case-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-card figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 2.1rem;
  color: #ffffff;
}

.case-card figcaption span {
  position: absolute;
  top: 2rem;
  left: 2.1rem;
  font-size: 2rem;
  font-weight: 950;
}

.case-card figcaption strong {
  font-size: 8.4rem;
  line-height: 0.92;
}

.case-card figcaption em {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 800;
}

.case-card h3 {
  max-width: 760px;
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.18;
}

.case-card p {
  max-width: 640px;
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
}

.read-link {
  justify-self: start;
  color: #1f2024;
  border-bottom: 3px solid currentColor;
  font-size: 1.35rem;
  font-weight: 850;
}

.footer-cta .subscribe-form input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}

.footer-cta .subscribe-form button {
  color: #ffffff;
  background: #1f2024;
}

.case-page {
  background: #fbfaf8;
}

.case-site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 104px;
  padding: 0 5vw;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.case-site-header nav {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  color: rgba(0, 0, 0, 0.58);
  font-weight: 750;
}

.case-site-header nav strong {
  color: #1f2024;
}

.case-site-header .header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
}

.case-list-hero {
  padding: 6rem 0 5.5rem;
  color: #ffffff;
  background: #1f2024 !important;
  background-image: none !important;
}

.case-list-hero::before,
.case-list-hero::after {
  display: none !important;
}

.case-list-hero p {
  margin: 0 0 5rem;
  color: rgba(255, 255, 255, 0.64);
  font-size: 1.2rem;
}

.case-list-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: 4.8rem;
  line-height: 1.04;
}

.case-list-hero span {
  display: block;
  max-width: 720px;
  margin-top: 1.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.65rem;
}

.case-list-section {
  display: grid;
  gap: 5rem;
  padding: 5.5rem 2rem;
}

.case-list-item a {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 3rem;
  align-items: end;
}

.case-list-item p {
  margin: 0 0 1.2rem;
  color: rgba(0, 0, 0, 0.52);
  font-weight: 850;
  text-transform: uppercase;
}

.case-list-item h2 {
  margin: 0 0 2rem;
  font-size: 3.45rem;
  line-height: 1.08;
}

.case-list-item span {
  border-bottom: 3px solid currentColor;
  font-size: 1.25rem;
  font-weight: 850;
}

.case-list-item img {
  height: 420px;
  border-radius: 12px;
}

.case-article {
  padding: 5.2rem 0 7rem;
}

.case-article-hero {
  padding: 0 2rem;
}

.case-article-hero > p {
  margin: 0 0 6rem;
  color: rgba(0, 0, 0, 0.58);
  font-size: 1.08rem;
}

.case-article-hero h1 {
  max-width: 1060px;
  margin: 0;
  font-size: 4.4rem;
  line-height: 1.12;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  align-items: center;
  margin-top: 2.2rem;
  font-size: 1.2rem;
}

.case-meta a {
  padding: 0.55rem 0.8rem;
  border: 2px solid #1f2024;
  border-radius: 8px;
  font-weight: 850;
}

.case-article-image {
  height: 560px;
  margin-top: 4.2rem;
  padding: 0 2rem;
}

.case-article-image img {
  border-radius: 10px;
}

.case-article-body {
  display: grid;
  grid-template-columns: 0.32fr 1fr;
  gap: 4rem;
  padding: 5rem 2rem 0;
}

.case-article-body aside {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

.case-article-body aside span {
  display: block;
  font-size: 5rem;
  font-weight: 950;
  line-height: 1;
}

.case-article-body aside p {
  margin: 0.8rem 0 0;
  color: rgba(0, 0, 0, 0.62);
  font-weight: 800;
}

.case-article-body .lead {
  margin-top: 0;
  font-size: 1.6rem;
  line-height: 1.45;
}

.case-article-body h2 {
  margin: 2.8rem 0 0.8rem;
  font-size: 2rem;
}

.case-article-body p {
  color: rgba(0, 0, 0, 0.68);
  font-size: 1.18rem;
}

@media (max-width: 820px) {
  .case-carousel {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .case-card {
    flex-basis: 86vw;
  }

  .case-card figure {
    height: 310px;
  }

  .case-card figcaption strong {
    font-size: 5rem;
  }

  .case-card h3 {
    font-size: 1.65rem;
  }

  .case-site-header {
    grid-template-columns: 1fr auto;
    min-height: 76px;
    padding: 0 1.2rem;
  }

  .case-site-header nav {
    display: none;
  }

  .case-list-hero,
  .case-list-section,
  .case-article {
    padding-top: 3.8rem;
  }

  .case-list-hero h1,
  .case-article-hero h1 {
    font-size: 2.6rem;
  }

  .case-list-item a,
  .case-article-body {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .case-list-item h2 {
    font-size: 2.05rem;
  }

  .case-list-item img,
  .case-article-image {
    height: 330px;
  }

  .case-article-hero > p {
    margin-bottom: 3rem;
  }

  .case-article-body aside {
    position: static;
  }
}

/* Organic blue hero, refined scroll sections */
.hero {
  min-height: 88vh;
  background:
    radial-gradient(70% 52% at 92% 45%, rgba(118, 134, 255, 0.68), transparent 60%),
    radial-gradient(58% 48% at 6% 34%, rgba(42, 60, 190, 0.8), transparent 62%),
    linear-gradient(180deg, #050715 0%, #080d38 13%, #1418aa 27%, #1d1cfe 45%, #1d1cfe 78%, #eaf0ff 96%, #ffffff 100%);
}

.hero::before {
  inset: -12% -12% 20%;
  background:
    radial-gradient(circle at 20% 46%, rgba(29, 28, 254, 0.86), transparent 28%),
    radial-gradient(circle at 78% 55%, rgba(95, 120, 255, 0.74), transparent 26%),
    radial-gradient(circle at 52% 66%, rgba(29, 28, 254, 0.8), transparent 36%);
  filter: blur(52px);
  opacity: 1;
}

.hero::after {
  right: -18vw;
  bottom: -110px;
  left: -18vw;
  height: 280px;
  background:
    radial-gradient(56% 90% at 24% 28%, rgba(255, 255, 255, 0.98) 0 50%, transparent 52%),
    radial-gradient(60% 86% at 72% 24%, rgba(255, 255, 255, 0.96) 0 48%, transparent 51%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 54%);
  border-radius: 50% 50% 0 0 / 82% 82% 0 0;
  transform: rotate(-0.6deg);
}

.code-rain span {
  mix-blend-mode: screen;
}

.problem-section {
  padding-top: 1.8rem;
}

.pain-layout {
  margin-top: 2rem;
}

.pain-question {
  max-width: 980px;
  margin: 0 auto 1.35rem;
  text-align: center;
}

.pain-question span {
  display: block;
  color: var(--ink);
  font-size: 2.28rem;
  line-height: 1.16;
}

.pain-question small {
  display: block;
  margin-top: 0.65rem;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
}

.problem-stack,
.solution-stack {
  max-width: 960px;
  gap: 0;
}

.problem-stack .motion-panel,
.solution-stack .motion-panel {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 220px;
  gap: 1.4rem;
  align-items: center;
  min-height: 132px;
  margin: 0;
  padding: 1.25rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.problem-stack .motion-panel:last-child,
.solution-stack .motion-panel:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.problem-stack .motion-panel::before,
.solution-stack .motion-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1rem;
  width: 4px;
  background: #1d1cfe;
  border-radius: 999px;
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.problem-stack .motion-panel:hover::before,
.problem-stack .motion-panel.is-active::before,
.solution-stack .motion-panel:hover::before,
.solution-stack .motion-panel.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.problem-stack .motion-panel span,
.solution-stack .motion-panel span {
  color: #1d1cfe;
  font-size: 1rem;
}

.problem-stack .motion-panel h4,
.solution-stack .motion-panel h3 {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-size: 1.45rem;
  transition: color 420ms var(--ease), transform 420ms var(--ease), font-size 420ms var(--ease);
}

.problem-stack .motion-panel p,
.solution-stack .motion-panel p {
  margin: 0;
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.98rem;
}

.problem-stack .motion-panel.is-active h4,
.problem-stack .motion-panel:hover h4,
.solution-stack .motion-panel.is-active h3,
.solution-stack .motion-panel:hover h3 {
  color: #1d1cfe;
  font-size: 1.72rem;
  transform: translateX(6px);
}

.problem-stack .panel-effect,
.solution-stack .panel-effect {
  position: relative;
  inset: auto;
  height: 94px;
  opacity: 0.28;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.problem-stack .motion-panel.is-active .panel-effect,
.problem-stack .motion-panel:hover .panel-effect,
.solution-stack .motion-panel.is-active .panel-effect,
.solution-stack .motion-panel:hover .panel-effect {
  opacity: 1;
  transform: translateY(-4px);
}

.money-effect i {
  color: #1d1cfe;
  font-size: 1.1rem;
}

.dart-effect b {
  right: 40px;
  bottom: 8px;
  border-color: rgba(29, 28, 254, 0.58);
}

.dart-effect b::before {
  border-color: rgba(29, 28, 254, 0.22);
}

.dart {
  background: #1d1cfe;
}

.dart::after {
  border-left-color: #1d1cfe;
}

.quality-effect i {
  right: 44px;
  background: rgba(29, 28, 254, 0.28);
}

.quality-effect b {
  right: 68px;
  border-color: #1d1cfe;
}

.data-effect i {
  background: rgba(29, 28, 254, 0.34);
}

.data-effect b {
  background: #1d1cfe;
}

.solution-block {
  margin-top: 3rem;
}

.solution-block h2 {
  text-align: center;
}

.solution-stack {
  overflow: hidden;
}

.solution-stack::before {
  left: 42px;
  background: linear-gradient(180deg, #1d1cfe, rgba(29, 28, 254, 0.08));
}

.solution-stack .motion-panel {
  transform: translateY(18px);
  opacity: 0.72;
}

.solution-stack .motion-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.process-section {
  padding: 5rem 0;
}

.modern-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.modern-steps::before {
  display: none;
}

.modern-step {
  min-height: 188px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.modern-step::before {
  right: 1rem;
  bottom: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.18;
}

.modern-step h3 {
  margin: 2.7rem 0 0.7rem;
  font-size: 1.28rem;
}

.modern-step.is-active h3 {
  font-size: 1.48rem;
}

.modern-step p {
  font-size: 0.96rem;
}

.footer-cta.section-blue {
  background: #ffffff;
}

.case-study-button {
  color: #ffffff;
}

.case-carousel {
  max-width: none;
  width: 100%;
  margin-top: 2rem;
  padding-left: max(1.25rem, calc((100vw - 1280px) / 2 + 2rem));
  padding-right: max(1.25rem, calc((100vw - 1280px) / 2 + 2rem));
  scroll-padding-left: max(1.25rem, calc((100vw - 1280px) / 2 + 2rem));
}

.case-card {
  flex-basis: min(760px, 82vw);
}

.case-card > div {
  display: grid;
  gap: 1.2rem;
}

.case-card a {
  display: block;
}

.case-card figure {
  height: 370px;
}

.case-card h3 {
  padding: 0;
}

.case-card h3 a {
  display: inline;
}

.case-card p {
  padding: 0;
}

.read-link {
  display: none;
}

@media (max-width: 820px) {
  .hero {
    min-height: 76svh;
  }

  .hero::after {
    bottom: -72px;
    height: 180px;
  }

  .pain-question {
    text-align: left;
  }

  .pain-question span {
    font-size: 1.78rem;
  }

  .pain-question small {
    font-size: 0.98rem;
  }

  .problem-stack .motion-panel,
  .solution-stack .motion-panel {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.8rem;
    min-height: 150px;
    padding: 1rem 0;
  }

  .problem-stack .panel-effect,
  .solution-stack .panel-effect {
    grid-column: 2;
    width: 100%;
    height: 72px;
  }

  .problem-stack .motion-panel h4,
  .solution-stack .motion-panel h3 {
    font-size: 1.24rem;
  }

  .problem-stack .motion-panel.is-active h4,
  .problem-stack .motion-panel:hover h4,
  .solution-stack .motion-panel.is-active h3,
  .solution-stack .motion-panel:hover h3 {
    font-size: 1.36rem;
  }

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

  .modern-step {
    min-height: 156px;
  }

  .case-carousel {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    scroll-padding-left: 1.2rem;
  }

  .case-card {
    flex-basis: 84vw;
  }

  .case-card figure {
    height: 280px;
  }
}

/* Compact cleanup pass */
.brand-logo {
  width: 54px;
  height: 30px;
}

.brand-logo img {
  object-position: center;
}

.hero {
  min-height: 78vh;
  padding-top: 7.8rem;
  padding-bottom: 2.4rem;
  border-radius: 0;
  background:
    radial-gradient(70% 52% at 92% 45%, rgba(118, 134, 255, 0.52), transparent 60%),
    radial-gradient(58% 48% at 6% 34%, rgba(42, 60, 190, 0.62), transparent 62%),
    linear-gradient(180deg, #070818 0%, #11138a 14%, #1d1cfe 34%, #1d1cfe 84%, #ffffff 100%);
}

.hero::after {
  display: none;
}

.hero-signal {
  position: relative;
  display: inline-grid;
  grid-template-columns: 20px repeat(3, 30px) auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 38px;
  margin-bottom: 1.1rem;
  padding: 0.45rem 0.68rem;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

.hero-signal span {
  width: 8px;
  height: 8px;
  background: #c8ff6b;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(200, 255, 107, 0.8);
  animation: signalPulse 1.8s ease-in-out infinite;
}

.hero-signal i {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  transform-origin: left center;
  animation: signalBar 1.7s ease-in-out infinite;
}

.hero-signal i:nth-of-type(2) {
  animation-delay: 0.22s;
}

.hero-signal i:nth-of-type(3) {
  animation-delay: 0.44s;
}

.hero-signal em {
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.section-flow {
  display: none;
}

.problem-section {
  padding-top: 1.2rem;
}

.pain-layout {
  margin-top: 1.45rem;
}

.pain-question {
  margin-bottom: 0.95rem;
}

.pain-question span {
  font-size: 1.82rem;
}

  .pain-question small {
    font-size: 0.98rem;
    font-weight: 460;
  }

.problem-stack,
.solution-stack {
  max-width: 920px;
}

.problem-stack .motion-panel,
.solution-stack .motion-panel {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 86px;
  padding: 0.7rem 0;
}

.problem-stack .motion-panel::before,
.solution-stack .motion-panel::before,
.solution-stack::before {
  display: none;
}

.problem-stack .motion-panel span,
.solution-stack .motion-panel span {
  color: #1d1cfe;
}

.problem-stack .motion-panel h4,
.solution-stack .motion-panel h3,
.problem-stack .motion-panel.is-active h4,
.problem-stack .motion-panel:hover h4,
.solution-stack .motion-panel.is-active h3,
.solution-stack .motion-panel:hover h3 {
  margin: 0 0 0.22rem;
  color: var(--ink);
  font-size: 1.2rem;
  transform: none;
}

.problem-stack .motion-panel p,
.solution-stack .motion-panel p {
  color: rgba(0, 0, 0, 0.66);
  font-size: 0.95rem;
}

.problem-stack .panel-effect,
.solution-stack .panel-effect {
  display: none !important;
}

.strategy-section {
  padding-top: 4.2rem;
}

.strategy-head {
  gap: 1.5rem;
}

.video-lab {
  margin-top: 2.3rem;
}

.solution-block {
  margin-top: 2rem;
}

.solution-block h2 {
  margin-bottom: 0.8rem;
}

.solution-stack .motion-panel,
.solution-stack .motion-panel.is-active {
  opacity: 1;
  transform: none;
}

.process-section {
  padding: 4.2rem 0;
}

.work-switch {
  display: grid;
  grid-template-columns: 0.48fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0 2rem;
}

.work-tabs {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.work-tab {
  display: grid;
  gap: 0.25rem;
  min-height: 58px;
  padding: 0.8rem 0.95rem;
  text-align: left;
  color: rgba(245, 247, 250, 0.66);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  transition: background 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease);
}

.work-tab span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.work-tab.is-active {
  color: #111111;
  background: #ffffff;
  transform: translateX(4px);
}

.work-panel {
  position: relative;
  min-height: 246px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.work-step {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}

.work-step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.work-step span {
  position: absolute;
  top: 1.35rem;
  left: 1.5rem;
  color: rgba(245, 247, 250, 0.58);
  font-size: 0.82rem;
  font-weight: 900;
}

.work-step h3 {
  margin: 0 0 0.7rem;
  font-size: 2rem;
  line-height: 1.12;
}

.work-step p {
  max-width: 560px;
  margin: 0;
  color: rgba(245, 247, 250, 0.72);
  font-size: 1.05rem;
}

.modern-steps {
  display: none;
}

.case-carousel {
  scrollbar-width: none;
}

.case-carousel::-webkit-scrollbar {
  display: none;
}

@keyframes signalPulse {
  50% {
    transform: scale(1.55);
    opacity: 0.52;
  }
}

@keyframes signalBar {
  0%,
  100% {
    transform: scaleX(0.38);
    opacity: 0.34;
  }
  50% {
    transform: scaleX(1);
    opacity: 0.72;
  }
}

@media (max-width: 820px) {
  .brand-logo {
    width: 48px;
    height: 27px;
  }

  .hero {
    min-height: 70svh;
    padding-top: 4rem;
    padding-bottom: 1.8rem;
  }

  .hero-signal {
    margin-bottom: 0.8rem;
    transform: scale(0.9);
    transform-origin: left center;
  }

  .pain-question span {
    font-size: 1.46rem;
  }

  .problem-stack .motion-panel,
  .solution-stack .motion-panel {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 78px;
  }

  .work-switch {
    grid-template-columns: 1fr;
    padding: 0 1.2rem;
  }

  .work-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-panel {
    min-height: 230px;
  }

  .work-step h3 {
    font-size: 1.62rem;
  }
}

/* Final polish pass: readable engine, centered cards, compact work switch. */
.hero-inner {
  display: grid;
  justify-items: center;
}

.hero-eyebrow {
  max-width: 760px;
  margin: 0 auto 1rem;
  color: rgba(245, 247, 250, 0.88);
  font-size: clamp(1.05rem, 2.2vw, 1.62rem);
  font-weight: 430;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.hero-actions {
  margin-bottom: 1.25rem;
}

.hero-engine {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.72rem 0.9rem;
  width: min(620px, 100%);
  margin: 0 auto;
  padding: 1rem;
  color: #f5f7fa;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(8, 10, 42, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(22px);
  overflow: hidden;
}

/* Final requested tightening: no hero CTA, engine sits closer to the headline. */
.hero-headline {
  margin-bottom: 1.1rem;
}

.hero-engine {
  margin-top: 0.15rem;
}

.contact-modal {
  width: min(92vw, 760px);
  max-width: calc(100vw - 1rem);
}

.contact-frame-panel {
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
}

.formbuilder-native-form,
.formbuilder-native-form label,
.formbuilder-native-form input,
.formbuilder-native-form textarea {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .hero-headline {
    margin-bottom: 0.8rem;
  }

  .hero-engine {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .contact-modal {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  .contact-frame-panel {
    width: 100%;
    max-height: calc(100svh - 1rem);
  }
}

.hero-engine::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4), transparent 18%),
    radial-gradient(circle at 72% 26%, rgba(200, 255, 107, 0.34), transparent 16%),
    conic-gradient(from 140deg, transparent, rgba(255, 255, 255, 0.22), transparent 34%);
  animation: engineSweep 7s linear infinite;
}

.hero-engine span {
  grid-column: 1 / -1;
  color: rgba(245, 247, 250, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-engine strong {
  align-self: end;
  min-height: 2.15rem;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-engine em {
  align-self: end;
  color: rgba(245, 247, 250, 0.76);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.engine-track {
  grid-column: 1 / -1;
  height: 9px;
  padding: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.engine-track i {
  display: block;
  width: 0%;
  height: 100%;
  background:
    linear-gradient(90deg, #ffffff, #c8ff6b 48%, #ffffff),
    #ffffff;
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(200, 255, 107, 0.65);
  transition: width 90ms linear;
}

@keyframes engineSweep {
  to {
    transform: rotate(1turn);
  }
}

.problem-section {
  padding-top: 0.8rem;
}

.pain-question {
  display: grid;
  gap: 0.55rem;
  margin: 0 auto 1.15rem;
  text-align: center;
}

.pain-question span {
  font-size: clamp(1.42rem, 3vw, 2.05rem);
  line-height: 1.16;
}

.pain-question small {
  width: fit-content;
  max-width: min(680px, 100%);
  margin: 0.72rem auto 0;
  padding: 0.72rem 1.05rem;
  color: rgba(0, 0, 0, 0.72);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(29, 28, 254, 0.14);
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(29, 28, 254, 0.1);
  backdrop-filter: blur(14px);
  font-size: clamp(0.92rem, 1.45vw, 1.04rem);
  font-weight: 460;
  line-height: 1.5;
  text-wrap: balance;
}

.problem-stack,
.solution-stack {
  display: grid;
  gap: 0.55rem;
  width: min(860px, 100%);
  margin-inline: auto;
}

.problem-stack .motion-panel,
.solution-stack .motion-panel,
.problem-stack .motion-panel.is-active,
.solution-stack .motion-panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 0.38rem;
  min-height: 118px;
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(29, 28, 254, 0.1);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(29, 28, 254, 0.08);
  transform: none;
}

.problem-stack .motion-panel:hover,
.solution-stack .motion-panel:hover {
  background: #ffffff;
  box-shadow: 0 22px 56px rgba(29, 28, 254, 0.14);
  transform: translateY(-2px);
}

.problem-stack .motion-panel span,
.solution-stack .motion-panel span,
.problem-stack .motion-panel.is-active span,
.solution-stack .motion-panel.is-active span {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 26px;
  padding: 0 0.64rem;
  color: #ffffff;
  background: #1d1cfe;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.problem-stack .motion-panel h4,
.solution-stack .motion-panel h3,
.problem-stack .motion-panel.is-active h4,
.problem-stack .motion-panel:hover h4,
.solution-stack .motion-panel.is-active h3,
.solution-stack .motion-panel:hover h3 {
  max-width: 100%;
  margin: 0.1rem 0 0;
  color: #050505;
  font-size: clamp(1.22rem, 2vw, 1.58rem);
  font-weight: 920;
  line-height: 1.12;
  text-wrap: balance;
  transform: none;
}

.problem-stack .motion-panel p,
.solution-stack .motion-panel p,
.problem-stack .motion-panel.is-active p,
.solution-stack .motion-panel.is-active p {
  max-width: 640px;
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: balance;
}

.strategy-section {
  padding-top: 3rem;
}

.solution-block {
  margin-top: 1.6rem;
}

.solution-block h2 {
  text-align: center;
}

.process-intro .section-title {
  font-size: clamp(2.05rem, 4.7vw, 4.6rem);
}

.work-switch {
  grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(980px, calc(100% - 2rem));
  gap: 0.72rem;
  margin-top: 1.45rem;
  padding: 0;
}

.work-tabs {
  gap: 0.42rem;
}

.work-tab {
  min-height: 54px;
  padding: 0.76rem 0.9rem;
  border-radius: 14px;
  line-height: 1.2;
}

.work-panel {
  min-height: 198px;
  border-radius: 18px;
}

.work-step {
  align-content: center;
  padding: 1.35rem 1.45rem 1.3rem;
}

.work-step span {
  top: 1rem;
  left: 1.35rem;
}

.work-step h3 {
  max-width: 560px;
  margin: 1.25rem 0 0.52rem;
  font-size: clamp(1.42rem, 2.8vw, 2rem);
}

.work-step p {
  max-width: 600px;
  font-size: clamp(0.94rem, 1.5vw, 1.04rem);
  line-height: 1.62;
}

.case-carousel {
  scrollbar-width: none;
}

.case-carousel::-webkit-scrollbar {
  display: none;
}

@media (max-width: 820px) {
  .hero {
    min-height: auto;
    padding-top: 4.45rem;
    padding-bottom: 1.2rem;
  }

  .hero-headline {
    margin-bottom: 1rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.72rem;
    font-size: 1.08rem;
  }

  .hero-actions {
    margin-bottom: 0.95rem;
  }

  .hero-engine {
    width: min(100%, 350px);
    padding: 0.86rem;
    border-radius: 16px;
  }

  .hero-engine strong {
    min-height: 3.1rem;
    font-size: 1.2rem;
  }

  .hero-engine em {
    font-size: 0.94rem;
  }

  .problem-section {
    padding-top: 0.45rem;
  }

  .pain-layout {
    margin-top: 1rem;
  }

  .problem-stack,
  .solution-stack {
    gap: 0.5rem;
  }

  .problem-stack .motion-panel,
  .solution-stack .motion-panel,
  .problem-stack .motion-panel.is-active,
  .solution-stack .motion-panel.is-active {
    min-height: 126px;
    padding: 1rem 0.9rem;
  }

  .strategy-section {
    padding-top: 2.35rem;
  }

  .work-switch {
    width: min(100% - 1.4rem, 520px);
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .work-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-tab {
    min-height: 58px;
    padding: 0.72rem;
    border-radius: 13px;
    font-size: 0.9rem;
  }

  .work-panel {
    min-height: 184px;
  }

  .work-step {
    padding: 1.2rem;
  }

  .work-step span {
    top: 0.95rem;
    left: 1.1rem;
  }

  .work-step h3 {
    margin-top: 1.2rem;
    font-size: 1.36rem;
  }
}

/* Strategy video strip: compact, straight, floating evidence row. */
.video-lab {
  width: min(1080px, calc(100% - 2rem));
  margin: 1.7rem auto 0;
  padding: 0;
  overflow: visible;
}

.video-track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.62rem, 1.25vw, 1rem);
  min-width: 0;
  height: auto;
  overflow: visible;
  padding: 1.2rem 0.2rem 1.55rem;
  scroll-snap-type: none;
}

.phone-card,
.phone-card:nth-child(1),
.phone-card:nth-child(2),
.phone-card:nth-child(3),
.phone-card:nth-child(4),
.phone-card:nth-child(5) {
  flex: 0 0 clamp(118px, 13vw, 158px);
  filter: drop-shadow(0 22px 32px rgba(29, 28, 254, 0.16)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.1));
  transform: translateY(0);
  animation: miniFloat 6.8s ease-in-out infinite;
}

.phone-card:nth-child(2),
.phone-card:nth-child(4) {
  animation-delay: -1.6s;
}

.phone-card:nth-child(3) {
  animation-delay: -3s;
}

.phone-card:hover {
  animation: none;
  filter: drop-shadow(0 28px 46px rgba(29, 28, 254, 0.24)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.16));
  transform: translateY(-6px);
}

.video-scene {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.video-brand {
  top: 10px;
  left: 10px;
  padding: 0.24rem 0.38rem;
  border-radius: 6px;
  font-size: 0.54rem;
}

.video-copy {
  right: 9px;
  left: 9px;
  font-size: clamp(0.82rem, 1.05vw, 1.05rem);
}

.video-copy.top {
  top: 48px;
}

.play-button {
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

.play-button::before {
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 14px;
}

.play-button.pause::before,
.play-button.pause::after {
  width: 5px;
  height: 16px;
}

.play-button.pause::before {
  left: 14px;
}

.play-button.pause::after {
  left: 21px;
}

.video-progress {
  right: 9px;
  bottom: 11px;
  left: 9px;
  height: 7px;
  padding: 2px;
}

.creator {
  right: 14px;
  bottom: 42px;
  width: 66px;
  height: 92px;
  border-radius: 34px 34px 16px 16px;
}

.creator::before {
  top: -24px;
  left: 14px;
  width: 38px;
  height: 38px;
}

.creator-b {
  right: 44px;
}

.product-bottle {
  left: 18px;
  bottom: 43px;
  width: 39px;
  height: 90px;
  border-width: 2px;
  border-radius: 14px 14px 8px 8px;
}

.product-bottle::before {
  top: -16px;
  left: 10px;
  width: 18px;
  height: 16px;
  border-radius: 5px 5px 2px 2px;
}

.bottle-b {
  right: 18px;
}

.product-jar {
  left: 22px;
  bottom: 48px;
  width: 70px;
  height: 50px;
  border-width: 3px;
  border-radius: 13px 13px 22px 22px;
}

.split-screen {
  inset: 76px 14px 70px;
  border-width: 2px;
  border-radius: 9px;
}

.comment-bubble {
  right: 22px;
  left: 10px;
  bottom: 80px;
  padding: 0.42rem 0.5rem;
  border-radius: 7px;
  font-size: 0.62rem;
}

.floating-metrics {
  right: 10px;
  bottom: 84px;
  padding: 0.34rem 0.46rem;
  font-size: 0.58rem;
}

@keyframes miniFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@media (max-width: 820px) {
  .video-lab {
    width: 100%;
    margin-top: 1.25rem;
    overflow: hidden;
  }

  .video-track {
    justify-content: flex-start;
    gap: 0.78rem;
    overflow-x: auto;
    padding: 1rem 1.05rem 1.55rem;
    scroll-padding-left: 1.05rem;
    scroll-snap-type: x mandatory;
  }

  .phone-card,
  .phone-card:nth-child(1),
  .phone-card:nth-child(2),
  .phone-card:nth-child(3),
  .phone-card:nth-child(4),
  .phone-card:nth-child(5) {
    flex: 0 0 min(38vw, 150px);
    scroll-snap-align: center;
  }
}

@media (max-width: 430px) {
  .phone-card,
  .phone-card:nth-child(1),
  .phone-card:nth-child(2),
  .phone-card:nth-child(3),
  .phone-card:nth-child(4),
  .phone-card:nth-child(5) {
    flex-basis: 42vw;
  }
}

/* Premium final polish: luminous hero copy, sharper media, tighter case studies. */
.hero-headline .headline-main,
.hero-headline .headline-sub {
  white-space: pre-line;
}

.hero-eyebrow {
  position: relative;
  overflow: hidden;
  font-size: clamp(1.18rem, 2.45vw, 1.82rem);
}

.hero-eyebrow::after {
  content: "";
  position: absolute;
  inset: -20% -34%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.92) 48%, transparent 60%);
  opacity: 0.64;
  mix-blend-mode: screen;
  transform: translateX(-72%);
  animation: eyebrowShine 4.8s var(--ease) infinite;
}

.hero-headline .headline-sub {
  font-size: clamp(1.22rem, 2.4vw, 2rem);
  font-weight: 540;
}

.glass-button,
.header-cta,
.hero-engine {
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}

.glass-button,
.header-cta {
  position: relative;
  overflow: hidden;
}

.glass-button::after,
.header-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45), transparent 66%);
  border-radius: inherit;
  opacity: 0;
  transform: translateX(-80%);
  transition: opacity 220ms var(--ease), transform 520ms var(--ease);
  pointer-events: none;
}

.glass-button:hover,
.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.glass-button:hover::after,
.header-cta:hover::after {
  opacity: 1;
  transform: translateX(80%);
}

.hero-engine:hover {
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.desktop-title {
  display: inline;
}

.mobile-title {
  display: none;
}

.video-lab {
  background: transparent !important;
  box-shadow: none !important;
}

.video-track {
  background: transparent !important;
}

.phone-card,
.phone-card:nth-child(1),
.phone-card:nth-child(2),
.phone-card:nth-child(3),
.phone-card:nth-child(4),
.phone-card:nth-child(5) {
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.14));
}

.video-scene {
  background-color: transparent;
  box-shadow: none;
}

.video-scene::after {
  background: none;
}

.solution-block h2 {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
}

.case-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(1180px, calc(100% - 2.5rem));
  max-width: 1180px;
  margin: 1.8rem auto 0;
  padding: 0 0 0.2rem;
  overflow: visible;
  scroll-snap-type: none;
}

.case-card {
  min-width: 0;
  flex: initial;
  scroll-snap-align: none;
}

.case-card > div {
  gap: 0.78rem;
}

.case-card figure {
  height: clamp(205px, 20vw, 270px);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}

.case-card figure:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.15);
}

.case-card figcaption {
  padding: 1.15rem;
}

.case-card figcaption span {
  top: 1rem;
  left: 1.15rem;
  font-size: 1.02rem;
}

.case-card figcaption strong {
  font-size: clamp(3rem, 6vw, 4.9rem);
}

.case-card figcaption em {
  font-size: 0.9rem;
  line-height: 1.25;
}

.case-card h3 {
  max-width: none;
  font-size: clamp(1.12rem, 1.55vw, 1.42rem);
  line-height: 1.26;
}

.case-card p {
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.55;
}

@keyframes eyebrowShine {
  0%,
  44% {
    transform: translateX(-72%);
  }
  78%,
  100% {
    transform: translateX(72%);
  }
}

@media (max-width: 820px) {
  .hero-headline .headline-main {
    min-height: 2.35em;
  }

  .hero-headline .headline-sub {
    min-height: 2.55em;
    font-size: calc(1.22rem + 2px);
  }

  .hero-eyebrow {
    font-size: 1.18rem;
  }

  .desktop-title {
    display: none;
  }

  .mobile-title {
    display: inline;
  }

  .strategy-head .section-title {
    line-height: 1.08;
  }

  .case-carousel {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 1.2rem 1.1rem;
    scroll-padding-left: 1.2rem;
    scroll-snap-type: x mandatory;
  }

  .case-card {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }

  .case-card figure {
    height: 260px;
  }
}

.real-video-scene {
  background: transparent;
}

.real-video-scene::before,
.real-video-scene::after {
  display: none;
}

.sample-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: transparent;
}

.sample-video::-webkit-media-controls,
.sample-video::-webkit-media-controls-panel,
.sample-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0;
}

.contact-frame-panel {
  width: min(760px, calc(100vw - 1.5rem));
  max-height: min(820px, calc(100svh - 1.5rem));
  overflow: auto;
}

.contact-modal {
  width: min(94vw, 820px);
}

.contact-modal.is-open,
.article-modal.is-open {
  display: block;
}

.contact-frame-panel h2 {
  margin-bottom: 0.9rem;
  opacity: 1;
}

.contact-frame {
  width: 100%;
  height: min(600px, calc(100svh - 220px));
  min-height: 460px;
  display: block;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
}

.contact-frame-diagnostic[hidden] {
  display: none;
}

.formbuilder-native-form {
  display: grid;
  gap: 0.86rem;
}

.formbuilder-native-form label {
  display: grid;
  gap: 0.4rem;
  color: #111111;
  font-size: 0.9rem;
  font-weight: 820;
}

.formbuilder-native-form input,
.formbuilder-native-form textarea {
  width: 100%;
  padding: 0.86rem 0.95rem;
  color: #111111;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font: inherit;
  font-weight: 500;
  outline: 0;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}

.formbuilder-native-form textarea {
  resize: vertical;
  min-height: 116px;
}

.formbuilder-native-form input:focus,
.formbuilder-native-form textarea:focus {
  background: #ffffff;
  border-color: #1d1cfe;
  box-shadow: 0 0 0 4px rgba(29, 28, 254, 0.1);
}

.formbuilder-native-form .primary-button {
  justify-self: stretch;
  min-height: 50px;
  margin-top: 0.2rem;
  color: #ffffff;
  background: #111111;
}

.formbuilder-native-form .primary-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.formbuilder-status {
  min-height: 1.35em;
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}

.frame-fallback {
  justify-self: center;
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .contact-frame-panel {
    width: calc(100vw - 1rem);
    padding: 1rem;
  }

  .contact-frame {
    height: calc(100svh - 174px);
    min-height: 520px;
    border-radius: 14px;
  }

  .formbuilder-native-form input,
  .formbuilder-native-form textarea {
    padding: 0.78rem 0.84rem;
  }
}

.substack-subscribe {
  display: grid;
  justify-items: center;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: min(640px, calc(100% - 2rem));
  max-width: 640px;
  margin-top: 2.1rem;
  padding: 0;
}

.substack-subscribe h3 {
  margin: 0;
  color: #111111;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 880;
  line-height: 1.2;
  text-align: center;
}

.substack-native-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  width: min(520px, 100%);
  padding: 0.55rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08);
}

.substack-native-form label {
  min-width: 0;
}

.substack-native-form label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.substack-native-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 1rem;
  color: #111111;
  background: #f7f7f8;
  border: 1px solid transparent;
  border-radius: 999px;
  outline: 0;
}

.substack-native-form input:focus {
  background: #ffffff;
  border-color: #1d1cfe;
  box-shadow: 0 0 0 4px rgba(29, 28, 254, 0.1);
}

.substack-native-form button {
  min-height: 46px;
  padding: 0 1.05rem;
  color: #ffffff;
  background: #111111;
  border: 0;
  border-radius: 999px;
  font-weight: 880;
  transition: transform 220ms var(--ease), background 220ms var(--ease);
}

.substack-native-form button:hover,
.substack-native-form button:focus-visible {
  background: #1d1cfe;
  transform: translateY(-1px);
}

.subscribe-modal {
  width: min(92vw, 520px);
}

.subscribe-modal.is-open {
  display: block;
}

.subscribe-modal-panel {
  width: 100%;
  padding: 1.55rem;
}

.subscribe-modal-panel h2 {
  margin: 0.45rem 0 0.7rem;
  color: #111111;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.12;
}

.subscribe-modal-panel p:not(.eyebrow) {
  margin: 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: 1rem;
  line-height: 1.6;
}

.subscribe-modal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 1.15rem;
  padding: 0 1rem;
  color: #ffffff;
  background: #111111;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 860;
}

.substack-fallback {
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.86rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 520px) {
  .substack-subscribe {
    width: calc(100% - 1.5rem);
  }

  .substack-native-form {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .substack-native-form button {
    width: 100%;
  }
}

/* Editorial article style */
.case-page {
  background: #ffffff;
}

.case-page .case-article {
  color: #333333;
}

.case-article-hero h1 {
  max-width: 1180px;
  color: #333333;
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  font-weight: 920;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.case-subtitle {
  max-width: 960px;
  margin: 2.2rem 0 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: clamp(1.32rem, 2.5vw, 2.05rem);
  line-height: 1.3;
}

.case-author {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  margin-top: 3.8rem;
}

.case-author span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.15rem;
  color: #333333;
  background: #f0f0f0;
  border-radius: 999px;
  font-size: 1.28rem;
  font-weight: 650;
}

.case-author i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -2.1rem;
  color: #ffffff;
  background: #b9b9b9;
  border-radius: 50%;
  font-size: 1.08rem;
  font-style: normal;
  font-weight: 900;
}

.case-author b {
  color: rgba(0, 0, 0, 0.58);
  font-size: 1.58rem;
  font-weight: 520;
}

.case-article-body {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  gap: 0;
}

.case-article-body aside {
  display: none;
}

.case-article-body > div {
  max-width: 100%;
}

.case-article-body .lead {
  max-width: 1040px;
  margin: 0 0 2.1rem;
  color: rgba(0, 0, 0, 0.72);
  font-size: clamp(1.48rem, 2.4vw, 2rem);
  line-height: 1.72;
}

.case-article-body h4 {
  margin: 3.4rem 0 1.8rem;
  color: #333333;
  font-size: clamp(1.78rem, 3.3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.case-article-body p,
.case-article-body li {
  color: #363636;
  font-size: clamp(1.36rem, 2.25vw, 2.05rem);
  font-weight: 420;
  line-height: 1.78;
}

.case-article-body p {
  margin: 0 0 2.1rem;
}

.case-article-body strong {
  color: #2f2f2f;
  font-weight: 900;
}

.case-article-body ol,
.case-article-body ul {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 2.4rem 2.1rem;
  padding: 0;
}

.case-article-body ul {
  margin-left: 2.5rem;
}

.case-article-body blockquote {
  margin: 3.2rem 0;
  padding: 2.25rem 1rem;
  color: #333333;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: clamp(1.48rem, 2.8vw, 2.3rem);
  font-style: italic;
  font-weight: 720;
  line-height: 1.52;
  text-align: center;
}

.case-article-body .article-center {
  margin-top: 5.4rem;
  text-align: center;
}

.case-article-image {
  height: clamp(320px, 42vw, 560px);
}

@media (max-width: 820px) {
  .case-article-hero h1 {
    font-size: clamp(2.45rem, 10vw, 3.4rem);
  }

  .case-subtitle {
    margin-top: 1.35rem;
    font-size: 1.25rem;
  }

  .case-author {
    margin-top: 2rem;
  }

  .case-author span {
    min-height: 38px;
    font-size: 1rem;
  }

  .case-article-body {
    padding-top: 3rem;
  }

  .case-article-body .lead,
  .case-article-body p,
  .case-article-body li {
    font-size: 1.18rem;
    line-height: 1.78;
  }

  .case-article-body h4 {
    margin-top: 2.6rem;
    font-size: 1.72rem;
  }

  .case-article-body blockquote {
    margin: 2.4rem 0;
    padding: 1.6rem 0.2rem;
    font-size: 1.32rem;
  }
}

/* Latest mobile QA overrides */
.hero-headline {
  margin-bottom: 1.05rem;
}

.hero-engine {
  margin-top: 0;
}

.contact-modal {
  width: min(92vw, 760px);
  max-width: calc(100vw - 1rem);
  overflow: visible;
}

.contact-frame-panel {
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
}

.formbuilder-native-form,
.formbuilder-native-form label,
.formbuilder-native-form input,
.formbuilder-native-form textarea {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .hero-headline {
    margin-bottom: 0.75rem;
  }

  .hero-engine {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .contact-modal {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  .contact-frame-panel {
    width: 100%;
    max-height: calc(100svh - 1rem);
    padding: 1rem;
  }
}

/* Requested final content pass: cleaner header, article thumbnails, problem rain, fanfare CTA. */
.site-header:not(.is-scrolled) .brand {
  color: #ffffff;
  font-weight: 420;
}

.site-header:not(.is-scrolled) .brand > span:last-child {
  color: #ffffff;
  font-weight: 420;
}

.hero {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background:
    radial-gradient(74% 58% at 92% 42%, rgba(118, 134, 255, 0.5), transparent 62%),
    radial-gradient(58% 48% at 6% 34%, rgba(42, 60, 190, 0.58), transparent 64%),
    linear-gradient(180deg, #070818 0%, #11138a 13%, #1d1cfe 32%, #1d1cfe 72%, #ebf0ff 94%, #ffffff 100%);
}

.hero::after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 32vh;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72) 58%, #ffffff 100%);
}

.hero-eyebrow {
  font-size: clamp(1.28rem, 2.65vw, 1.96rem);
}

.hero-headline .headline-sub {
  max-width: 920px;
}

.pain-layout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 0.4rem;
  padding-bottom: 0.6rem;
}

.pain-layout > :not(.problem-code-rain) {
  position: relative;
  z-index: 2;
}

.problem-code-rain {
  position: absolute;
  inset: -0.8rem 0 0;
  z-index: 0;
  height: auto;
  opacity: 0.42;
  mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
}

.problem-code-rain span {
  color: rgba(29, 28, 254, 0.7);
  mix-blend-mode: multiply;
}

.strategy-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.strategy-section > :not(.strategy-code-rain) {
  position: relative;
  z-index: 2;
}

.strategy-code-rain {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 360px;
  opacity: 0.36;
  mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
}

.strategy-code-rain span {
  color: rgba(29, 28, 254, 0.58);
  mix-blend-mode: multiply;
}

.problem-code-rain {
  inset: -0.2rem 0 auto;
  height: 390px;
  opacity: 0.44;
  mask-image: linear-gradient(transparent, #000 10%, #000 84%, transparent);
}

.problem-code-rain span {
  color: rgba(0, 0, 0, 0.46);
  font-weight: 850;
  letter-spacing: 0;
  mix-blend-mode: multiply;
}

.problem-stack .panel-effect,
.solution-stack .panel-effect {
  display: none;
}

.solution-stack {
  overflow: visible;
}

.solution-stack::before {
  display: none;
}

.strategy-section {
  padding-bottom: 3rem;
}

.process-section {
  padding-top: 3.2rem;
}

.work-switch {
  margin-top: 1rem;
}

.footer-copy {
  position: relative;
  text-align: center;
}

.footer-copy h2 {
  margin-right: auto;
  margin-left: auto;
  max-width: 920px;
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  text-align: center;
}

.fanfare-burst {
  position: absolute;
  inset: -2.7rem 1rem auto;
  height: 6rem;
  pointer-events: none;
}

.fanfare-burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 24px;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 50% 120px;
  animation: fanfarePop 2.4s var(--ease) infinite;
}

.fanfare-burst span:nth-child(1) { transform: rotate(-54deg) translateY(-72px); animation-delay: 0s; }
.fanfare-burst span:nth-child(2) { transform: rotate(-30deg) translateY(-84px); animation-delay: 0.16s; }
.fanfare-burst span:nth-child(3) { transform: rotate(-8deg) translateY(-78px); animation-delay: 0.3s; }
.fanfare-burst span:nth-child(4) { transform: rotate(18deg) translateY(-86px); animation-delay: 0.08s; }
.fanfare-burst span:nth-child(5) { transform: rotate(40deg) translateY(-76px); animation-delay: 0.22s; }
.fanfare-burst span:nth-child(6) { transform: rotate(58deg) translateY(-88px); animation-delay: 0.38s; }

.confetti-field {
  position: absolute;
  inset: -3rem 0 auto;
  height: 11rem;
  pointer-events: none;
  overflow: hidden;
}

.confetti-field span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: 3px;
  opacity: 0;
  animation: confettiDrift var(--d) ease-in-out var(--delay) infinite;
}

.confetti-field span:nth-child(1) { --x: 12%; --w: 7px; --h: 14px; --c: #1d1cfe; --d: 3.1s; --delay: 0s; }
.confetti-field span:nth-child(2) { --x: 20%; --w: 6px; --h: 10px; --c: #111111; --d: 3.8s; --delay: 0.35s; }
.confetti-field span:nth-child(3) { --x: 29%; --w: 8px; --h: 8px; --c: #ffcf5a; --d: 3.4s; --delay: 0.75s; }
.confetti-field span:nth-child(4) { --x: 38%; --w: 5px; --h: 13px; --c: #1d1cfe; --d: 3.7s; --delay: 0.2s; }
.confetti-field span:nth-child(5) { --x: 47%; --w: 7px; --h: 12px; --c: #ff7aa8; --d: 3.2s; --delay: 0.55s; }
.confetti-field span:nth-child(6) { --x: 55%; --w: 6px; --h: 10px; --c: #111111; --d: 3.9s; --delay: 0.05s; }
.confetti-field span:nth-child(7) { --x: 63%; --w: 8px; --h: 14px; --c: #1d1cfe; --d: 3.5s; --delay: 0.48s; }
.confetti-field span:nth-child(8) { --x: 72%; --w: 5px; --h: 12px; --c: #ffcf5a; --d: 3.3s; --delay: 0.85s; }
.confetti-field span:nth-child(9) { --x: 80%; --w: 7px; --h: 9px; --c: #ff7aa8; --d: 3.6s; --delay: 0.18s; }
.confetti-field span:nth-child(10) { --x: 87%; --w: 6px; --h: 14px; --c: #1d1cfe; --d: 3.9s; --delay: 0.62s; }
.confetti-field span:nth-child(11) { --x: 34%; --w: 5px; --h: 10px; --c: #111111; --d: 4s; --delay: 1.05s; }
.confetti-field span:nth-child(12) { --x: 68%; --w: 8px; --h: 8px; --c: #1d1cfe; --d: 3.4s; --delay: 1.1s; }

.case-card figcaption {
  display: none;
}

.case-card figure {
  aspect-ratio: 16 / 9;
  height: auto;
  background: #f5f7fa;
}

.case-card img,
.case-list-item img,
.case-article-image img {
  object-fit: contain;
  background: #f5f7fa;
}

.case-article {
  padding-top: 4.2rem;
}

.case-article-hero {
  max-width: 1040px;
}

.case-article-hero > p {
  margin-bottom: 3.2rem;
  font-size: 0.95rem;
}

.case-article-hero h1 {
  max-width: 980px;
  font-size: clamp(2.35rem, 4.4vw, 4.35rem);
  line-height: 1.12;
}

.case-subtitle {
  max-width: 780px;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.65vw, 1.38rem);
  line-height: 1.42;
}

.case-author,
.case-meta {
  display: none;
}

.case-article-image {
  max-width: 1040px;
  height: auto;
  margin-top: 2.8rem;
}

.case-article-image img {
  aspect-ratio: 16 / 9;
  height: auto;
}

.case-article-body {
  max-width: 920px;
  padding-top: 3.4rem;
}

.case-article-body .lead {
  max-width: 820px;
  margin-bottom: 1.8rem;
  font-size: clamp(1.14rem, 1.5vw, 1.42rem);
  line-height: 1.72;
}

.case-article-body h4 {
  margin: 2.7rem 0 1.25rem;
  font-size: clamp(1.42rem, 2.2vw, 2.15rem);
}

.case-article-body p,
.case-article-body li {
  font-size: clamp(1.02rem, 1.32vw, 1.26rem);
  line-height: 1.82;
}

.case-article-body p {
  margin-bottom: 1.55rem;
}

.case-article-body blockquote {
  margin: 2.4rem 0;
  padding: 1.7rem 0.8rem;
  font-size: clamp(1.18rem, 1.75vw, 1.55rem);
}

.article-more {
  display: flex;
  justify-content: center;
  margin-top: 4.2rem;
}

.article-more a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95rem;
  color: #ffffff;
  background: #1f2024;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
}

.case-study-button {
  min-height: 36px;
  padding: 0 0.82rem;
  font-size: 0.84rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

@media (max-width: 820px) {
  .case-article {
    padding-top: 3.4rem;
  }

  .case-article-hero h1 {
    font-size: clamp(2rem, 8.6vw, 2.95rem);
  }

  .case-subtitle {
    margin-top: 0.75rem;
    font-size: 1.06rem;
  }

  .case-article-image {
    margin-top: 2rem;
  }

  .case-article-body {
    padding-top: 2.45rem;
  }

  .case-article-body .lead,
  .case-article-body p,
  .case-article-body li {
    font-size: 1.03rem;
    line-height: 1.76;
  }

  .article-more {
    margin-top: 3rem;
  }
}

@keyframes fanfarePop {
  0%,
  46% {
    opacity: 0;
    scale: 0.45;
  }
  58% {
    opacity: 0.95;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.25;
  }
}

@keyframes confettiDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) rotate(0deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(24px, 150px, 0) rotate(240deg);
  }
}

@media (max-width: 820px) {
  .hero-eyebrow {
    font-size: 1.24rem;
  }

  .problem-code-rain {
    inset: -0.5rem -0.7rem 0;
    opacity: 0.34;
  }

  .process-section {
    padding-top: 2.5rem;
  }

  .fanfare-burst {
    inset: -2.2rem 0 auto;
    transform: scale(0.82);
  }
}

/* Hard removal of circular hero background layers. */
.hero {
  background: linear-gradient(180deg, #070818 0%, #11138a 15%, #1d1cfe 38%, #1d1cfe 78%, #eef2ff 94%, #ffffff 100%) !important;
}

.hero::before,
.hero::after,
.ambient-field .orb {
  display: none !important;
  content: none !important;
}

.ambient-field .line {
  opacity: 0.18;
}

/* Process comparison console */
.work-switch {
  grid-template-columns: minmax(210px, 0.3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin-top: 1.3rem;
}

.work-panel {
  min-height: 590px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
    rgba(7, 8, 24, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.comparison-step {
  align-content: start;
  gap: 1rem;
  padding: clamp(1rem, 2.1vw, 1.35rem);
  overflow-y: auto;
  pointer-events: none;
  scrollbar-width: thin;
}

.comparison-step.is-active {
  z-index: 2;
  pointer-events: auto;
}

.comparison-step::-webkit-scrollbar {
  width: 8px;
}

.comparison-step::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.comparison-step .work-step-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  min-height: auto;
  padding: 0.4rem 0.2rem 0.1rem;
}

.comparison-step .work-step-head span {
  position: static;
  inset: auto;
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 0.45rem 0.68rem;
  color: rgba(245, 247, 250, 0.88);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.comparison-step .work-step-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.08;
}

.compare-shell {
  display: grid;
  gap: 0.9rem;
}

.compare-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  padding: 0.38rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.compare-button {
  position: relative;
  min-height: 44px;
  overflow: hidden;
  color: rgba(245, 247, 250, 0.76);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color 220ms var(--ease),
    background 220ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 220ms var(--ease);
}

.compare-button:hover {
  transform: translateY(-1px);
}

.compare-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.compare-button.is-active {
  color: #0d1028;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.compare-button.brand-choice:not(.is-active) {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 32px rgba(255, 255, 255, 0.12);
}

.compare-button.brand-choice::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -40%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: rotate(18deg) translateX(-120%);
  animation: compareShine 2.8s var(--ease) infinite;
}

.compare-button.brand-choice.is-active::after {
  opacity: 0.55;
}

.compare-content {
  display: none;
}

.compare-content.is-active {
  display: grid;
  gap: 0.85rem;
  animation: compareReveal 360ms var(--ease) both;
}

.compare-lead {
  margin: 0;
  color: rgba(245, 247, 250, 0.9);
  font-size: clamp(1.05rem, 2vw, 1.34rem);
  font-weight: 760;
  line-height: 1.52;
}

.compare-list {
  display: grid;
  gap: 0.46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-list li {
  position: relative;
  display: grid;
  min-height: 42px;
  align-items: center;
  padding: 0.72rem 0.86rem 0.72rem 2.25rem;
  color: rgba(245, 247, 250, 0.86);
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  line-height: 1.45;
}

.compare-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 0.54rem;
  height: 0.54rem;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
}

.compare-problem {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.1rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 42%),
    rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}

.compare-problem span {
  position: static;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare-problem h4 {
  margin: 0;
  font-size: clamp(1.18rem, 2.4vw, 1.65rem);
  font-weight: 950;
  line-height: 1.18;
}

.compare-problem p {
  margin: 0;
  color: rgba(245, 247, 250, 0.82);
  font-size: clamp(0.98rem, 1.55vw, 1.08rem);
  line-height: 1.72;
}

.brand-solution {
  background:
    linear-gradient(135deg, rgba(29, 28, 254, 0.78), rgba(12, 14, 40, 0.88)),
    rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2);
}

.compare-shell.is-placeholder .compare-content {
  min-height: 260px;
  align-content: center;
}

@keyframes compareShine {
  0% {
    transform: rotate(18deg) translateX(-130%);
  }
  46%,
  100% {
    transform: rotate(18deg) translateX(440%);
  }
}

@keyframes compareReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .work-switch {
    grid-template-columns: 1fr;
    width: min(100% - 1.2rem, 640px);
    gap: 0.85rem;
  }

  .work-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .work-panel {
    min-height: 650px;
    border-radius: 22px;
  }

  .comparison-step .work-step-head {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .compare-toggle {
    border-radius: 20px;
  }

  .compare-button {
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  .work-tabs {
    grid-template-columns: 1fr;
  }

  .work-panel {
    min-height: 690px;
  }

  .comparison-step {
    padding: 0.9rem;
  }

  .compare-list li {
    padding: 0.68rem 0.72rem 0.68rem 2rem;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-button.brand-choice::after,
  .compare-content.is-active {
    animation: none;
  }
}

/* Process guide board - user reference layout */
.work-switch {
  grid-template-columns: minmax(190px, 0.22fr) minmax(0, 1fr);
  width: min(1240px, calc(100% - 2rem));
  gap: 1.1rem;
}

.work-panel {
  min-height: 740px;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
}

.comparison-step {
  gap: 1.1rem;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  color: #000000;
}

.comparison-step .work-step-head {
  display: block;
  padding: 0;
  text-align: center;
}

.comparison-step .work-step-head span {
  display: none;
}

.comparison-step .work-step-head h3 {
  color: #090909;
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: 0;
}

.compare-shell {
  gap: 1.15rem;
}

.compare-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.45rem);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.compare-button {
  min-height: clamp(66px, 8vw, 112px);
  color: #000000;
  background: #ffffff;
  border: 4px solid #000000;
  border-radius: 18px;
  font-size: clamp(2rem, 5.2vw, 4.1rem);
  font-weight: 480;
  letter-spacing: 0;
  box-shadow: none;
}

.compare-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
}

.compare-button.is-active {
  color: #000000;
  background: #ffffff;
  box-shadow: none;
}

.compare-button.brand-choice,
.compare-button.brand-choice:not(.is-active),
.compare-button.brand-choice.is-active {
  color: #ffffff;
  background:
    linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, 0.4) 44%, transparent 56% 100%),
    #1d1cfe;
  background-size: 260% 100%, auto;
  border-color: #1d1cfe;
  box-shadow: 0 18px 34px rgba(29, 28, 254, 0.22);
  animation: brandButtonGlow 2.9s var(--ease) infinite;
}

.compare-button.brand-choice::after {
  display: none;
}

.compare-content.is-active {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  animation: compareBoardReveal 280ms var(--ease) both;
}

.compare-lead {
  margin: 0;
  padding: clamp(1.15rem, 2.3vw, 1.8rem) clamp(1.35rem, 3vw, 3.5rem) 0.35rem;
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  font-size: clamp(1.02rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.42;
}

.compare-list {
  gap: 0.14rem;
  min-height: 178px;
  margin: 0;
  padding: 0.1rem clamp(1.35rem, 3vw, 3.5rem) clamp(1.35rem, 2.4vw, 1.9rem);
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  list-style: disc;
  list-style-position: inside;
}

.compare-list li {
  display: list-item;
  min-height: 0;
  padding: 0;
  color: #000000;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(0.98rem, 1.7vw, 1.38rem);
  line-height: 1.42;
}

.compare-list li::before {
  display: none;
}

.compare-problem {
  position: relative;
  gap: 1.05rem;
  margin-top: 2.15rem;
  padding: clamp(1.15rem, 2.2vw, 2rem) clamp(1.35rem, 3vw, 3.5rem);
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 18px;
  box-shadow: none;
}

.compare-problem::before {
  content: "";
  position: absolute;
  top: -2.65rem;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 2.2rem solid transparent;
  border-left: 2.2rem solid transparent;
  border-top: 2.45rem solid #000000;
  transform: translateX(-50%);
}

.compare-problem::after {
  content: "";
  position: absolute;
  top: -4.95rem;
  left: 50%;
  width: 3.45rem;
  height: 3rem;
  background: #000000;
  transform: translateX(-50%);
}

.compare-problem span {
  color: #000000;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.compare-problem h4 {
  color: #000000;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 520;
  line-height: 1.45;
}

.compare-problem p {
  max-width: 980px;
  color: #000000;
  font-size: clamp(0.98rem, 1.65vw, 1.28rem);
  line-height: 1.64;
}

.brand-solution {
  background: #f7f8ff;
  border-color: #1d1cfe;
}

.brand-solution::before {
  border-top-color: #1d1cfe;
}

.brand-solution::after {
  background: #1d1cfe;
}

.brand-solution span,
.brand-solution h4,
.brand-solution p {
  color: #090909;
}

.compare-shell.is-placeholder .compare-content {
  min-height: auto;
  align-content: stretch;
}

@keyframes brandButtonGlow {
  0% {
    background-position: 180% 0, 0 0;
  }
  52%,
  100% {
    background-position: -120% 0, 0 0;
  }
}

@keyframes compareBoardReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .work-switch {
    grid-template-columns: 1fr;
    width: min(100% - 1rem, 680px);
  }

  .work-panel {
    min-height: 720px;
  }

  .comparison-step .work-step-head h3 {
    font-size: clamp(1.9rem, 8.5vw, 3.2rem);
  }

  .compare-button {
    min-height: 64px;
    border-width: 3px;
    border-radius: 16px;
    font-size: clamp(1.55rem, 8vw, 2.6rem);
  }

  .compare-lead,
  .compare-list,
  .compare-problem {
    border-width: 2.5px;
  }
}

@media (max-width: 520px) {
  .work-panel {
    min-height: 760px;
    border-radius: 14px;
  }

  .comparison-step {
    padding: 0.85rem;
  }

  .compare-toggle {
    gap: 0.5rem;
  }

  .compare-button {
    min-height: 58px;
    font-size: clamp(1.25rem, 7vw, 1.85rem);
    border-radius: 14px;
  }

  .compare-list {
    min-height: 178px;
    list-style-position: outside;
    padding-left: 2.25rem;
  }

  .compare-problem {
    margin-top: 1.9rem;
  }

  .compare-problem::before {
    top: -2.25rem;
    border-right-width: 1.55rem;
    border-left-width: 1.55rem;
    border-top-width: 1.9rem;
  }

  .compare-problem::after {
    top: -4rem;
    width: 2.4rem;
    height: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-button.brand-choice,
  .compare-content.is-active {
    animation: none;
  }
}

/* Process flow v2: stacked, non-clickable steps with per-step comparison controls */
.process-section {
  padding: 4.2rem 0 5.6rem;
  background: linear-gradient(180deg, var(--blue) 0 300px, #ffffff 300px 100%);
}

.process-flow {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  width: min(1120px, calc(100% - 2rem));
  margin-top: clamp(2rem, 5vw, 4.2rem);
  color: #101010;
}

.process-flow .comparison-step {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 2.2vw, 1.55rem);
  overflow: visible;
  color: #101010;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 255, 0.98)),
    #ffffff;
  border: 1px solid rgba(9, 9, 20, 0.08);
  border-radius: 28px;
  box-shadow:
    0 26px 80px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: auto;
  transform: none;
  opacity: 1;
  backdrop-filter: none;
}

.process-flow .comparison-step.is-muted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 249, 253, 0.94)),
    #ffffff;
}

.process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 0%, rgba(29, 28, 254, 0.1), transparent 32%),
    radial-gradient(circle at 96% 18%, rgba(186, 255, 105, 0.18), transparent 28%);
  opacity: 0.82;
}

.process-card > * {
  position: relative;
  z-index: 1;
}

.process-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  padding: clamp(0.4rem, 1vw, 0.75rem) clamp(0.2rem, 1vw, 0.7rem) 0;
}

.process-card-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.48rem 0.8rem;
  color: #1d1cfe;
  background: rgba(29, 28, 254, 0.08);
  border: 1px solid rgba(29, 28, 254, 0.18);
  border-radius: 999px;
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.process-card-head h3 {
  margin: 0;
  color: #111111;
  font-size: clamp(2rem, 4.8vw, 4.3rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: 0;
}

.process-card-body {
  display: grid;
}

.process-flow .compare-shell {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.process-flow .compare-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.6vw, 1rem);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.process-flow .compare-button {
  min-height: clamp(58px, 7vw, 86px);
  color: #151515;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 22px;
  font-size: clamp(1.28rem, 3.4vw, 2.8rem);
  font-weight: 720;
  letter-spacing: 0;
  box-shadow:
    0 12px 34px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.process-flow .compare-button:hover {
  border-color: rgba(29, 28, 254, 0.35);
  transform: translateY(-2px);
  box-shadow:
    0 20px 44px rgba(17, 24, 39, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.process-flow .compare-button.is-active {
  color: #ffffff;
  background: #111111;
  border-color: #111111;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.process-flow .compare-button.brand-choice,
.process-flow .compare-button.brand-choice:not(.is-active) {
  color: #ffffff;
  background:
    linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.46) 45%, transparent 58% 100%),
    #1d1cfe;
  background-size: 260% 100%, auto;
  border-color: rgba(29, 28, 254, 0.5);
  box-shadow:
    0 18px 44px rgba(29, 28, 254, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation: brandButtonGlow 3s var(--ease) infinite;
}

.process-flow .compare-button.brand-choice.is-active {
  color: #ffffff;
  background:
    linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.38) 45%, transparent 58% 100%),
    #1d1cfe;
  border-color: #1d1cfe;
}

.process-flow .compare-button.brand-choice::after {
  display: none;
}

.process-flow .compare-content {
  display: none;
}

.process-flow .compare-content.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  gap: clamp(0.8rem, 2vw, 1.2rem);
  align-items: stretch;
  animation: processPanelIn 280ms var(--ease) both;
}

.process-flow .compare-lead {
  display: grid;
  align-content: start;
  min-height: 100%;
  margin: 0;
  padding: clamp(1.15rem, 2.1vw, 1.65rem);
  color: #111111;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px 22px 8px 8px;
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  font-weight: 820;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.process-flow .compare-list {
  grid-column: 1;
  min-height: auto;
  margin-top: calc(clamp(0.8rem, 2vw, 1.2rem) * -1);
  padding: 0 clamp(1.15rem, 2.1vw, 1.65rem) clamp(1.15rem, 2.1vw, 1.65rem);
  color: #111111;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-top: 0;
  border-radius: 8px 8px 22px 22px;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.06);
  list-style: none;
}

.process-flow .compare-list li {
  position: relative;
  display: block;
  padding: 0.52rem 0 0.52rem 1.25rem;
  color: #171717;
  background: transparent;
  border: 0;
  font-size: clamp(0.92rem, 1.25vw, 1.06rem);
  line-height: 1.42;
}

.process-flow .compare-list li + li {
  border-top: 1px solid rgba(17, 24, 39, 0.07);
}

.process-flow .compare-list li::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  background: #1d1cfe;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
}

.process-flow .compare-problem {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-content: end;
  gap: 0.8rem;
  min-height: 100%;
  margin: 0;
  padding: clamp(1.15rem, 2.1vw, 1.8rem);
  color: #111111;
  background:
    linear-gradient(180deg, rgba(246, 247, 250, 0.82), rgba(255, 255, 255, 0.98)),
    #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 24px;
  box-shadow:
    0 18px 50px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.process-flow .compare-problem::before,
.process-flow .compare-problem::after {
  display: none;
}

.process-flow .compare-problem span {
  color: #1d1cfe;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: none;
}

.process-flow .compare-problem h4 {
  margin: 0;
  color: #111111;
  font-size: clamp(1.24rem, 2.25vw, 2.05rem);
  font-weight: 820;
  line-height: 1.16;
}

.process-flow .compare-problem p {
  margin: 0;
  color: rgba(17, 17, 17, 0.72);
  font-size: clamp(0.95rem, 1.24vw, 1.06rem);
  line-height: 1.68;
}

.process-flow .brand-solution {
  color: #ffffff;
  background:
    radial-gradient(circle at 80% 0%, rgba(186, 255, 105, 0.32), transparent 32%),
    linear-gradient(145deg, #1d1cfe, #10108d 72%);
  border-color: rgba(29, 28, 254, 0.28);
  box-shadow: 0 22px 56px rgba(29, 28, 254, 0.28);
}

.process-flow .brand-solution span {
  color: rgba(255, 255, 255, 0.7);
}

.process-flow .brand-solution h4,
.process-flow .brand-solution p {
  color: #ffffff;
}

.process-flow .brand-solution p {
  color: rgba(255, 255, 255, 0.78);
}

.process-flow .compare-shell.is-placeholder .compare-content {
  min-height: auto;
}

@keyframes processPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .process-section {
    background: linear-gradient(180deg, var(--blue) 0 260px, #ffffff 260px 100%);
  }

  .process-flow {
    width: min(100% - 1rem, 680px);
    margin-top: 2rem;
  }

  .process-flow .comparison-step {
    border-radius: 22px;
  }

  .process-card-head {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .process-card-head h3 {
    font-size: clamp(2rem, 11vw, 3.3rem);
  }

  .process-flow .compare-content.is-active {
    grid-template-columns: 1fr;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-problem {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .process-section {
    padding-bottom: 4rem;
  }

  .process-flow .comparison-step {
    padding: 0.8rem;
    border-radius: 20px;
  }

  .process-flow .compare-toggle {
    gap: 0.5rem;
  }

  .process-flow .compare-button {
    min-height: 54px;
    border-radius: 16px;
    font-size: clamp(1.15rem, 7vw, 1.65rem);
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-problem {
    border-radius: 18px;
  }

  .process-flow .compare-list {
    margin-top: 0;
    border-top: 1px solid rgba(17, 24, 39, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-flow .compare-button.brand-choice,
  .process-flow .compare-content.is-active {
    animation: none;
  }
}

/* Final process simplification */
.process-section,
.process-section.section-blue {
  padding: 4.4rem 0 5.2rem;
  background: #ffffff;
}

.process-intro .section-kicker {
  color: rgba(29, 28, 254, 0.58);
}

.process-intro .section-title,
.process-intro .section-title span {
  color: #1d1cfe;
}

.process-intro p {
  color: #111111;
}

.process-intro p strong {
  color: #111111;
}

.process-flow {
  gap: clamp(1.35rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.8rem);
}

.process-solution-label {
  margin: 0 0 0.2rem;
  color: #111111;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 430;
  text-align: center;
  letter-spacing: 0;
}

.process-flow .comparison-step,
.process-flow .comparison-step.is-muted {
  gap: clamp(0.75rem, 1.8vw, 1.1rem);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.process-card::before {
  display: none;
}

.process-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.62rem;
  padding: 0;
}

.process-card-head span {
  min-height: auto;
  padding: 0;
  color: #1d1cfe;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(1rem, 1.7vw, 1.32rem);
  font-weight: 760;
}

.process-card-head h3 {
  color: #111111;
  font-size: clamp(1.12rem, 2vw, 1.6rem);
  font-weight: 680;
  line-height: 1.2;
}

.process-flow .compare-shell {
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.process-flow .compare-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.process-flow .compare-button {
  min-height: auto;
  padding: 0.54rem 0.9rem;
  color: #111111;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 999px;
  font-size: clamp(0.9rem, 1.25vw, 1rem);
  font-weight: 430;
  box-shadow: none;
}

.process-flow .compare-button:hover {
  border-color: rgba(29, 28, 254, 0.42);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
}

.process-flow .compare-button.is-active {
  color: #111111;
  background: #ffffff;
  border-color: #111111;
  box-shadow: none;
}

.process-flow .compare-button.brand-choice,
.process-flow .compare-button.brand-choice:not(.is-active) {
  color: #1d1cfe;
  background: #ffffff;
  border-color: rgba(29, 28, 254, 0.3);
  box-shadow: none;
  animation: none;
}

.process-flow .compare-button.brand-choice.is-active {
  color: #ffffff;
  background: #1d1cfe;
  border-color: #1d1cfe;
  box-shadow: 0 10px 24px rgba(29, 28, 254, 0.18);
}

.process-flow .compare-content.is-active {
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, 0.9fr);
  gap: clamp(0.65rem, 1.6vw, 1rem);
}

.process-flow .compare-lead {
  padding: clamp(0.95rem, 1.7vw, 1.25rem);
  color: #111111;
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.12);
  border-radius: 18px 18px 6px 6px;
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
  font-weight: 620;
}

.process-flow .compare-list {
  margin-top: calc(clamp(0.65rem, 1.6vw, 1rem) * -1);
  padding: 0 clamp(0.95rem, 1.7vw, 1.25rem) clamp(0.95rem, 1.7vw, 1.25rem);
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.12);
  border-radius: 6px 6px 18px 18px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.04);
}

.process-flow .compare-list li {
  color: #111111;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}

.process-flow .compare-problem {
  gap: 0.65rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  color: #111111;
  background: #f7f8ff;
  border-color: rgba(29, 28, 254, 0.14);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
}

.process-flow .compare-problem span {
  color: #1d1cfe;
  font-size: clamp(0.98rem, 1.3vw, 1.14rem);
  font-weight: 760;
}

.process-flow .compare-problem h4 {
  color: #111111;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  font-weight: 640;
}

.process-flow .compare-problem p {
  color: rgba(17, 17, 17, 0.76);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
}

.process-flow .brand-solution {
  color: #111111;
  background: #f7f8ff;
  border-color: rgba(29, 28, 254, 0.18);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
}

.process-flow .brand-solution span,
.process-flow .brand-solution h4,
.process-flow .brand-solution p {
  color: #111111;
}

.process-flow .brand-solution span {
  color: #1d1cfe;
}

.process-flow .brand-solution p {
  color: rgba(17, 17, 17, 0.76);
}

@media (max-width: 900px) {
  .process-section,
  .process-section.section-blue {
    background: #ffffff;
  }

  .process-card-head {
    flex-direction: row;
    align-items: baseline;
  }

  .process-card-head h3 {
    font-size: clamp(1.08rem, 5vw, 1.38rem);
  }

  .process-flow .compare-content.is-active {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .process-flow .comparison-step,
  .process-flow .comparison-step.is-muted {
    padding: 0;
  }

  .process-flow .compare-button {
    padding: 0.5rem 0.78rem;
  }

  .process-flow .compare-list {
    margin-top: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.12);
  }
}

/* Detail pass: smoother section rhythm and process typography */
.hero {
  background: linear-gradient(
    180deg,
    #070818 0%,
    #101281 12%,
    #1d1cfe 32%,
    #1d1cfe 70%,
    #7777ff 84%,
    #edf2ff 94%,
    #ffffff 100%
  ) !important;
}

.problem-section {
  padding-top: clamp(3.2rem, 6vw, 5rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.2rem);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 82%, #f9fbff 100%);
}

.pain-layout {
  padding-top: clamp(1.1rem, 2.2vw, 1.9rem);
  padding-bottom: clamp(1rem, 2.2vw, 1.8rem);
}

.problem-stack .motion-panel p,
.problem-stack .motion-panel.is-active p {
  font-size: calc(clamp(0.92rem, 1.3vw, 1.02rem) + 0.125rem);
}

.strategy-section {
  padding-top: clamp(1.2rem, 2.6vw, 2rem);
  background: #ffffff;
}

.video-lab,
.video-lab.reveal-float,
.video-track,
.phone-card,
.real-video-scene,
.video-scene {
  background: transparent !important;
}

.phone-card {
  box-shadow: none !important;
}

.process-section,
.process-section.section-blue {
  padding-top: clamp(2.6rem, 4.4vw, 3.6rem);
}

.process-flow {
  margin-top: clamp(1rem, 2.2vw, 1.8rem);
}

.process-solution-label {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin: 0 0 0.4rem;
  color: #111111;
  font-size: clamp(1.3rem, 2.35vw, 1.86rem);
  font-weight: 430;
  line-height: 1.08;
  text-align: center;
}

.process-solution-label img {
  width: clamp(68px, 9vw, 112px);
  height: auto;
  display: block;
  object-fit: contain;
}

.process-card-head {
  justify-content: center;
  align-items: baseline;
  text-align: center;
}

.process-card-head span,
.process-card-head h3 {
  font-size: clamp(1.08rem, 2vw, 1.48rem);
  line-height: 1.2;
}

.process-card-head span {
  font-weight: 680;
}

.process-card-head h3 {
  font-weight: 620;
}

.process-flow .compare-toggle {
  justify-content: center;
}

.process-flow .compare-button {
  padding: 0.46rem 0.82rem;
  font-weight: 400;
}

.process-flow .compare-button.is-active:not(.brand-choice) {
  color: #ffffff;
  background: #111111;
  border-color: #111111;
}

.process-flow .compare-button:not(.is-active):not(.brand-choice) {
  color: #111111;
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.16);
}

.process-flow .compare-problem span {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
}

.case-study-button {
  color: #ffffff !important;
  background: #1d1cfe !important;
  border-color: #1d1cfe !important;
  box-shadow: 0 18px 38px rgba(29, 28, 254, 0.28) !important;
}

.case-study-button:hover,
.case-study-button:focus-visible {
  color: #ffffff !important;
  background: #1010d8 !important;
  border-color: #1010d8 !important;
}

@media (max-width: 900px) {
  .problem-section {
    padding-top: 3rem;
  }

  .process-card-head {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .process-card-head {
    flex-wrap: wrap;
    gap: 0.38rem;
  }

  .process-solution-label {
    font-size: clamp(1.22rem, 6vw, 1.55rem);
  }
}

/* Final cleanup: pure white media/process surfaces and animated result states */
.hero {
  background: linear-gradient(
    180deg,
    #070818 0%,
    #101281 12%,
    #1d1cfe 32%,
    #1d1cfe 76%,
    #ffffff 100%
  ) !important;
}

.hero::after {
  height: 26vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 88%, #ffffff 100%) !important;
}

.problem-section,
.strategy-section,
.video-lab,
.video-lab::before,
.video-lab::after,
.video-track,
.video-track::before,
.video-track::after,
.phone-card,
.phone-card::before,
.phone-card::after,
.video-scene,
.video-scene::before,
.video-scene::after,
.real-video-scene,
.real-video-scene::before,
.real-video-scene::after {
  background: transparent !important;
  box-shadow: none !important;
}

.problem-section,
.strategy-section {
  background: #ffffff !important;
}

.phone-card,
.phone-card:nth-child(1),
.phone-card:nth-child(2),
.phone-card:nth-child(3),
.phone-card:nth-child(4),
.phone-card:nth-child(5) {
  filter: none !important;
}

.process-solution-label {
  font-size: clamp(1.425rem, 2.55vw, 2.11rem);
}

.process-card-head {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  text-align: center;
}

.process-card-head span,
.process-card-head h3 {
  display: block;
}

.process-card-head span {
  font-size: clamp(1.2675rem, 2.35vw, 1.6675rem);
}

.process-card-head h3 {
  font-size: clamp(1.08rem, 1.85vw, 1.42rem);
}

.process-flow .brand-solution {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background: #1d1cfe !important;
  border-color: #1d1cfe;
  box-shadow: 0 18px 42px rgba(29, 28, 254, 0.22);
}

.process-flow .brand-solution span,
.process-flow .brand-solution h4,
.process-flow .brand-solution p {
  color: #ffffff;
}

.process-flow .brand-solution p {
  color: rgba(255, 255, 255, 0.82);
}

.process-flow .compare-problem:not(.brand-solution) {
  position: relative;
  overflow: hidden;
}

.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.process-flow .compare-problem:not(.brand-solution)::before {
  top: 14%;
  right: 12%;
  width: 2px;
  height: 58px;
  background: #1d1cfe;
  clip-path: polygon(44% 0, 100% 0, 62% 38%, 100% 38%, 24% 100%, 46% 52%, 0 52%);
  filter: drop-shadow(0 0 10px rgba(29, 28, 254, 0.62));
  transform: rotate(18deg);
  animation: lightningFlicker 3.8s ease-in-out infinite;
}

.process-flow .compare-problem:not(.brand-solution)::after {
  inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(29, 28, 254, 0.16), transparent 28%);
  animation: lightningWash 3.8s ease-in-out infinite;
}

.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
}

.process-flow .brand-solution::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px) 12% 22% / 64px 64px,
    radial-gradient(circle, rgba(186, 255, 105, 0.72) 0 1.5px, transparent 3px) 72% 28% / 52px 52px,
    radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 1px, transparent 2.5px) 38% 82% / 44px 44px;
  animation: starDrift 7s linear infinite;
}

.process-flow .brand-solution::after {
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-120%);
  animation: solutionSheen 4.8s var(--ease) infinite;
}

.process-flow .brand-solution > * {
  position: relative;
  z-index: 1;
}

@keyframes lightningFlicker {
  0%,
  57%,
  64%,
  100% {
    opacity: 0;
    transform: rotate(18deg) scaleY(0.76);
  }
  58%,
  60% {
    opacity: 1;
    transform: rotate(18deg) scaleY(1);
  }
  62% {
    opacity: 0.5;
  }
}

@keyframes lightningWash {
  0%,
  57%,
  64%,
  100% {
    opacity: 0;
  }
  59% {
    opacity: 1;
  }
}

@keyframes starDrift {
  from {
    background-position: 12% 22%, 72% 28%, 38% 82%;
  }
  to {
    background-position: 36% 6%, 48% 52%, 62% 58%;
  }
}

@keyframes solutionSheen {
  0%,
  58% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@media (max-width: 900px) {
  .process-card-head {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-flow .compare-problem:not(.brand-solution)::before,
  .process-flow .compare-problem:not(.brand-solution)::after,
  .process-flow .brand-solution::before,
  .process-flow .brand-solution::after {
    animation: none;
  }
}

/* Case list compact header and final paragraph alignment */
.case-list-hero {
  padding: clamp(1.2rem, 2.2vw, 2rem) 0 0 !important;
  background: #ffffff !important;
  border-bottom: 0 !important;
}

.case-list-hero .section-shell {
  padding: 0 2rem !important;
}

.case-list-hero p {
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.58) !important;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem) !important;
  font-weight: 650;
}

.case-list-hero a,
.case-list-hero span {
  color: inherit !important;
}

.case-list-hero h1,
.case-list-hero > div > span {
  display: none !important;
}

.case-list-section {
  padding-top: clamp(1.6rem, 3vw, 2.8rem) !important;
}

.process-intro p,
.process-flow .compare-lead {
  text-align: center !important;
}

@media (max-width: 820px) {
  .case-list-hero {
    padding-top: 1rem !important;
  }

  .case-list-hero .section-shell {
    padding: 0 1.25rem !important;
  }

  .case-list-section {
    padding-top: 1.45rem !important;
  }
}

/* Refined affordance for the 공공공삼 comparison buttons */
.process-flow .compare-button.brand-choice:not(.is-active) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(29, 28, 254, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(29, 28, 254, 0.04),
    0 10px 24px rgba(29, 28, 254, 0.08) !important;
}

.process-flow .compare-button.brand-choice:not(.is-active)::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--glint-x, 18%) 50%, rgba(29, 28, 254, 0.2), transparent 28%),
    linear-gradient(110deg, transparent 0 32%, rgba(29, 28, 254, 0.16) 46%, transparent 60% 100%);
  opacity: 0;
  transform: translateX(-38%);
  animation: brandChoiceGlint 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.process-flow .compare-button.brand-choice:not(.is-active)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.56rem;
  display: block !important;
  width: 0.38rem;
  height: 0.38rem;
  pointer-events: none;
  background: #1d1cfe;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(29, 28, 254, 0.24);
  transform: translateY(-50%);
  animation: brandChoicePulse 2.8s ease-out infinite;
}

.process-flow .compare-button.brand-choice:not(.is-active):hover::before,
.process-flow .compare-button.brand-choice:not(.is-active):focus-visible::before {
  opacity: 1;
  animation-duration: 1.8s;
}

.process-flow .compare-button.brand-choice.is-active::before,
.process-flow .compare-button.brand-choice.is-active::after {
  display: none !important;
}

.process-flow .comparison-step:nth-of-type(2) .compare-button.brand-choice:not(.is-active)::before,
.process-flow .comparison-step:nth-of-type(2) .compare-button.brand-choice:not(.is-active)::after {
  animation-delay: 0.45s;
}

.process-flow .comparison-step:nth-of-type(3) .compare-button.brand-choice:not(.is-active)::before,
.process-flow .comparison-step:nth-of-type(3) .compare-button.brand-choice:not(.is-active)::after {
  animation-delay: 0.9s;
}

@keyframes brandChoiceGlint {
  0%,
  62%,
  100% {
    opacity: 0;
    transform: translateX(-42%);
  }
  74% {
    opacity: 1;
  }
  88% {
    opacity: 0;
    transform: translateX(54%);
  }
}

@keyframes brandChoicePulse {
  0%,
  64% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(29, 28, 254, 0.22);
  }
  78% {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(29, 28, 254, 0.08);
  }
  100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(29, 28, 254, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-flow .compare-button.brand-choice:not(.is-active)::before,
  .process-flow .compare-button.brand-choice:not(.is-active)::after {
    animation: none !important;
  }
}

/* Stabilize hero typing so centered Korean lines do not wobble */
.hero-headline {
  display: grid;
  justify-items: center;
  width: 100%;
  text-align: center;
}

.typed-main,
.typed-sub {
  position: relative;
  display: grid !important;
  justify-items: center;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.typed-main::before,
.typed-sub::before {
  content: attr(data-reserve-text);
  grid-area: 1 / 1;
  white-space: pre-line;
  visibility: hidden;
  pointer-events: none;
}

.typed-main,
.typed-sub {
  grid-template: "type" auto / auto;
  white-space: pre-line;
}

.type-live {
  grid-area: type;
  display: block;
  white-space: pre-line;
}

.typed-main:not(.is-typed),
.typed-sub:not(.is-typed) {
  min-width: min(100%, 100%);
}

.typed-main::after,
.typed-sub::after {
  position: absolute;
  right: -0.34em;
  bottom: 0.08em;
  margin-left: 0;
}

@media (max-width: 820px) {
  .typed-main {
    width: min(100%, 15em);
  }

  .typed-sub {
    width: min(100%, 18em);
  }
}

/* Absolute final alignment correction */
.process-flow .compare-problem:not(.brand-solution) {
  background: #f7f8ff !important;
  border-color: rgba(29, 28, 254, 0.14) !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05) !important;
}

.process-flow .compare-problem::before,
.process-flow .compare-problem::after,
.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after,
.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

@media (min-width: 821px) {
  .strategy-head,
  .process-intro,
  .footer-copy {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .strategy-head > div,
  .strategy-head p,
  .process-intro .section-kicker,
  .process-intro .section-title,
  .process-intro p,
  .footer-copy h2,
  .footer-copy p {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .strategy-head p {
    max-width: 820px !important;
  }

  .process-intro p {
    max-width: 760px !important;
  }

  .process-card-head {
    display: grid !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 0.18rem !important;
    text-align: center !important;
  }

  .process-card-head span,
  .process-card-head h3 {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-list li,
  .process-flow .compare-problem,
  .process-flow .compare-problem span,
  .process-flow .compare-problem h4,
  .process-flow .compare-problem p {
    text-align: center !important;
  }
}

/* Final alignment correction */
.process-flow .compare-problem:not(.brand-solution) {
  background: #f7f8ff !important;
  border-color: rgba(29, 28, 254, 0.14) !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05) !important;
}

.process-flow .compare-problem::before,
.process-flow .compare-problem::after,
.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after,
.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

@media (min-width: 821px) {
  .strategy-head,
  .process-intro,
  .footer-copy {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .strategy-head > div,
  .strategy-head p,
  .process-intro .section-kicker,
  .process-intro .section-title,
  .process-intro p,
  .footer-copy h2,
  .footer-copy p {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .strategy-head p {
    max-width: 820px !important;
  }

  .process-intro p {
    max-width: 760px !important;
  }

  .process-card-head {
    display: grid !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 0.18rem !important;
    text-align: center !important;
  }

  .process-card-head span,
  .process-card-head h3 {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-list li,
  .process-flow .compare-problem,
  .process-flow .compare-problem span,
  .process-flow .compare-problem h4,
  .process-flow .compare-problem p {
    text-align: center !important;
  }
}

/* Final requested cleanup: slower engine readability and clean process panels */
.hero-engine strong {
  white-space: pre-line;
}

.hero-engine small {
  color: #c8ff6b;
  text-shadow: 0 0 16px rgba(200, 255, 107, 0.28);
}

.process-flow .compare-problem::before,
.process-flow .compare-problem::after,
.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after,
.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}

@media (min-width: 821px) {
  .process-flow .compare-content.is-active {
    justify-items: center;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-list li,
  .process-flow .compare-problem,
  .process-flow .compare-problem span,
  .process-flow .compare-problem h4,
  .process-flow .compare-problem p {
    text-align: center;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-problem {
    width: min(100%, 680px);
    justify-self: center;
  }

  .process-flow .compare-list li {
    padding-left: 0;
  }

  .process-flow .compare-list li::before {
    display: none;
  }
}

/* Case study and engine final pass */
.case-list-hero {
  color: #1f2024 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.case-list-hero p,
.case-list-hero span {
  color: rgba(0, 0, 0, 0.56) !important;
}

.case-list-hero h1 {
  color: #1f2024;
}

.case-list-section {
  max-width: 1180px;
}

.case-list-item a {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 560px);
  align-items: center;
}

.case-list-item img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: transparent !important;
  border-radius: 10px;
}

.case-article-image {
  width: min(960px, calc(100% - 2rem));
  max-width: 960px;
  padding: 0 !important;
}

.case-article-image img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: transparent !important;
  border-radius: 10px;
}

.case-card figure,
.case-card img {
  background: transparent !important;
}

.hero-engine {
  padding: 0.78rem 0.9rem !important;
  gap: 0.5rem 0.72rem;
}

.hero-engine span {
  font-size: 0.68rem;
}

.hero-engine strong {
  min-height: 2.45rem;
  white-space: pre-line;
}

.hero-engine small {
  min-height: 1.18rem;
  color: #c8ff6b !important;
  text-shadow: 0 0 16px rgba(200, 255, 107, 0.34);
}

.engine-track {
  height: 8px;
}

@media (max-width: 820px) {
  .case-list-hero {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }

  .case-list-section {
    gap: 3.2rem;
  }

  .case-list-item a {
    grid-template-columns: 1fr;
  }

  .case-article-image {
    width: min(100% - 1.4rem, 720px);
  }

  .hero-engine {
    padding: 0.72rem 0.82rem !important;
  }
}

/* Final polish: centered desktop strategy, pure media surface, quieter particles */
.strategy-head {
  justify-items: center;
  text-align: center;
}

.strategy-head > div,
.strategy-head p {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.strategy-head p {
  margin-top: 1rem;
}

.process-intro {
  display: block;
  text-align: center;
}

.process-intro p {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.process-card-head {
  justify-items: center;
  text-align: center;
}

.process-flow .compare-toggle {
  justify-content: center;
}

.process-flow .compare-problem {
  min-height: auto;
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  align-content: start;
}

.video-lab,
.video-lab *,
.video-lab::before,
.video-lab::after,
.video-track,
.video-track::before,
.video-track::after,
.phone-card,
.phone-card::before,
.phone-card::after,
.video-scene,
.video-scene::before,
.video-scene::after,
.real-video-scene,
.real-video-scene::before,
.real-video-scene::after {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.video-lab {
  border: 0 !important;
}

.phone-card {
  border: 0 !important;
  filter: none !important;
}

@media (min-width: 821px) {
  .video-track {
    display: flex;
    gap: 1.1rem;
    justify-content: flex-start;
    padding: 0.25rem 2rem 1rem;
    overflow-x: auto;
  }

  .phone-card,
  .phone-card:nth-child(1),
  .phone-card:nth-child(2),
  .phone-card:nth-child(3),
  .phone-card:nth-child(4),
  .phone-card:nth-child(5),
  .phone-card:nth-child(6),
  .phone-card:nth-child(7),
  .phone-card:nth-child(8) {
    flex: 0 0 clamp(190px, 15.5vw, 238px);
    width: clamp(190px, 15.5vw, 238px);
    transform: none;
  }
}

.process-flow .compare-problem:not(.brand-solution)::before {
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle, rgba(29, 28, 254, 0.34) 0 1px, transparent 2px) 12% 18% / 38px 54px,
    radial-gradient(circle, rgba(29, 28, 254, 0.22) 0 1px, transparent 2px) 76% 8% / 46px 62px,
    radial-gradient(circle, rgba(29, 28, 254, 0.18) 0 1px, transparent 2px) 38% 76% / 42px 58px;
  clip-path: none;
  filter: none;
  transform: none;
  animation: electricMist 8.5s linear infinite;
}

.process-flow .compare-problem:not(.brand-solution)::after {
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(29, 28, 254, 0.06), transparent),
    radial-gradient(circle at 12% 20%, rgba(29, 28, 254, 0.1), transparent 18%),
    radial-gradient(circle at 86% 76%, rgba(29, 28, 254, 0.08), transparent 18%);
  animation: electricGlow 7.8s ease-in-out infinite;
}

.process-flow .brand-solution::before {
  opacity: 0.95;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1.4px, transparent 2.6px) 8% 14% / 34px 46px,
    radial-gradient(circle, rgba(186, 255, 105, 0.75) 0 1.2px, transparent 2.4px) 68% 22% / 38px 52px,
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 1px, transparent 2.2px) 42% 86% / 32px 44px,
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1.1px, transparent 2.3px) 88% 68% / 44px 56px;
  animation: starMist 9s linear infinite;
}

.process-flow .brand-solution::after {
  opacity: 0.56;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle at 76% 70%, rgba(186, 255, 105, 0.18), transparent 20%);
  transform: none;
  animation: starGlow 6.8s ease-in-out infinite;
}

@keyframes electricMist {
  from {
    background-position: 12% 18%, 76% 8%, 38% 76%;
    opacity: 0.22;
  }
  to {
    background-position: 12% 78%, 76% 68%, 38% 136%;
    opacity: 0.42;
  }
}

@keyframes electricGlow {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.42;
  }
}

@keyframes starMist {
  from {
    background-position: 8% 14%, 68% 22%, 42% 86%, 88% 68%;
  }
  to {
    background-position: 20% 74%, 58% 82%, 52% 146%, 78% 128%;
  }
}

@keyframes starGlow {
  0%,
  100% {
    opacity: 0.26;
  }
  50% {
    opacity: 0.72;
  }
}

/* Latest requested flow: stacked result panels and clearer particles */
.hero-engine {
  grid-template-columns: 1fr auto;
}

.hero-engine small {
  grid-column: 1 / -1;
  min-height: 1.45rem;
  color: rgba(245, 247, 250, 0.76);
  font-size: clamp(0.88rem, 1.45vw, 1.02rem);
  font-weight: 560;
  line-height: 1.38;
}

.hero-engine strong {
  min-height: 2.9rem;
}

.process-flow .compare-content.is-active {
  grid-template-columns: 1fr !important;
}

.process-flow .compare-lead,
.process-flow .compare-list,
.process-flow .compare-problem {
  grid-column: auto !important;
  grid-row: auto !important;
}

.process-flow .compare-problem {
  width: min(100%, 680px);
  margin-top: 0.1rem;
}

.process-flow .compare-problem:not(.brand-solution) {
  isolation: isolate;
  color: #111111;
  background: #ffffff !important;
  border-color: rgba(255, 196, 0, 0.36);
}

.process-flow .compare-problem:not(.brand-solution) > * {
  position: relative;
  z-index: 2;
}

.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after {
  z-index: 1;
  opacity: 1;
}

.process-flow .compare-problem:not(.brand-solution)::before {
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle, rgba(255, 207, 58, 0.8) 0 1.2px, transparent 2.4px) 8% 14% / 30px 42px,
    radial-gradient(circle, rgba(255, 226, 91, 0.62) 0 1px, transparent 2.2px) 82% 22% / 34px 46px,
    radial-gradient(circle, rgba(255, 196, 0, 0.46) 0 1px, transparent 2px) 42% 82% / 28px 38px,
    radial-gradient(circle, rgba(255, 226, 91, 0.5) 0 1px, transparent 2px) 18% 72% / 36px 48px;
  clip-path: none;
  filter: none;
  transform: none;
  animation: yellowChargeRain 9s linear infinite;
}

.process-flow .compare-problem:not(.brand-solution)::after {
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 46%, rgba(255, 210, 40, 0.14) 49%, transparent 54% 100%),
    radial-gradient(circle at 18% 24%, rgba(255, 196, 0, 0.14), transparent 18%),
    radial-gradient(circle at 86% 78%, rgba(255, 226, 91, 0.16), transparent 18%);
  animation: yellowChargePulse 6.2s ease-in-out infinite;
}

.process-flow .brand-solution {
  isolation: isolate;
  background: #1d1cfe !important;
}

.process-flow .brand-solution > * {
  position: relative;
  z-index: 2;
}

.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  z-index: 1;
  display: block;
  opacity: 1;
}

.process-flow .brand-solution::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 1.4px, transparent 2.8px) 8% 14% / 28px 42px,
    radial-gradient(circle, rgba(186, 255, 105, 0.84) 0 1.2px, transparent 2.5px) 72% 26% / 34px 48px,
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 2.3px) 42% 86% / 30px 44px,
    radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 1.1px, transparent 2.4px) 88% 68% / 38px 52px,
    radial-gradient(circle, rgba(186, 255, 105, 0.55) 0 1px, transparent 2.2px) 24% 46% / 42px 56px;
  animation: visibleStarRain 8.5s linear infinite;
}

.process-flow .brand-solution::after {
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 76% 70%, rgba(186, 255, 105, 0.22), transparent 20%);
  transform: none;
  animation: visibleStarPulse 5.8s ease-in-out infinite;
}

@keyframes yellowChargeRain {
  from {
    background-position: 8% 14%, 82% 22%, 42% 82%, 18% 72%;
  }
  to {
    background-position: 8% 88%, 82% 96%, 42% 156%, 18% 146%;
  }
}

@keyframes yellowChargePulse {
  0%,
  100% {
    opacity: 0.24;
  }
  50% {
    opacity: 0.58;
  }
}

@keyframes visibleStarRain {
  from {
    background-position: 8% 14%, 72% 26%, 42% 86%, 88% 68%, 24% 46%;
  }
  to {
    background-position: 20% 90%, 62% 102%, 52% 162%, 78% 144%, 34% 122%;
  }
}

@keyframes visibleStarPulse {
  0%,
  100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.78;
  }
}

/* Absolute final alignment correction after legacy particle rules */
.process-flow .compare-problem:not(.brand-solution) {
  background: #f7f8ff !important;
  border-color: rgba(29, 28, 254, 0.14) !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05) !important;
}

.process-flow .compare-problem::before,
.process-flow .compare-problem::after,
.process-flow .compare-problem:not(.brand-solution)::before,
.process-flow .compare-problem:not(.brand-solution)::after,
.process-flow .brand-solution::before,
.process-flow .brand-solution::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

@media (min-width: 821px) {
  .strategy-head,
  .process-intro,
  .footer-copy {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .strategy-head > div,
  .strategy-head p,
  .process-intro .section-kicker,
  .process-intro .section-title,
  .process-intro p,
  .footer-copy h2,
  .footer-copy p {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .strategy-head p {
    max-width: 820px !important;
  }

  .process-intro p {
    max-width: 760px !important;
  }

  .process-card-head {
    display: grid !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 0.18rem !important;
    text-align: center !important;
  }

  .process-card-head span,
  .process-card-head h3 {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .process-flow .compare-lead,
  .process-flow .compare-list,
  .process-flow .compare-list li,
  .process-flow .compare-problem,
  .process-flow .compare-problem span,
  .process-flow .compare-problem h4,
  .process-flow .compare-problem p {
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  .hero-engine strong {
    min-height: 3.4rem;
  }

  .hero-engine small {
    min-height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-flow .compare-problem:not(.brand-solution)::before,
  .process-flow .compare-problem:not(.brand-solution)::after,
  .process-flow .brand-solution::before,
  .process-flow .brand-solution::after {
    animation: none;
  }
}