.case-page { min-height: 100vh; background: #050a11; }
.case-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--shell);
  min-height: 5.5rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.case-header nav { display: flex; align-items: center; gap: 1.2rem; }
.case-header nav a { color: var(--muted); font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.case-header nav a:hover { color: var(--blue-bright); }
.case-main { padding: clamp(3rem, 8vw, 7rem) 0 0; }
.breadcrumb { display: flex; gap: .5rem; margin-bottom: 2.7rem; color: var(--faint); font-family: var(--mono); font-size: .59rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.breadcrumb a:hover { color: var(--blue-bright); }.breadcrumb b { color: #557181; font-weight: 400; }
.case-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr); align-items: end; gap: clamp(2rem, 7vw, 8rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.case-hero h1 { max-width: 44rem; margin: 0; font-family: var(--display); font-size: clamp(3.6rem, 8vw, 8rem); font-weight: 500; letter-spacing: -.065em; line-height: .84; }.case-hero h1 em { color: var(--blue-bright); font-style: normal; }
.case-hero .case-summary { max-width: 30rem; margin: 0 0 .25rem; color: var(--muted); font-size: 1.06rem; line-height: 1.7; }
.case-visual { position: relative; border: 1px solid rgba(135, 213, 255, .3); border-radius: .45rem; background: #080f17; box-shadow: 0 35px 65px rgba(0, 0, 0, .35); overflow: hidden; }.case-visual img { width: 100%; height: auto; aspect-ratio: 2.12 / 1; object-fit: contain; object-position: center; background: #05080c; }.case-visual .browser-chrome { position: relative; z-index: 1; }.case-visual .live-badge { bottom: .7rem; right: .7rem; }
.case-intro { padding: clamp(4.5rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, #06121e, #050a11); }.case-context { display: grid; grid-template-columns: minmax(0, .7fr) minmax(20rem, 1fr); gap: clamp(2rem, 8vw, 8rem); }.case-context h2, .case-section h2 { margin-bottom: 1.2rem; font-size: clamp(2.4rem, 5vw, 5.2rem); }.case-context p:not(.eyebrow), .case-section > p { color: var(--muted); line-height: 1.75; }
.case-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 3rem; }.case-detail { min-height: 15.5rem; padding: 1.2rem; border: 1px solid var(--line); background: rgba(8, 23, 36, .52); }.case-detail > span { color: var(--blue-bright); font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .07em; }.case-detail h3 { margin: 3rem 0 .65rem; font-size: 1.6rem; }.case-detail p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.case-section { padding: clamp(4.5rem, 9vw, 8rem) 0; }.delivery-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(18rem, 1fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }.deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: 0; margin: 0; list-style: none; }.deliverables li { min-height: 5.5rem; padding: .85rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(11, 42, 64, .55), rgba(5, 14, 22, .5)); color: #d4e9f4; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }.deliverables li::before { display: block; margin-bottom: .75rem; color: var(--blue); content: "—"; }
.result-card { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(94, 204, 255, .28); border-radius: .85rem; background: radial-gradient(circle at 86% 12%, rgba(0, 140, 238, .22), transparent 14rem), #071522; }.result-card::before { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(89, 196, 247, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(89, 196, 247, .08) 1px, transparent 1px); background-size: 35px 35px; content: ""; }.result-card > * { position: relative; }.result-card .eyebrow { margin-bottom: 1rem; }.result-card h2 { margin-bottom: .65rem; }.result-card > p:not(.eyebrow) { max-width: 39rem; margin-bottom: 1.7rem; color: var(--muted); }.result-state { display: inline-flex; padding: .52rem .7rem; border: 1px solid rgba(104, 209, 255, .3); background: rgba(1, 20, 34, .65); color: var(--blue-bright); font-family: var(--mono); font-size: .63rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1.5rem; }.case-metrics div { padding: 1rem; border: 1px solid var(--line); background: rgba(2, 11, 19, .55); }.case-metrics span { display: block; color: var(--faint); font-family: var(--mono); font-size: .55rem; font-weight: 700; text-transform: uppercase; }.case-metrics strong { display: block; margin-top: .4rem; color: var(--blue-bright); font-family: var(--display); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.case-cta { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 105%, rgba(3, 138, 238, .25), transparent 27rem), #030811; text-align: center; }.case-cta h2 { max-width: 53rem; margin-inline: auto; font-size: clamp(2.7rem, 6vw, 6rem); }.case-cta p { max-width: 35rem; margin: 0 auto 2rem; color: var(--muted); }.case-cta-actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }.case-cta-actions .button-secondary { font-size: .62rem; }
.case-footer { padding: 1.3rem 0; background: #02060a; }.case-footer .shell { display: flex; justify-content: space-between; gap: 1rem; color: var(--faint); font-family: var(--mono); font-size: .54rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.case-footer a:hover { color: var(--blue-bright); }
@media (max-width: 780px) {
  .case-header { min-height: 4.7rem; }.case-header nav { gap: .9rem; }.case-header nav a:last-child { display: none; }.case-hero, .case-context, .delivery-grid { grid-template-columns: 1fr; }.case-hero { gap: 1.3rem; }.case-hero .case-summary { margin: 0; }.case-details { grid-template-columns: 1fr; }.case-detail { min-height: auto; }.case-detail h3 { margin-top: 1.5rem; }.case-metrics { grid-template-columns: repeat(3, 1fr); }.case-cta-actions { display: grid; grid-template-columns: minmax(0, 1fr); }.case-cta-actions .button { width: 100%; }
}
@media (max-width: 480px) {
  .case-header nav { gap: .7rem; }.case-header nav a { font-size: .53rem; }.case-hero h1 { font-size: clamp(3.4rem, 17vw, 5rem); }.deliverables { grid-template-columns: 1fr; }.case-metrics { grid-template-columns: 1fr; }.case-metrics div { display: flex; align-items: center; justify-content: space-between; }.case-metrics strong { margin: 0; }.case-footer .shell { flex-direction: column; }
}