/* ============================================
   SMTbot Case Study — page-specific styles
   Reuses global tokens + components from styles.css
   ============================================ */

/* ── Nav (minimal back-link) ── */
.case-nav .case-back{
    display:inline-flex;align-items:center;gap:10px;
    text-decoration:none;
}
.case-nav .case-back > i{
    color:var(--text-muted);
    transition:transform .35s var(--ease-out), color .35s ease;
    font-size:.95rem;
}
.case-nav .case-back:hover > i{
    transform:translateX(-3px);
    color:var(--accent-2);
}

.case-main{padding-top:96px}

/* ── Cover ── */
.case-cover{
    position:relative;
    padding:var(--space-6) 0 var(--space-7);
    overflow:hidden;
}
.case-bg{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    overflow:hidden;
}
.case-bg .gradient-orb{position:absolute}
.case-bg .orb-1{
    top:-15%;left:-10%;width:600px;height:600px;
    background:radial-gradient(circle,rgba(124,58,237,.18),transparent 70%);
    filter:blur(80px);
}
.case-bg .orb-2{
    top:25%;right:-15%;width:500px;height:500px;
    background:radial-gradient(circle,rgba(45,212,191,.14),transparent 70%);
    filter:blur(80px);
}
.case-bg .orb-3{
    bottom:-10%;left:30%;width:400px;height:400px;
    background:radial-gradient(circle,rgba(244,114,182,.1),transparent 70%);
    filter:blur(80px);
}
body.light-mode .case-bg .orb-1{background:radial-gradient(circle,rgba(109,40,217,.28),transparent 70%);filter:blur(56px) saturate(145%);mix-blend-mode:multiply;opacity:.32}
body.light-mode .case-bg .orb-2{background:radial-gradient(circle,rgba(13,148,136,.22),transparent 70%);filter:blur(56px) saturate(145%);mix-blend-mode:multiply;opacity:.32}
body.light-mode .case-bg .orb-3{background:radial-gradient(circle,rgba(219,39,119,.14),transparent 70%);filter:blur(56px) saturate(145%);mix-blend-mode:multiply;opacity:.32}

