:root {
  --cx-green: #98ff38;
  --cx-green-soft: #c7ff8f;
  --cx-teal: #89d9d8;
  --cx-paper: #f2f5ed;
  --cx-ink: #10150f;
  --cx-grid: rgba(152, 255, 56, 0.09);
}

.cx-page {
  background:
    radial-gradient(circle at 14% 20%, rgba(152, 255, 56, 0.1), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(137, 217, 216, 0.1), transparent 28rem),
    #080a08;
}

.cx-page .cursor-light {
  background: radial-gradient(circle, rgba(152, 255, 56, 0.12), transparent 68%);
}

.cx-progress span {
  background: linear-gradient(90deg, var(--cx-green), var(--cx-teal), var(--cx-green-soft));
  box-shadow: 0 0 1.2rem rgba(152, 255, 56, 0.78);
}

.cx-page .projects-header {
  background: rgba(8, 10, 8, 0.8);
}

.cx-page .case-lazy-section {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.cx-hero {
  min-height: 100svh;
  padding-top: clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 76% 43%, rgba(152, 255, 56, 0.1), transparent 25rem),
    linear-gradient(145deg, rgba(152, 255, 56, 0.025), transparent 45%);
}

.cx-hero::after {
  position: absolute;
  right: -12rem;
  bottom: -15rem;
  z-index: -1;
  width: min(58vw, 52rem);
  aspect-ratio: 1;
  border: 1px solid rgba(152, 255, 56, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(152, 255, 56, 0.018),
    0 0 0 10rem rgba(152, 255, 56, 0.012);
  content: "";
}

.cx-glow {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(152, 255, 56, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.cx-glow-a {
  top: 12rem;
  right: 7%;
  width: min(39vw, 36rem);
  aspect-ratio: 1;
  animation: cxOrbit 18s linear infinite;
}

.cx-glow-b {
  top: 18rem;
  right: 14%;
  width: min(25vw, 23rem);
  aspect-ratio: 1;
  border-color: rgba(137, 217, 216, 0.15);
  animation: cxOrbit 13s linear infinite reverse;
}

.cx-hero .case-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.36fr);
}

.cx-title {
  display: grid;
  max-width: none;
  margin-top: 1.05rem;
  font-size: clamp(5.2rem, 13vw, 14.2rem);
  letter-spacing: -0.1em;
  line-height: 0.72;
}

.cx-title span {
  display: block;
}

.cx-title .cx-title-mark {
  margin-bottom: 1.25rem;
  color: var(--cx-green);
  font-size: 0.2em;
  letter-spacing: 0.02em;
  line-height: 0.76;
}

.cx-title .cx-title-main {
  color: var(--text);
  letter-spacing: -0.035em;
}

.cx-title .cx-title-outline {
  color: transparent;
  font-size: 0.59em;
  letter-spacing: -0.085em;
  line-height: 0.9;
  -webkit-text-stroke: 1px rgba(152, 255, 56, 0.7);
}

.cx-radar-console {
  overflow: hidden;
  border-color: rgba(152, 255, 56, 0.26);
  background:
    linear-gradient(145deg, rgba(152, 255, 56, 0.11), rgba(137, 217, 216, 0.055)),
    rgba(255, 255, 255, 0.025);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
}

.cx-radar {
  position: relative;
  width: min(100%, 16rem);
  aspect-ratio: 1;
  margin: 1.25rem auto;
  overflow: hidden;
  border: 1px solid rgba(152, 255, 56, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(152, 255, 56, 0.17), transparent 62%),
    rgba(6, 11, 7, 0.62);
}

.cx-radar-ring,
.cx-radar-axis,
.cx-radar-sweep,
.cx-radar-core,
.cx-radar-node {
  position: absolute;
  display: block;
}

.cx-radar-ring {
  border: 1px solid rgba(152, 255, 56, 0.19);
  border-radius: 50%;
}

.cx-radar-ring-a { inset: 14%; }
.cx-radar-ring-b { inset: 30%; }
.cx-radar-ring-c { inset: 44%; border-color: rgba(137, 217, 216, 0.26); }

.cx-radar-axis {
  background: rgba(152, 255, 56, 0.13);
}

.cx-radar-axis-x {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.cx-radar-axis-y {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.cx-radar-sweep {
  inset: 50% 0 0 50%;
  background: linear-gradient(22deg, rgba(152, 255, 56, 0.26), transparent 66%);
  transform-origin: left top;
  animation: cxRadarSweep 5.5s linear infinite;
}

.cx-radar-core {
  inset: 46%;
  border-radius: 50%;
  background: var(--cx-green);
  box-shadow: 0 0 1.4rem var(--cx-green);
  animation: cxPulse 2.2s ease-in-out infinite;
}

.cx-radar-node {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--cx-green);
  box-shadow: 0 0 1rem var(--cx-green);
  animation: cxPulse 2.8s ease-in-out infinite;
}

.cx-radar-node-a { top: 25%; right: 21%; }
.cx-radar-node-b { bottom: 28%; left: 19%; animation-delay: -0.8s; }
.cx-radar-node-c { top: 46%; right: 13%; background: var(--cx-teal); box-shadow: 0 0 1rem var(--cx-teal); animation-delay: -1.6s; }

.cx-radar-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.85rem 0 0.1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
}

.cx-radar-status span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cx-green);
  box-shadow: 0 0 0.8rem var(--cx-green);
  animation: cxPulse 2s ease-in-out infinite;
}

