:root {
  --navy: #0b192f;
  --navy-light: #112240;
  --slate: #8892b0;
  --slate-light: #a8b2d1;
  --heading: #ccd6f6;
  --mint: #64ffda;
  --line: rgba(136, 146, 176, 0.2);
  --font: "Inter", system-ui, sans-serif;
  --accent: #64ffda;
  --accent-soft: rgba(100, 255, 218, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: var(--slate); font: 400 0.95rem/1.7 var(--font); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.case-nav { display: flex; justify-content: space-between; align-items: center; width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 1.5rem 0; color: var(--slate-light); font-size: .78rem; font-weight: 600; }
.case-nav a:first-child { color: var(--heading); }
.case-nav a:last-child { color: var(--accent); }
.case-hero { width: min(1120px, calc(100% - 3rem)); margin: 3.5rem auto 6rem; }
.case-eyebrow, .section-label { margin: 0 0 1rem; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.case-hero h1 { max-width: 820px; margin: 0; color: var(--heading); font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -.06em; line-height: .98; }
.case-summary { max-width: 620px; margin: 1.7rem 0 0; color: var(--slate-light); font-size: clamp(1.05rem, 2vw, 1.22rem); }
.case-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 760px; margin-top: 2.25rem; }
.case-meta div { padding-top: .8rem; border-top: 1px solid var(--line); }
.case-meta span { display: block; color: var(--slate); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.case-meta strong { display: block; margin-top: .3rem; color: var(--heading); font-size: .85rem; font-weight: 500; }
.hero-art { position: relative; isolation: isolate; min-height: clamp(260px, 42vw, 480px); margin-top: 4rem; overflow: hidden; background: var(--art-bg); }
.hero-art::before, .hero-art::after { position: absolute; z-index: -1; content: ""; border: 1px solid color-mix(in srgb, var(--art-ink) 55%, transparent); border-radius: 50%; }
.hero-art::before { width: 52%; aspect-ratio: 1; top: -30%; right: 7%; }
.hero-art::after { width: 34%; aspect-ratio: 1; bottom: -18%; left: 8%; }
.hero-art span { position: absolute; right: 6%; bottom: -11%; color: var(--art-ink); font-size: clamp(10rem, 28vw, 25rem); font-weight: 700; letter-spacing: -.14em; line-height: 1; opacity: .83; }
.hero-art small { position: absolute; top: 1.4rem; left: 1.5rem; color: var(--art-ink); font-size: .7rem; font-weight: 700; letter-spacing: .15em; }
.case-section { padding: clamp(4rem, 9vw, 8rem) max(1.5rem, calc((100% - 1120px) / 2)); }
.case-section--muted { background: var(--navy-light); }
.section-grid { display: grid; grid-template-columns: minmax(160px, .43fr) minmax(0, 1fr); gap: clamp(2rem, 10vw, 9rem); }
.section-grid h2 { margin: 0; color: var(--heading); font-size: 1.1rem; }
.section-content { max-width: 680px; }
.section-content > p:first-child { margin-top: 0; color: var(--slate-light); font-size: 1.05rem; }
.detail-list { display: grid; gap: .7rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.detail-list li { position: relative; padding-left: 1.1rem; }
.detail-list li::before { position: absolute; left: 0; color: var(--accent); content: "▹"; }
.stack-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.stack-list li { padding: .25rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 600; }
.stack-list--icons { gap: .65rem; }
.stack-list--icons li { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.35rem; padding: .4rem .72rem; }
.stack-list--icons img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.stack-list--icons .stack-list__text { padding: .4rem .72rem; }
.preview-frame { max-width: 780px; margin: 0 auto; padding: .9rem; border: 1px solid var(--line); background: #0a1528; box-shadow: 0 22px 60px -35px #000; }
.preview-bar { display: flex; gap: .35rem; padding: 0 0 .8rem; }.preview-bar i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--line); }.preview-bar i:first-child { background: var(--accent); }
.product-screen { display: grid; grid-template-columns: 23% 1fr; min-height: 330px; overflow: hidden; background: #0d1c34; }
.product-sidebar { padding: 1.25rem; border-right: 1px solid var(--line); background: rgba(255,255,255,.025); }.product-sidebar b { color: var(--heading); font-size: .78rem; }.product-sidebar span { display: block; height: .4rem; margin-top: 1.3rem; background: var(--line); }.product-sidebar span:nth-child(3) { width: 70%; }.product-sidebar span:nth-child(4) { width: 80%; }
.product-canvas { padding: clamp(1rem, 4vw, 2rem); }.product-canvas h3 { margin: 0; color: var(--heading); font-size: clamp(1.1rem, 3vw, 1.65rem); }.product-canvas p { margin: .4rem 0 1.5rem; font-size: .76rem; }.preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }.preview-card { min-height: 120px; padding: .8rem; border: 1px solid var(--line); background: rgba(255,255,255,.025); }.preview-card b { color: var(--accent); font-size: 1.5rem; }.preview-card span { display: block; width: 70%; height: .36rem; margin-top: .6rem; background: var(--line); }.preview-card span:last-child { width: 48%; }
.case-footer { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 2rem 0; border-top: 1px solid var(--line); color: var(--slate); font-size: .8rem; }.case-footer a { color: var(--heading); }.case-footer a:hover { color: var(--accent); }

@media (max-width: 680px) { .case-hero { margin-top: 2rem; margin-bottom: 4rem; }.case-meta { grid-template-columns: 1fr; }.section-grid { grid-template-columns: 1fr; gap: 1.25rem; }.product-screen { grid-template-columns: 1fr; }.product-sidebar { display: none; }.preview-cards { grid-template-columns: 1fr; }.preview-card { min-height: 75px; } }