.case-cover-grid{
    position:relative;z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:var(--space-6);
    align-items:start;
}
.case-eyebrow{
    font-family:var(--font-mono);
    font-size:.7rem;
    color:var(--accent-orange);
    letter-spacing:.18em;
    margin-bottom:var(--space-3);
    display:inline-block;
}
.case-h1{
    margin:0 0 var(--space-4);
    line-height:.95;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2.8rem,7vw,5.6rem);
    letter-spacing:-.025em;
    color:var(--text-hi);
}
.case-h1-line{display:block}
.case-h1-italic{
    font-style:italic;
    background:linear-gradient(135deg,var(--accent-orange),var(--accent-pink));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.case-cover-problem{
    font-family:var(--font-display);
    font-size:clamp(1.15rem,1.9vw,1.45rem);
    font-style:italic;
    line-height:1.45;
    color:var(--text-mid);
    max-width:48ch;
    margin:0 0 var(--space-4);
}
.case-status-chip{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 16px;
    background:rgba(251,146,60,.1);
    border:1px solid rgba(251,146,60,.3);
    border-radius:var(--radius-pill);
    font-family:var(--font-mono);font-size:.72rem;
    color:var(--accent-orange);
    letter-spacing:.04em;
}
.case-cover-meta{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:14px;
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    backdrop-filter:blur(var(--blur-card));
    -webkit-backdrop-filter:blur(var(--blur-card));
    position:sticky;top:96px;
}
.case-stat{
    display:flex;flex-direction:column;gap:4px;
    padding:12px 14px;
    border-radius:var(--radius-md);
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
}
.case-stat-k{
    font-family:var(--font-mono);
    font-size:.58rem;
    color:var(--text-muted);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.case-stat-v{
    font-family:var(--font-display);
    font-size:1.45rem;
    font-weight:400;
    color:var(--text-hi);
    line-height:1;
    letter-spacing:-.02em;
    font-feature-settings:"tnum";
}
body.light-mode .case-stat{background:rgba(255,255,255,.6)}

/* ── Sections — tightened for article-like density ── */
.case-section{
    padding:var(--space-7) 0;
    position:relative;
}
.case-section-arch{
    background:var(--surface-2);
    border-top:1px solid var(--border-subtle);
    border-bottom:1px solid var(--border-subtle);
}
body.light-mode .case-section-arch{background:rgba(0,0,0,.025)}
.case-narrative{max-width:980px;margin:0 auto}
.case-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.66rem;
    color:var(--accent-2);
    background:rgba(45,212,191,.08);
    border:1px solid rgba(45,212,191,.22);
    padding:4px 11px;
    border-radius:var(--radius-pill);
    letter-spacing:.2em;
    margin-bottom:var(--space-3);
}
body.light-mode .case-tag{
    background:rgba(13,148,136,.08);
    border-color:rgba(13,148,136,.22);
    color:#0d7d72;
}
.case-h2{
    font-family:var(--font-display);
    font-size:clamp(1.7rem,3vw,2.3rem);
    font-weight:400;
    font-style:italic;
    line-height:1.1;
    letter-spacing:-.02em;
    color:var(--text-hi);
    margin:0 0 var(--space-4);
}
.case-body{
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.72;
    color:var(--text-mid);
    margin:0 0 var(--space-3);
    max-width:68ch;
}
.case-body em{
    color:var(--text-hi);
    font-style:italic;
    font-weight:500;
}
.case-body-lead{
    font-size:1.08rem;
    color:var(--text-mid);
    max-width:70ch;
}

/* ── Setup flow ── */
.case-flow{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
    margin-top:var(--space-6);
    padding:var(--space-4);
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    font-family:var(--font-mono);font-size:.78rem;
    color:var(--text-mid);
}
.case-flow-step{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;
    background:var(--surface-3);
    border-radius:var(--radius-pill);
    border:1px solid var(--border-subtle);
}
.case-flow-num{
    color:var(--accent-orange);
    font-weight:700;
}
.case-flow-arrow{
    color:var(--text-muted);
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.2rem;
}

/* ── Architecture ── */
.case-arch-diagram{
    margin-top:var(--space-4);
    padding:var(--space-4);
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    overflow-x:auto;
}
.case-arch-diagram svg{
    display:block;width:100%;height:auto;min-width:600px;
}
body.light-mode .case-arch-diagram{
    background:rgba(255,255,255,.7);
}
body.light-mode .case-arch-diagram svg text[fill="#fff"]{fill:#14110e}
body.light-mode .case-arch-diagram svg text[fill="#a8acbe"]{fill:#3d3934}

/* ── Architecture v2 — layered, class-driven ── */
.case-arch-diagram-v2{
    padding:18px 18px 14px;
    background:
      radial-gradient(800px 380px at 20% -10%, rgba(124,58,237,.06), transparent 60%),
      radial-gradient(700px 340px at 100% 60%, rgba(45,212,191,.05), transparent 65%),
      var(--surface-1);
}
body.light-mode .case-arch-diagram-v2{
    background:
      radial-gradient(800px 380px at 20% -10%, rgba(109,40,217,.07), transparent 60%),
      radial-gradient(700px 340px at 100% 60%, rgba(13,148,136,.06), transparent 65%),
      rgba(255,255,255,.7);
}
.case-arch-diagram-v2 svg{min-width:760px}

/* Lane backgrounds */
.case-arch-diagram-v2 .arch-lane{
    fill:rgba(255,255,255,.012);
    stroke:var(--border-subtle);
    stroke-width:1;
    stroke-dasharray:0;
}
.case-arch-diagram-v2 .arch-stage-ingest .arch-lane{fill:rgba(124,58,237,.05);stroke:rgba(124,58,237,.22)}
.case-arch-diagram-v2 .arch-stage-indicator .arch-lane{fill:rgba(45,212,191,.05);stroke:rgba(45,212,191,.22)}
.case-arch-diagram-v2 .arch-stage-decide .arch-lane{fill:rgba(251,191,36,.045);stroke:rgba(251,191,36,.22)}
.case-arch-diagram-v2 .arch-stage-act .arch-lane{fill:rgba(251,146,60,.05);stroke:rgba(251,146,60,.22)}
body.light-mode .case-arch-diagram-v2 .arch-stage-ingest .arch-lane{fill:rgba(109,40,217,.06);stroke:rgba(109,40,217,.3)}
body.light-mode .case-arch-diagram-v2 .arch-stage-indicator .arch-lane{fill:rgba(13,148,136,.06);stroke:rgba(13,148,136,.3)}
body.light-mode .case-arch-diagram-v2 .arch-stage-decide .arch-lane{fill:rgba(217,119,6,.06);stroke:rgba(217,119,6,.3)}
body.light-mode .case-arch-diagram-v2 .arch-stage-act .arch-lane{fill:rgba(234,88,12,.06);stroke:rgba(234,88,12,.3)}

/* Lane stage labels */
.case-arch-diagram-v2 .arch-lane-tag{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:11px;font-weight:700;
    letter-spacing:.22em;
}
.case-arch-diagram-v2 .arch-tag-ingest{fill:#c4b5fd}
.case-arch-diagram-v2 .arch-tag-indicator{fill:#5eead4}
.case-arch-diagram-v2 .arch-tag-decide{fill:#fcd34d}
.case-arch-diagram-v2 .arch-tag-act{fill:#fb923c}
body.light-mode .case-arch-diagram-v2 .arch-tag-ingest{fill:#6d28d9}
body.light-mode .case-arch-diagram-v2 .arch-tag-indicator{fill:#0d7d72}
body.light-mode .case-arch-diagram-v2 .arch-tag-decide{fill:#b45309}
body.light-mode .case-arch-diagram-v2 .arch-tag-act{fill:#c2410c}

.case-arch-diagram-v2 .arch-lane-sub{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:10px;letter-spacing:.08em;
    fill:#8b8f99;
}
body.light-mode .case-arch-diagram-v2 .arch-lane-sub{fill:#5b5650}

/* Node text */
.case-arch-diagram-v2 .arch-eyebrow{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:9.5px;letter-spacing:.22em;font-weight:600;
    text-anchor:middle;
}
.case-arch-diagram-v2 .arch-eyebrow-ingest{fill:#c4b5fd}
.case-arch-diagram-v2 .arch-eyebrow-indicator{fill:#5eead4}
.case-arch-diagram-v2 .arch-eyebrow-decide{fill:#fcd34d}
.case-arch-diagram-v2 .arch-eyebrow-act{fill:#fb923c}
.case-arch-diagram-v2 .arch-eyebrow-journal{fill:#f9a8d4}
.case-arch-diagram-v2 .arch-eyebrow-dash{fill:#7dd3fc}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-ingest{fill:#6d28d9}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-indicator{fill:#0d7d72}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-decide{fill:#b45309}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-act{fill:#c2410c}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-journal{fill:#be185d}
body.light-mode .case-arch-diagram-v2 .arch-eyebrow-dash{fill:#0369a1}

.case-arch-diagram-v2 .arch-title{
    font-family:'Instrument Serif', Georgia, serif;
    font-style:italic;
    font-size:22px;
    fill:#ffffff;
    text-anchor:middle;
}
.case-arch-diagram-v2 .arch-title-sm{
    font-family:'Instrument Serif', Georgia, serif;
    font-style:italic;
    font-size:17px;
    fill:#ffffff;
    text-anchor:middle;
}
.case-arch-diagram-v2 .arch-title-xs{
    font-family:'Instrument Serif', Georgia, serif;
    font-style:italic;
    font-size:15px;
    fill:#ffffff;
    text-anchor:middle;
}
body.light-mode .case-arch-diagram-v2 .arch-title,
body.light-mode .case-arch-diagram-v2 .arch-title-sm,
body.light-mode .case-arch-diagram-v2 .arch-title-xs{fill:#14110e}

.case-arch-diagram-v2 .arch-mono{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:10px;
    fill:#a8acbe;
    text-anchor:middle;
}
body.light-mode .case-arch-diagram-v2 .arch-mono{fill:#5b5650}
.case-arch-diagram-v2 .arch-mono-accent2{fill:#5eead4;text-anchor:start}
body.light-mode .case-arch-diagram-v2 .arch-mono-accent2{fill:#0d7d72}
.case-arch-diagram-v2 .arch-mono-decide{fill:#fcd34d;text-anchor:start}
body.light-mode .case-arch-diagram-v2 .arch-mono-decide{fill:#b45309}
.case-arch-diagram-v2 .arch-mono-act{fill:#fb923c;text-anchor:start;font-weight:600;letter-spacing:.18em}
body.light-mode .case-arch-diagram-v2 .arch-mono-act{fill:#c2410c}
.case-arch-diagram-v2 .arch-mono-journal{fill:#f9a8d4;text-anchor:start}
body.light-mode .case-arch-diagram-v2 .arch-mono-journal{fill:#be185d}

.case-arch-diagram-v2 .arch-dec-label{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:11.5px;font-weight:700;letter-spacing:.18em;
    fill:#fef3c7;
    text-anchor:middle;
}
body.light-mode .case-arch-diagram-v2 .arch-dec-label{fill:#78350f}

.case-arch-diagram-v2 .arch-node rect,
.case-arch-diagram-v2 .arch-node polygon{
    transition:filter .35s var(--ease-out), transform .35s var(--ease-out);
    transform-origin:center;
    transform-box:fill-box;
}
.case-arch-diagram-v2 .arch-node:hover rect,
.case-arch-diagram-v2 .arch-node:hover polygon{
    filter:drop-shadow(0 4px 12px rgba(124,58,237,.18)) brightness(1.08);
    transform:translateY(-1px);
}

/* Legend strip below diagram */
.case-arch-legend{
    display:flex;flex-wrap:wrap;gap:8px 10px;
    margin-top:14px;padding:10px 12px;
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill);
    justify-content:center;
}
.alg-chip{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);
    font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
    padding:3px 10px 3px 8px;
    border-radius:var(--radius-pill);
    border:1px solid transparent;
}
.alg-dot{
    width:7px;height:7px;border-radius:50%;
    display:inline-block;
    box-shadow:0 0 0 2px rgba(255,255,255,.04);
}
.alg-ingest{color:#c4b5fd;background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.28)}
.alg-ingest .alg-dot{background:#a78bfa}
.alg-indicator{color:#5eead4;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.28)}
.alg-indicator .alg-dot{background:#2dd4bf}
.alg-decide{color:#fcd34d;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28)}
.alg-decide .alg-dot{background:#fbbf24}
.alg-act{color:#fdba74;background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.28)}
.alg-act .alg-dot{background:#fb923c}
.alg-journal{color:#f9a8d4;background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.28)}
.alg-journal .alg-dot{background:#f472b6}
.alg-dash{color:#7dd3fc;background:rgba(125,211,252,.1);border-color:rgba(125,211,252,.28)}
.alg-dash .alg-dot{background:#7dd3fc}
body.light-mode .alg-ingest{color:#6d28d9;background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.3)}
body.light-mode .alg-indicator{color:#0d7d72;background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.3)}
body.light-mode .alg-decide{color:#b45309;background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.3)}
body.light-mode .alg-act{color:#c2410c;background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.3)}
body.light-mode .alg-journal{color:#be185d;background:rgba(190,24,93,.08);border-color:rgba(190,24,93,.3)}
body.light-mode .alg-dash{color:#0369a1;background:rgba(3,105,161,.08);border-color:rgba(3,105,161,.3)}

/* ── Stack grid — 4 columns single row on desktop ── */
.case-stack-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-top:var(--space-4);
}
.case-stack-col{
    padding:16px 16px 14px;
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    transition:transform .35s var(--ease-out), border-color .35s ease, background .35s ease;
    min-width:0;
}
.case-stack-col:hover{
    transform:translateY(-2px);
    background:var(--surface-3);
    border-color:rgba(124,58,237,.28);
}
.case-stack-head{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--font-mono);
    font-size:.62rem;
    color:var(--accent-2);
    background:rgba(45,212,191,.08);
    border:1px solid rgba(45,212,191,.22);
    padding:4px 10px;
    border-radius:var(--radius-pill);
    letter-spacing:.2em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.case-stack-head i{font-size:.7rem}

/* Per-column accent variants — matches the architecture diagram lanes */
.case-stack-head-ingest{color:#c4b5fd;background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.28)}
.case-stack-head-indicator{color:#5eead4;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.28)}
.case-stack-head-act{color:#fdba74;background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.28)}
.case-stack-head-journal{color:#f9a8d4;background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.28)}
body.light-mode .case-stack-head-ingest{color:#6d28d9;background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.3)}
body.light-mode .case-stack-head-indicator{color:#0d7d72;background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.3)}
body.light-mode .case-stack-head-act{color:#c2410c;background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.3)}
body.light-mode .case-stack-head-journal{color:#be185d;background:rgba(190,24,93,.08);border-color:rgba(190,24,93,.3)}

/* Per-column hover border tint to match the head */
.case-stack-col:has(.case-stack-head-ingest):hover{border-color:rgba(124,58,237,.32)}
.case-stack-col:has(.case-stack-head-indicator):hover{border-color:rgba(45,212,191,.32)}
.case-stack-col:has(.case-stack-head-act):hover{border-color:rgba(251,146,60,.32)}
.case-stack-col:has(.case-stack-head-journal):hover{border-color:rgba(244,114,182,.32)}
.case-stack-list{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;
    gap:10px;
}
.case-stack-list li{
    display:flex;flex-direction:column;gap:2px;
    padding:7px 0;
    border-bottom:1px dashed var(--border-subtle);
    font-family:var(--font-sans);
    font-size:.84rem;
    line-height:1.4;
}
.case-stack-list li:last-child{border-bottom:0;padding-bottom:0}
.case-stack-list strong{
    color:var(--text-hi);
    font-weight:600;
    font-size:.84rem;
    letter-spacing:-.005em;
    font-family:var(--font-mono);
}
.case-stack-list span{
    color:var(--text-muted);
    font-size:.74rem;
    text-align:left;
    letter-spacing:.005em;
    font-family:var(--font-sans);
    line-height:1.45;
}
body.light-mode .case-stack-col{background:rgba(255,255,255,.6)}
body.light-mode .case-stack-head{
    color:#0d7d72;
    background:rgba(13,148,136,.08);
    border-color:rgba(13,148,136,.22);
}

/* ── Three problems ── */
.case-problems-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:var(--space-4);
    max-width:none;
}
.case-problem{
    position:relative;
    padding:18px 22px 20px;
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-left:3px solid var(--accent);
    border-radius:var(--radius-md);
    transition:transform .35s var(--ease-out), border-color .35s ease, background .35s ease;
}
.case-problem:nth-child(2){border-left-color:var(--accent-2)}
.case-problem:nth-child(3){border-left-color:var(--accent-pink)}
.case-problem:hover{
    transform:translateY(-2px);
    background:var(--surface-3);
}
.case-problem-num{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.62rem;font-weight:600;
    padding:3px 10px;
    background:var(--surface-3);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill);
    color:var(--text-mid);
    letter-spacing:.2em;
    margin-bottom:10px;
}
.case-problem-h{
    font-family:var(--font-display);
    font-size:clamp(1.2rem,1.8vw,1.45rem);
    font-style:italic;
    font-weight:400;
    line-height:1.2;
    margin:0 0 10px;
    color:var(--text-hi);
}
.case-problem-body{
    font-family:var(--font-sans);
    font-size:.95rem;
    line-height:1.68;
    color:var(--text-mid);
    margin:0;
    max-width:72ch;
}
.case-problem-body em{
    color:var(--text-hi);
    font-style:italic;
    font-weight:500;
}

/* ── Learnings ── */
.case-learnings{
    list-style:none;padding:0;margin:var(--space-4) 0 0;
}
.case-learnings li{
    display:flex;align-items:flex-start;gap:14px;
    padding:14px 0;
    border-bottom:1px dashed var(--border-subtle);
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.7;
    color:var(--text-mid);
}
.case-learnings li:last-child{border-bottom:0}
.case-learnings em{
    color:var(--text-hi);
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.12rem;
    margin-right:6px;
    line-height:1.4;
    display:inline;
}
.case-learn-mark{
    flex-shrink:0;
    color:var(--accent-2);
    font-family:var(--font-mono);
    font-size:1.2rem;
    margin-top:1px;
    line-height:1;
}

/* ── Back link section ── */
.case-section-back{
    padding:var(--space-5) 0 var(--space-7);
    border-top:1px solid var(--border-subtle);
    text-align:center;
}
.case-back-link{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 24px;
    background:var(--surface-2);
    border:1px solid var(--border-default);
    border-radius:var(--radius-pill);
    font-family:var(--font-mono);font-size:.85rem;
    color:var(--text-mid);
    text-decoration:none;
    transition:background var(--dur-base) var(--ease-out),
               border-color var(--dur-base) var(--ease-out),
               color var(--dur-base) var(--ease-out),
               transform var(--dur-base) var(--ease-out);
}
.case-back-link:hover{
    background:var(--surface-3);
    border-color:var(--accent-2);
    color:var(--text-hi);
    transform:translateX(-2px);
}
.case-back-link i{
    transition:transform .3s var(--ease-out);
}
.case-back-link:hover i{transform:translateX(-3px)}

/* ── Footer (minimal) ── */
.case-footer .footer-bottom{
    padding:var(--space-5) 0;
    border-top:1px solid var(--border-subtle);
}

/* ── Responsive ── */
@media (max-width:1100px){
    .case-stack-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:900px){
    .case-cover-grid{grid-template-columns:1fr;gap:var(--space-5)}
    .case-cover-meta{position:static}
    .case-h1{font-size:clamp(2.6rem,10vw,4rem)}
}
@media (max-width:640px){
    .case-section{padding:var(--space-6) 0}
    .case-cover{padding:var(--space-5) 0 var(--space-6)}
    .case-cover-meta{grid-template-columns:1fr 1fr}
    .case-flow{font-size:.7rem}
    .case-arch-diagram{padding:var(--space-3)}
    .case-stack-grid{grid-template-columns:1fr;gap:10px}
    .case-stack-col{padding:14px 14px 12px}
    .case-problem{padding:14px 16px 16px}
}