:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;
  --black: #1d1d1f;
  --gray-900: #2c2c2e;
  --gray-700: #515154;
  --gray-500: #86868b;
  --gray-300: #d2d2d7;
  --gray-200: #e8e8ed;
  --gray-100: #f5f5f7;
  --gray-50: #fbfbfd;
  --white: #ffffff;
  --accent: #0066cc;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --max-width: 980px;
  --content-width: 720px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--white); color: var(--black); line-height: 1.5; font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: 56px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--black); }
h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--black); }
h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--black); }
.lead { font-size: 22px; font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; color: var(--gray-700); }
p { color: var(--gray-700); line-height: 1.65; }
a { color: var(--accent); text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.7; }
.container { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; }
nav { position: sticky; top: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--gray-200); z-index: 100; }
.nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--black); }
.nav-logo a { color: var(--black); }
.nav-back { font-size: 14px; color: var(--gray-700); display: inline-flex; align-items: center; gap: 6px; }
.case-hero { padding: 100px 0 60px; }
.case-eyebrow { font-size: 14px; font-weight: 500; color: var(--gray-500); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 24px; }
.case-hero h1 { margin-bottom: 32px; }
.case-meta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--gray-500); padding-top: 32px; border-top: 1px solid var(--gray-200); margin-top: 40px; }
.case-meta-divider { color: var(--gray-300); }
.case-meta-item strong { color: var(--black); font-weight: 500; }
.case-section { padding: 60px 0; border-top: 1px solid var(--gray-200); }
.case-section:first-of-type { border-top: none; padding-top: 20px; }
.case-section h2 { margin-bottom: 24px; }
.case-section h3 { margin-top: 40px; margin-bottom: 16px; }
.case-section p { margin-bottom: 20px; font-size: 17px; }
.case-section p:last-child { margin-bottom: 0; }
.case-section ul { margin: 16px 0; padding-left: 0; list-style: none; }
.case-section ul li { font-size: 17px; line-height: 1.65; color: var(--gray-700); padding: 6px 0 6px 24px; position: relative; }
.case-section ul li::before { content: "—"; position: absolute; left: 0; color: var(--gray-300); }
.case-quote-block { background: var(--gray-100); border-left: 3px solid var(--gray-300); padding: 24px 32px; margin: 32px 0; font-size: 17px; line-height: 1.6; color: var(--gray-700); border-radius: 0 12px 12px 0; }
.case-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0; padding: 32px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.case-stat-number { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--black); margin-bottom: 8px; }
.case-stat-label { font-size: 14px; color: var(--gray-500); line-height: 1.4; }
.tech-table { width: 100%; margin: 32px 0; border-collapse: collapse; }
.tech-table tr { border-bottom: 1px solid var(--gray-200); }
.tech-table tr:last-child { border-bottom: none; }
.tech-table td { padding: 14px 0; font-size: 15px; vertical-align: top; }
.tech-table td:first-child { color: var(--gray-500); width: 40%; }
.tech-table td:last-child { color: var(--black); font-family: var(--font-mono); }
.case-cta { padding: 80px 0; background: var(--gray-100); margin-top: 60px; }
.case-cta-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; text-align: center; }
.case-cta h2 { margin-bottom: 16px; }
.case-cta p { margin-bottom: 32px; }
.button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--blue); color: var(--white); border-radius: 980px; font-size: 16px; font-weight: 400; transition: background 0.2s ease; }
.button:hover { background: var(--blue-hover); opacity: 1; }
.case-nav { padding: 40px 0; border-top: 1px solid var(--gray-200); }
.case-nav-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.case-nav-link { font-size: 14px; color: var(--gray-700); }
.case-nav-link.disabled { color: var(--gray-300); pointer-events: none; }
footer { background: var(--gray-100); color: var(--gray-500); padding: 32px 0; border-top: 1px solid var(--gray-200); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-text { font-size: 13px; }
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 13px; color: var(--gray-500); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
.case-stats-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.case-stats-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.case-stats-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  h3 { font-size: 19px; }
  .lead { font-size: 18px; }
  .case-hero { padding: 60px 0 40px; }
  .case-section { padding: 40px 0; }
  .case-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .case-quote-block { padding: 20px 24px; font-size: 15px; }
  .case-nav-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
}
@media (max-width: 480px) {
  h1 { font-size: 30px; letter-spacing: -0.02em; }
  h2 { font-size: 24px; }
  .lead { font-size: 17px; }
  .case-hero { padding: 48px 0 32px; }
  .case-section { padding: 36px 0; }
  .case-stats-grid { grid-template-columns: 1fr; }
  .case-stat-number { font-size: 30px; }
  .container { padding: 0 20px; }
  .tech-table td { font-size: 14px; }
}