/* ============================================================
   ScaleX — Case Studies index page styles
   (loads after landing.css + landing-sections.css; reuses tokens)
   ============================================================ */

/* match the landing page's saved accent (Dark Purple) */
:root {
  --violet: oklch(0.45 0.16 305);
  --violet-2: oklch(0.66 0.15 305);
  --violet-soft: oklch(0.42 0.15 305 / 0.14);
  --aura-1: oklch(0.42 0.17 305 / 0.5);
  --aura-2: oklch(0.38 0.14 290 / 0.45);
}

.cs-hero { padding: 150px 0 0; position: relative; overflow: hidden; }
.cs-hero .aura { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(100px); opacity: 0.5; z-index: 0; }
.cs-hero .aura-1 { width: 720px; height: 520px; left: -160px; top: -120px; background: radial-gradient(ellipse, var(--aura-1), transparent 70%); }
.cs-hero .wrap { position: relative; z-index: 2; }
.cs-hero h1 { font-size: 72px; font-weight: 900; line-height: 0.98; letter-spacing: -0.035em; margin: 22px 0 0; text-wrap: balance; }
.cs-hero h1 em { font-style: normal; color: var(--violet-2); }
body.grad-on .cs-hero h1 em { background: linear-gradient(102deg, var(--violet-2), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-hero .lead { font-size: 20px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; max-width: 620px; }
.cs-hero .lead b { color: var(--ink-2); font-weight: 600; }

/* summary stat row */
.cs-summary { display: flex; gap: 0; margin-top: 52px; border-top: 1px solid var(--line); }
.cs-summary .s { padding: 28px 30px 28px 0; border-right: 1px solid var(--line); }
.cs-summary .s:not(:first-child) { padding-left: 30px; }
.cs-summary .s:last-child { border-right: none; }
.cs-summary .s-num { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cs-summary .s-num .u { color: var(--violet-2); }
.cs-summary .s-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* grid */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.cs-card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; transition: border-color .2s, transform .2s; text-decoration: none; color: inherit; }
.cs-card:hover { border-color: oklch(0.6 0.16 295 / 0.45); transform: translateY(-4px); }
.cs-cover { aspect-ratio: 800 / 460; background: #0f0e17; border-bottom: 1px solid var(--line); overflow: hidden; }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cs-card:hover .cs-cover img { transform: scale(1.04); }
.cs-body { padding: 26px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.cs-stat { font-size: 46px; font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.cs-stat .u { color: var(--violet-2); }
.cs-statlabel { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); margin-top: 10px; }
.cs-name { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin-top: 24px; }
.cs-blurb { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.cs-meta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.cs-meta .row { display: flex; gap: 12px; font-size: 13px; align-items: baseline; }
.cs-meta .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: 0 0 76px; }
.cs-meta .v { color: var(--ink-2); }
.cs-link { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--violet-2); transition: gap .2s; }
.cs-card:hover .cs-link { gap: 12px; }

@media (max-width: 1080px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .cs-hero { padding-top: 120px; }
  .cs-hero h1 { font-size: 46px; }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-summary { flex-wrap: wrap; }
  .cs-summary .s { flex: 1 0 50%; border-bottom: 1px solid var(--line); padding-left: 0 !important; padding-right: 20px; }
}