.case-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4375rem; padding: 1.25rem 0.125rem 0.625rem; color: var(--color-muted); font-size: 0.8125rem; }
.case-breadcrumbs a:hover { color: var(--color-accent); }
.case-hero { padding: 2.125rem 0 2.875rem; }
.case-kicker { margin-bottom: 0.6875rem; color: var(--color-accent); font-weight: 500; }
.case-hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.125rem; align-items: end; }
.case-hero h1 { max-width: 51.25rem; margin-bottom: 1.125rem; font-size: clamp(2.6875rem, 7.2vw, 5.25rem); line-height: 0.95; letter-spacing: -0.06em; font-weight: 500; }
.case-hero__lead { max-width: 47.5rem; color: var(--color-muted); font-size: 1.1875rem; line-height: 1.5; }
.case-hero__aside { padding: 1.5rem; color: #fff; border-radius: 1.375rem; background: linear-gradient(145deg, #141a39, var(--color-accent)); }
.case-hero__aside h3 { margin-bottom: 0; font-size: 1.125rem; line-height: 1.3; }
.case-hero__aside p { margin-bottom: 0; color: rgb(255 255 255 / 75%); line-height: 1.48; }
.case-hero__aside .button,
.case-next .button { min-height: 2.75rem; padding: 0.5625rem 0.875rem; }
.case-hero__aside .button { margin-top: 0.75rem; color: var(--color-accent); border: 0; background: #fff; }

.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 0.875rem; border: 1px solid var(--color-border); border-radius: 1.375rem; background: var(--color-border); }
.case-meta__item { min-height: 6.5625rem; padding: 1.125rem; background: var(--color-surface); }
.case-meta__item span { display: block; margin-bottom: 0.75rem; color: var(--color-muted); font-size: 0.8125rem; }
.case-meta__item strong { line-height: 1.35; }

.case-browser { overflow: hidden; margin: 0; border: 1px solid var(--color-border); border-radius: 1.6875rem; background: var(--color-surface); box-shadow: 0 1.75rem 4.375rem rgb(23 28 61 / 11%); }
.case-browser__top { display: flex; align-items: center; gap: 0.375rem; height: 2.75rem; padding: 0 0.9375rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.case-browser__top i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-border); }
.case-browser__top span { margin-left: 0.4375rem; color: var(--color-muted); font-size: 0.75rem; }
.case-browser img { width: 100%; height: auto; }