.cx-hero-media {
  border-color: rgba(152, 255, 56, 0.26);
}

.cx-hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 42%, rgba(255, 255, 255, 0.11), transparent 56%);
  content: "";
  transform: translateX(-95%);
  animation: cxSweep 7.5s ease-in-out infinite;
  pointer-events: none;
}

.cx-marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  background: rgba(152, 255, 56, 0.035);
}

.cx-marquee div {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 1.3rem;
  animation: cxMarquee 28s linear infinite;
}

.cx-marquee span {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.92rem, 1.5vw, 1.25rem);
  font-weight: 900;
}

.cx-marquee i {
  color: var(--cx-green);
  font-size: 1.6rem;
  font-style: normal;
}

.cx-page .case-facts {
  gap: 1px;
  background: var(--line);
}

.cx-page .case-fact {
  border-right: 0;
  background:
    linear-gradient(145deg, rgba(152, 255, 56, 0.035), transparent),
    #0b0e0b;
  transition:
    background 280ms ease,
    box-shadow 320ms ease;
}

.cx-page .case-fact:hover,
.cx-page .case-fact.is-hovering {
  background:
    linear-gradient(145deg, rgba(152, 255, 56, 0.11), transparent),
    #0b0e0b;
  box-shadow: inset 0 0 0 1px rgba(152, 255, 56, 0.24);
}

.cx-story {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.cx-story::after {
  position: absolute;
  right: -8rem;
  bottom: -6rem;
  color: rgba(152, 255, 56, 0.04);
  font-size: clamp(10rem, 25vw, 28rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.72;
}

.cx-challenge::after { content: "?"; }
.cx-solution::after { content: "+"; }

.cx-story .case-section-copy {
  position: relative;
  z-index: 1;
}

.cx-page .case-section-number {
  color: rgba(152, 255, 56, 0.11);
}

.cx-solution {
  background:
    radial-gradient(circle at 78% 48%, rgba(152, 255, 56, 0.12), transparent 24rem),
    rgba(255, 255, 255, 0.018);
}

.cx-signal-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(152, 255, 56, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(152, 255, 56, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(152, 255, 56, 0.12), transparent 22rem),
    #0b100c;
  background-size: 2.2rem 2.2rem, 2.2rem 2.2rem, auto, auto;
}

.cx-signal-panel::before {
  position: absolute;
  top: -2rem;
  right: 1rem;
  color: rgba(152, 255, 56, 0.045);
  content: "SIGNALS";
  font-size: clamp(7rem, 18vw, 20rem);
  font-weight: 900;
  letter-spacing: -0.11em;
}

.cx-signal-panel > * {
  position: relative;
}

.cx-page .signal-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 3.2rem;
  background:
    linear-gradient(145deg, rgba(152, 255, 56, 0.075), transparent 60%),
    rgba(8, 12, 9, 0.78);
  transition:
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 320ms ease;
}

.cx-page .signal-card::before,
.cx-page .signal-card::after {
  position: absolute;
  bottom: 1.35rem;
  left: 1.35rem;
  height: 0.42rem;
  border-radius: 999px;
  content: "";
}

.cx-page .signal-card::before {
  right: 1.35rem;
  background: rgba(255, 255, 255, 0.11);
}

.cx-page .signal-card::after {
  width: var(--signal-score);
  max-width: calc(100% - 2.7rem);
  background: linear-gradient(90deg, var(--cx-green), var(--cx-teal));
  box-shadow: 0 0 1rem rgba(152, 255, 56, 0.42);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}

.cx-page .signal-card:nth-child(1) { --signal-score: 72%; }
.cx-page .signal-card:nth-child(2) { --signal-score: 18%; }
.cx-page .signal-card:nth-child(3) { --signal-score: 48%; }
.cx-page .signal-card:nth-child(4) { --signal-score: 82%; }

.cx-page .signal-card.is-visible::after {
  transform: scaleX(1);
}

.cx-page .signal-card:hover,
.cx-page .signal-card.is-hovering {
  border-color: rgba(152, 255, 56, 0.5);
  background:
    linear-gradient(145deg, rgba(152, 255, 56, 0.14), transparent 65%),
    rgba(8, 12, 9, 0.9);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22);
}