.case-section { padding-top: 4.875rem; }
.case-section__head { display: grid; grid-template-columns: 0.85fr 1fr; gap: 2rem; align-items: end; margin-bottom: 1.5625rem; }
.case-section h2 { font-size: clamp(2.125rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.047em; font-weight: 500; }
.case-section__head > p { margin-bottom: 0.25rem; color: var(--color-muted); font-size: 1.0625rem; line-height: 1.55; }
.case-story { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.case-story__card { min-height: 16.5625rem; padding: 1.6875rem; border: 1px solid var(--color-border); border-radius: 1.375rem; background: var(--color-surface); }
.case-story__card--accent { color: #fff; border-color: transparent; background: var(--color-accent); }
.case-story__card h3 { margin: 2.25rem 0 0.6875rem; font-size: 1.6875rem; line-height: 1.1; font-weight: 500; }
.case-story__card p { color: var(--color-muted); line-height: 1.55; }
.case-story__card--accent p { color: rgb(255 255 255 / 76%); }

.case-anchor-nav { position: sticky; z-index: 10; top: 0.625rem; display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.125rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 0.9375rem; background: color-mix(in srgb, var(--color-surface) 91%, transparent); backdrop-filter: blur(0.875rem); }
.case-anchor-nav a { display: inline-flex; align-items: center; min-height: 2.4375rem; padding: 0.5rem 0.6875rem; border-radius: 0.625rem; background: var(--color-surface-soft); }
.case-anchor-nav a:first-child { color: #fff; background: var(--color-accent); }
.case-screen { margin-bottom: 1.125rem; scroll-margin-top: 5rem; }
.case-screen__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 1.125rem; margin-bottom: 0.75rem; }
.case-screen__caption h3 { font-size: 1.4375rem; }
.case-screen__caption p { color: var(--color-muted); }
.case-mobile { display: grid; grid-template-columns: 0.68fr 1.32fr; gap: 0.75rem; align-items: center; padding: clamp(1.375rem, 5vw, 2.875rem); border-radius: 1.6875rem; background: linear-gradient(145deg, #101630, #241f50); }
.case-mobile__phone { overflow: hidden; width: min(24.375rem, 100%); justify-self: center; border: 0.5625rem solid #050713; border-radius: 1.875rem; background: #fff; box-shadow: 0 1.75rem 3.75rem rgb(0 0 0 / 28%); }
.case-mobile__phone img { width: 100%; }
.case-mobile__copy { color: #fff; }
.case-mobile__copy h3 { margin-bottom: 0.75rem; font-size: clamp(1.9375rem, 5vw, 3.25rem); line-height: 1.02; }
.case-mobile__copy > p { max-width: 33.75rem; color: #b8bfd5; font-size: 1.0625rem; line-height: 1.55; }
.case-mobile__points { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.case-mobile__points span { display: flex; align-items: center; gap: 0.5rem; }

.case-outcome { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 0.75rem; }
.case-outcome__intro { padding: clamp(1.625rem, 5vw, 3rem); color: #fff; border-radius: 1.6875rem; background: linear-gradient(145deg, var(--color-accent), #3b2caf); }
.case-outcome__intro h2 { margin-bottom: 0.875rem; }
.case-outcome__intro > p:last-child { color: rgb(255 255 255 / 76%); line-height: 1.5; }
.case-outcome__list { display: grid; gap: 0.5rem; }
.case-outcome__item { display: grid; grid-template-columns: 2.8125rem 1fr; gap: 0.75rem; align-items: center; min-height: 6rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface); }
.case-outcome__icon { display: grid; place-items: center; width: 2.8125rem; height: 2.8125rem; color: var(--color-accent); border-radius: 0.8125rem; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.case-outcome__item strong { display: block; margin-bottom: 0.1875rem; }
.case-outcome__item span:last-child { color: var(--color-muted); line-height: 1.4; }

.case-next { display: grid; grid-template-columns: 1fr auto; gap: 1.875rem; align-items: center; margin: 4.875rem 0 1.375rem; padding: clamp(1.875rem, 6vw, 4rem); color: #fff; border-radius: 1.8125rem; background: linear-gradient(135deg, #111735, #211c4b 55%, var(--color-accent)); }
.case-next h2 { max-width: 47.5rem; margin-bottom: 0.75rem; font-size: clamp(2.1875rem, 5vw, 3.8125rem); line-height: 1.02; letter-spacing: -0.047em; }
.case-next > div > p { max-width: 42.5rem; margin: 0; }
.case-next > div > p:last-child { color: rgb(255 255 255 / 75%); line-height: 1.5; }
.case-next .button { color: var(--color-accent); border: 0; background: #fff; }

@media (max-width: 56.25rem) {
  .case-hero__grid,
  .case-section__head,
  .case-outcome,
  .case-mobile,
  .case-next { grid-template-columns: 1fr; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
  .case-mobile__copy { order: -1; }
}

@media (max-width: 35rem) {
  .case-hero { padding-top: 1.375rem; }
  .case-hero h1 { font-size: 2.75rem; }
  .case-meta { grid-template-columns: 1fr; }
  .case-meta__item { min-height: 5.1875rem; }
  .case-story { grid-template-columns: 1fr; }
  .case-section { padding-top: 3.625rem; }
  .case-section h2 { font-size: 2.375rem; }
  .case-anchor-nav { position: static; }
  .case-screen__caption { display: block; }
  .case-screen__caption p { margin-top: 0.3125rem; }
  .case-mobile { padding: 1.5625rem 1.0625rem; }
  .case-next { margin-top: 3.625rem; padding: 1.875rem 1.25rem; }
}