.cx-flow {
  background:
    radial-gradient(circle at 78% 55%, rgba(152, 255, 56, 0.09), transparent 28rem),
    linear-gradient(145deg, rgba(137, 217, 216, 0.03), transparent 55%);
}

.cx-flow-route {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.cx-flow-route span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.68rem;
  font-weight: 900;
}

.cx-flow-route i {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid rgba(152, 255, 56, 0.42);
  border-radius: 50%;
  color: var(--cx-green);
  font-style: normal;
}

.cx-flow-route em {
  height: 1px;
  background: linear-gradient(90deg, rgba(152, 255, 56, 0.62), rgba(137, 217, 216, 0.28));
}

.cx-flow .flow-laptop-stage {
  width: min(148%, 118rem);
  margin-top: clamp(2.4rem, 4vw, 4.4rem);
  margin-left: 2%;
}

.cx-experience {
  background:
    radial-gradient(circle at 83% 50%, rgba(152, 255, 56, 0.19), transparent 24rem),
    var(--cx-paper);
  color: var(--cx-ink);
}

.cx-experience .eyebrow {
  color: #45791c;
}

.cx-experience .case-section-copy h2 {
  color: var(--cx-ink);
}

.cx-experience .case-body {
  color: rgba(16, 21, 15, 0.7);
}

.cx-experience .experience-feature {
  border-color: rgba(16, 21, 15, 0.12);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 1rem 2.4rem rgba(26, 40, 23, 0.08);
}

.cx-experience .experience-feature:hover,
.cx-experience .experience-feature.is-hovering {
  border-color: rgba(69, 121, 28, 0.38);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1.35rem 2.8rem rgba(26, 40, 23, 0.13);
}

.cx-experience .experience-feature span {
  color: #4b8f17;
}

.cx-experience .experience-feature h3 {
  color: var(--cx-ink);
}

.cx-experience .experience-feature p {
  color: rgba(16, 21, 15, 0.62);
}

.cx-decisions {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 24%, rgba(152, 255, 56, 0.1), transparent 25rem),
    #080a08;
}

.cx-page .decision-card {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
  background:
    linear-gradient(155deg, rgba(152, 255, 56, 0.075), transparent 58%),
    rgba(255, 255, 255, 0.025);
  transition:
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 320ms ease;
}

.cx-page .decision-card::after {
  position: absolute;
  top: 0.7rem;
  right: 1.1rem;
  color: rgba(152, 255, 56, 0.07);
  content: attr(data-order);
  font-size: 8rem;
  font-weight: 900;
  line-height: 0.85;
}

.cx-decisions .decision-card > span {
  display: none;
}

.cx-page .decision-card:hover,
.cx-page .decision-card.is-hovering {
  border-color: rgba(152, 255, 56, 0.5);
  background:
    linear-gradient(155deg, rgba(152, 255, 56, 0.14), transparent 62%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
}

.cx-contact {
  background:
    radial-gradient(circle at 50% 54%, rgba(152, 255, 56, 0.13), transparent 25rem),
    #080a08;
}

@keyframes cxPulse {
  0%,
  100% { opacity: 0.62; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes cxRadarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cxOrbit {
  from { transform: rotate(0deg) scale(0.97); }
  50% { transform: rotate(180deg) scale(1.04); }
  to { transform: rotate(360deg) scale(0.97); }
}

@keyframes cxSweep {
  0%,
  32% { transform: translateX(-95%); }
  68%,
  100% { transform: translateX(95%); }
}

@keyframes cxMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .cx-hero .case-hero-grid {
    grid-template-columns: 1fr;
  }

  .cx-radar-console {
    max-width: 32rem;
  }

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

  .cx-flow-route em {
    width: 1px;
    height: 1.5rem;
    margin-left: 1rem;
    background: linear-gradient(rgba(152, 255, 56, 0.62), rgba(137, 217, 216, 0.28));
  }
}

@media (max-width: 560px) {
  .cx-hero .case-hero-grid,
  .cx-hero .case-hero-copy,
  .cx-radar-console {
    min-width: 0;
    width: 100%;
  }

  .cx-title {
    width: 100%;
    font-size: clamp(4.25rem, 20vw, 5.8rem);
  }

  .cx-title .cx-title-outline {
    font-size: 0.54em;
    -webkit-text-stroke-width: 0.8px;
  }

  .cx-hero::after {
    right: -14rem;
    width: 34rem;
  }

  .cx-marquee {
    padding: 0.9rem 0;
  }

  .cx-page .case-facts {
    gap: 1px;
  }

  .cx-flow .flow-laptop-stage {
    width: 100%;
    margin-left: 0;
  }

  .cx-experience .experience-feature {
    padding: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-glow,
  .cx-radar-sweep,
  .cx-radar-core,
  .cx-radar-node,
  .cx-radar-status span,
  .cx-hero-media::after,
  .cx-marquee div {
    animation: none;
  }
}