/* ============================================================
   CASE STUDY SHARED STYLESHEET
   Rupesh Chavan Portfolio — Case Studies
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* ── CSS VARIABLES (overridden per-project) ── */
:root {
  --accent: #6366f1;
  --accent-dim: rgba(99, 102, 241, 0.15);
  --accent-glow: rgba(99, 102, 241, 0.25);
  --bg: #07070b;
  --bg2: #0d0d14;
  --bg3: #111118;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --radius: 2px;
  --font-body: 'Space Grotesk', sans-serif;
  --font-display: 'Instrument Serif', serif;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0;
}

/* ── SELECTION ── */
::selection {
  background: var(--accent-dim);
  color: var(--text-primary);
}

/* ── TOP NAVIGATION ── */
.cs-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  background: rgba(7, 7, 11, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.cs-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.cs-back:hover {
  color: var(--accent);
}

.cs-back svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}

.cs-back:hover svg {
  transform: translateX(-4px);
}

.cs-nav-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-nav-links {
  display: flex;
  gap: 1.5rem;
}

.cs-nav-links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
}

.cs-nav-links a:hover,
.cs-nav-links a.active {
  color: var(--accent);
}

/* ── SCROLL PROGRESS BAR ── */
.cs-progress-bar {
  position: fixed;
  top: 60px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 100;
  transition: width 0.1s linear;
}

/* ── HERO ── */
.cs-hero {
  /*height: 120vh;*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 7.5rem 0 0;
  position: relative;
  overflow: hidden;
}

.cs-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cs-hero-bg img,
.cs-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  transform: scale(1.05);
}

.cs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 30%, transparent 80%);
  z-index: 1;
}

.cs-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
}

.cs-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.cs-hero-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cs-hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.cs-hero-title em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow);
}

.cs-hero-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  margin-bottom: 3rem;
}

.cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cs-meta-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-meta-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.cs-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  margin-top: 0;
}

.cs-hero-cta:hover {
  background: var(--accent);
  color: var(--bg);
}

.cs-hero-cta svg {
  width: 14px;
  height: 14px;
}

/* ── STATS BAND ── */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}

.cs-stat {
  padding: 3rem 2.5rem 2.75rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.cs-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
  opacity: 0.55;
}

.cs-stat:last-child {
  border-right: none;
}

.cs-stat-value {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.045em;
  line-height: 1;
  font-family: var(--font-body);
  text-shadow: 0 0 40px var(--accent-glow, rgba(99,102,241,0.2));
  margin-top: 0.75rem;
}

.cs-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.55rem;
}

/* ── BACK TO TOP ── */
.cs-back-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 0 var(--accent-glow, rgba(99,102,241,0.3));
  pointer-events: none;
}

.cs-back-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cs-back-top:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow, rgba(99,102,241,0.35));
  transform: translateY(-3px) scale(1);
}

.cs-back-top svg {
  width: 18px;
  height: 18px;
  color: #fff;
  flex-shrink: 0;
}

/* ── SECTION BASE ── */
.cs-section {
  padding: 8rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-section-full {
  padding: 8rem 0;
}

.cs-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cs-section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.cs-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cs-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.cs-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.cs-section-title em {
  font-style: italic;
  color: var(--accent);
}

.cs-body-text {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 680px;
}

.cs-body-text+.cs-body-text {
  margin-top: 1.25rem;
}

/* ── OVERVIEW SPLIT ── */
.cs-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
}

.cs-overview-col {
  padding: 4rem;
  border-right: 1px solid var(--border);
}

.cs-overview-col:last-child {
  border-right: none;
}

.cs-overview-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ── PROBLEM / INSIGHT CARDS ── */
.cs-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.cs-insight-card {
  padding: 2.5rem;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}

.cs-insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
}

.cs-insight-card:hover::before {
  opacity: 1;
}

.cs-insight-number {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cs-insight-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.cs-insight-body {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── PROCESS TIMELINE ── */
.cs-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
}

.cs-process-steps::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.cs-step {
  padding: 0 2rem 3rem 0;
  position: relative;
  z-index: 1;
}

.cs-step-num {
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.cs-step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.cs-step-body {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── SHOWCASE / MOCKUP ── */
.cs-showcase {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 2rem;
  text-align: center;
  overflow: hidden;
}

.cs-mockup-frame {
  position: relative;
  display: inline-block;
  max-width: 900px;
  width: 100%;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
}

.cs-mockup-frame img {
  width: 100%;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-mockup-frame:hover img {
  transform: scale(1.02);
}

.cs-mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.cs-mockup-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ── DESIGN SYSTEM SECTION ── */
.cs-ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.cs-ds-block {
  padding: 3rem;
  background: var(--bg2);
}

.cs-ds-block-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.cs-colors {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cs-color-swatch {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  position: relative;
  cursor: default;
}

.cs-color-swatch::after {
  content: attr(data-label);
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-type-scale {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-type-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.cs-type-size {
  font-size: 0.6rem;
  color: var(--text-muted);
  width: 40px;
  flex-shrink: 0;
}

.cs-spacing-demo {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.cs-sp {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
}

/* ── IMPACT / METRICS ── */
.cs-impact {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 8rem 2rem;
}

.cs-impact-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  margin-top: 4rem;
}

.cs-metric {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-metric-value {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
}

.cs-metric-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cs-metric-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 200px;
  line-height: 1.6;
  margin-top: 0.25rem;
}

/* ── REFLECTION / CLOSING ── */
.cs-reflection {
  padding: 8rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.cs-reflection-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.cs-reflection-attr {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── NEXT CASE STUDY ── */
.cs-next {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.cs-next-prev,
.cs-next-next {
  flex: 1;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background var(--transition);
  cursor: pointer;
}

.cs-next-prev {
  border-right: 1px solid var(--border);
  text-align: left;
}

.cs-next-next {
  text-align: right;
  align-items: flex-end;
}

.cs-next-prev:hover,
.cs-next-next:hover {
  background: var(--surface);
}

.cs-next-dir {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-next-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.2;
}

.cs-next-cat {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

/* ── TAGS ── */
.cs-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.cs-tag-accent {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── QUOTE BLOCK ── */
.cs-quote {
  padding: 3rem;
  border-left: 3px solid var(--accent);
  background: var(--bg2);
  margin: 3rem 0;
}

.cs-quote-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.cs-quote-source {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── REVEAL ANIMATIONS ── */
.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.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-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-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

.delay-6 {
  transition-delay: 0.6s;
}

/* ── NOISE GRAIN ── */
.cs-noise::before {
  content: '';
  position: fixed;
  inset: -200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1000;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {

  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-2%, -3%);
  }

  30% {
    transform: translate(3%, -2%);
  }

  50% {
    transform: translate(-1%, 3%);
  }

  70% {
    transform: translate(2%, 2%);
  }

  90% {
    transform: translate(-3%, 1%);
  }
}

/* ── ACCENT GLOW ── */
.cs-glow {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(120px);
  opacity: 0.08;
  pointer-events: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .cs-topnav {
    padding: 0 1rem;
  }

  .cs-nav-links {
    display: none;
  }

  .cs-hero {
    padding: 8rem 1.25rem 4rem;
  }

  .cs-section {
    padding: 5rem 1.25rem;
  }

  .cs-showcase {
    padding: 4rem 1.25rem;
  }

  .cs-overview-grid {
    grid-template-columns: 1fr;
  }

  .cs-overview-col {
    padding: 2.5rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .cs-overview-col:last-child {
    border-bottom: none;
  }

  .cs-process-steps::before {
    display: none;
  }

  .cs-next {
    flex-direction: column;
  }

  .cs-next-prev {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .cs-ds-block {
    padding: 2rem;
  }

  .cs-stat {
    padding: 2rem 1.5rem;
  }

  .cs-quote {
    padding: 2rem;
  }

  .cs-impact {
    padding: 5rem 1.25rem;
  }

  .cs-reflection {
    padding: 5rem 1.25rem;
  }
}

/* ══════════════════════════════════════════
   HERO SPLIT — two-column layout with visual panel
═══════════════════════════════════════════ */
.cs-hero-content.cs-hero-split {
  display: grid;
  grid-template-columns: 54% 1fr;
  align-items: center;
  gap: 4rem;
  max-width: 1360px;
}

.cs-hero-left {
  min-width: 0;
}

/* ── Visual panel ── */
.cs-hero-visual {
  position: relative;
  height: 460px;
  flex-shrink: 0;
  pointer-events: none;
}

.hero-screen-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Browser-window screen ── */
.hero-screen {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 60px var(--accent-glow);
  background: rgba(0, 0, 0, 0.4);
}

.hero-screen-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  background: rgba(8, 8, 12, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.hero-chrome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.hero-chrome-dot:nth-child(1) {
  background: #ef4444;
}

.hero-chrome-dot:nth-child(2) {
  background: #f59e0b;
}

.hero-chrome-dot:nth-child(3) {
  background: #22c55e;
}

.hero-chrome-bar {
  flex: 1;
  height: 13px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  margin-left: 0.4rem;
}

.hero-screen img,
.hero-screen video {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 340px;
}

/* ── Phone frame ── */
.hero-phone {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 60px var(--accent-glow);
  background: rgba(0, 0, 0, 0.5);
}

.hero-phone img,
.hero-phone video {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ── Positions ── */
.hero-screen-main {
  width: 86%;
  left: 0;
  top: 4%;
  z-index: 3;
  transform: rotate(-1.5deg);
}

.hero-screen-back {
  width: 70%;
  right: -3%;
  bottom: 0%;
  z-index: 2;
  transform: rotate(2.5deg);
  opacity: 0.72;
}

.hero-phone-main {
  width: 40%;
  left: 14%;
  top: 3%;
  z-index: 3;
  transform: rotate(-3deg);
}

.hero-phone-back {
  width: 34%;
  right: 4%;
  top: 16%;
  z-index: 2;
  transform: rotate(4deg);
  opacity: 0.70;
}

/* ── Float animations ── */
@keyframes heroFloat1 {

  0%,
  100% {
    transform: rotate(-1.5deg) translateY(0px);
  }

  50% {
    transform: rotate(-1.5deg) translateY(-14px);
  }
}

@keyframes heroFloat2 {

  0%,
  100% {
    transform: rotate(2.5deg) translateY(-7px);
  }

  50% {
    transform: rotate(2.5deg) translateY(9px);
  }
}

@keyframes heroFloatPhone1 {

  0%,
  100% {
    transform: rotate(-3deg) translateY(0px);
  }

  50% {
    transform: rotate(-3deg) translateY(-12px);
  }
}

@keyframes heroFloatPhone2 {

  0%,
  100% {
    transform: rotate(4deg) translateY(-6px);
  }

  50% {
    transform: rotate(4deg) translateY(9px);
  }
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroRevealBack {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }

  to {
    opacity: 0.72;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroRevealPhoneBack {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }

  to {
    opacity: 0.70;
    transform: translateY(0) scale(1);
  }
}

.hero-screen-main {
  animation:
    heroReveal 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroFloat1 5.5s 1.1s ease-in-out infinite;
}

.hero-screen-back {
  animation:
    heroRevealBack 0.8s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroFloat2 7s 1.35s ease-in-out infinite;
}

.hero-phone-main {
  animation:
    heroReveal 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroFloatPhone1 5.5s 1.1s ease-in-out infinite;
}

.hero-phone-back {
  animation:
    heroRevealPhoneBack 0.8s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroFloatPhone2 7s 1.35s ease-in-out infinite;
}

/* ── Gloss overlay ── */
.hero-screen::after,
.hero-phone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 4;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cs-hero-content.cs-hero-split {
    grid-template-columns: 58% 1fr;
    gap: 2.5rem;
  }

  .cs-hero-visual {
    height: 380px;
  }

  .hero-screen-main {
    width: 90%;
  }
}

@media (max-width: 820px) {
  .cs-hero-content.cs-hero-split {
    display: block;
  }

  .cs-hero-visual {
    display: none;
  }
}

/* ══════════════════════════════════════════
   CENTERED HERO LAYOUT
═══════════════════════════════════════════ */

.cs-hero-content.cs-hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 960px;
  width: 100%;
  padding: 0 2rem 2.5rem;
}

.cs-hero-centered .cs-hero-subtitle {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.cs-hero-centered .cs-hero-meta {
  justify-content: center;
}

.cs-hero-centered .cs-hero-ctas,
.cs-hero-centered .hero-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ── Full-width product visual below centered content ── */
.cs-hero-visual-full {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  margin: 3.5rem auto 0;
  padding: 0 2rem;
  pointer-events: none;
}

.cs-hero-visual-full .hero-screen-wrap {
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  box-shadow: 0 -4px 50px rgba(0, 0, 0, 0.4), 0 0 80px var(--accent-glow);
}

.cs-hero-visual-full .hero-screen-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  background: rgba(15, 15, 22, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-hero-visual-full .hero-chrome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-hero-visual-full .hero-chrome-dot:nth-child(1) {
  background: #ef4444;
}

.cs-hero-visual-full .hero-chrome-dot:nth-child(2) {
  background: #f59e0b;
}

.cs-hero-visual-full .hero-chrome-dot:nth-child(3) {
  background: #22c55e;
}

.cs-hero-visual-full .hero-chrome-bar {
  flex: 1;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  margin-left: 0.4rem;
}

.cs-hero-visual-full .hero-screen-wrap img,
.cs-hero-visual-full .hero-screen-wrap video {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

/* Phone pair for mobile apps */
.cs-hero-visual-full.cs-hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  max-width: 580px;
  padding: 0;
}

.cs-hero-phones .hero-phone-c {
  flex: 1;
  max-width: 210px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--accent-glow);
}

.cs-hero-phones .hero-phone-c img {
  width: 100%;
  display: block;
}

.cs-hero-phones .hero-phone-c:first-child {
  transform: rotate(-2.5deg) translateY(14px);
}

.cs-hero-phones .hero-phone-c:last-child {
  transform: rotate(2deg) translateY(6px);
}

@media (max-width: 820px) {
  .cs-hero-visual-full {
    padding: 0 1rem;
  }

  .cs-hero-visual-full.cs-hero-phones {
    max-width: 380px;
    gap: 0.75rem;
  }

  .cs-hero-phones .hero-phone-c {
    max-width: 160px;
  }
}

@media (max-width: 480px) {
  .cs-hero-visual-full.cs-hero-phones {
    max-width: 300px;
  }

  .cs-hero-phones .hero-phone-c {
    max-width: 130px;
  }
}

/* ── Floating UI cards on hero image ── */
.hero-float-card {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 162px;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(10, 10, 18, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
  animation: floatCard 4s ease-in-out infinite;
}

/* ── HFC: rich card internals ── */
.hfc-header { display:flex; align-items:center; gap:0.4rem; }
.hfc-label {
  font-size:0.58rem; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.4);
  font-family:'Space Grotesk','Inter',sans-serif; flex:1;
}
.hfc-trend {
  font-size:0.57rem; font-weight:700; letter-spacing:0.02em;
  padding:0.1rem 0.38rem; border-radius:4px; white-space:nowrap; flex-shrink:0;
}
.hfc-trend.up   { color:#4ade80; background:rgba(74,222,128,0.14); }
.hfc-trend.down { color:#f87171; background:rgba(248,113,113,0.14); }
.hfc-trend.good { color:#4ade80; background:rgba(74,222,128,0.14); }
.hfc-trend.ai   { color:var(--accent,#a78bfa); background:var(--accent-dim,rgba(167,139,250,0.12)); }
.hfc-value {
  font-size:1.4rem; font-weight:700; color:#fff;
  line-height:1.05; letter-spacing:-0.025em;
  font-family:'Space Grotesk','Inter',sans-serif;
}
.hfc-value-sm {
  font-size:1rem; font-weight:700; color:#fff;
  line-height:1.1; letter-spacing:-0.01em;
  font-family:'Space Grotesk','Inter',sans-serif;
}
.hfc-row { display:flex; align-items:center; gap:0.45rem; }
.hfc-sub { font-size:0.6rem; color:rgba(255,255,255,0.35); font-weight:400; font-family:'Space Grotesk',sans-serif; }
.hfc-spark { margin-top:0.2rem; overflow:hidden; }
.hfc-spark svg { display:block; width:100%; height:26px; overflow:visible; }
.hfc-bars { display:flex; align-items:flex-end; gap:2px; height:22px; margin-top:0.3rem; }
.hfc-bar { flex:1; background:rgba(255,255,255,0.1); border-radius:2px 2px 0 0; min-height:3px; }
.hfc-bar.hi { background:var(--accent,rgba(255,255,255,0.5)); }
.hfc-divider { height:1px; background:rgba(255,255,255,0.08); margin:0.2rem 0; }
.hfc-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent,#22c55e);
  flex-shrink:0; display:inline-block; animation:hfcPulse 2s ease-in-out infinite;
}
@keyframes hfcPulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 var(--accent-glow,rgba(255,255,255,0.2)); }
  50%      { opacity:0.7; box-shadow:0 0 0 4px transparent; }
}
.hfc-live {
  display:inline-flex; align-items:center; gap:0.28rem;
  font-size:0.53rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:#4ade80; background:rgba(74,222,128,0.1); padding:0.1rem 0.4rem; border-radius:4px; flex-shrink:0;
}
.hfc-live-dot { width:4px; height:4px; background:#4ade80; border-radius:50%; animation:hfcPulse 1.5s ease-in-out infinite; flex-shrink:0; }
.hfc-badge {
  font-size:0.53rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim,rgba(255,255,255,0.08));
  padding:0.1rem 0.45rem; border-radius:4px; flex-shrink:0;
}
.hfc-stars { color:#fbbf24; font-size:0.65rem; letter-spacing:0.06em; }
.hfc-icon { font-size:0.95rem; line-height:1; flex-shrink:0; }
.hfc-stat-row { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
.hfc-stat-val { font-size:0.63rem; font-weight:600; color:rgba(255,255,255,0.72); }
.hfc-stat-val.g { color:#4ade80; }
.hfc-stat-val.r { color:#f87171; }

.hero-float-card.hero-float-left {
  left: -1.5rem;
  top: 18%;
  animation-delay: 0s;
}

.hero-float-card.hero-float-right {
  right: -1.5rem;
  top: 28%;
  animation-delay: 1.8s;
}

.hero-float-card.hero-float-top-left {
  left: 3%;
  top: -1.2rem;
  animation-delay: 0.5s;
}

.hero-float-card.hero-float-top-right {
  right: 3%;
  top: -1.2rem;
  animation-delay: 2.2s;
}

.hero-float-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-glow, rgba(99, 102, 241, 0.6));
}

.hero-float-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.hero-float-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hero-float-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.hero-float-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.hero-float-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  background: var(--accent, #6366f1);
  color: #fff;
  letter-spacing: 0.02em;
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 820px) {
  .hero-float-card {
    display: none;
  }
}

/* ══════════════════════════════════════════
   TEMPLATE SECTIONS — UX Case Study Format
═══════════════════════════════════════════ */

/* ── Section wrapper with top label line ── */
.cs-tmpl-section {
  padding: 6rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-tmpl-section-bg {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0;
}

.cs-tmpl-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cs-tmpl-header {
  margin-bottom: 3rem;
}

.cs-tmpl-header .cs-eyebrow {
  margin-bottom: 0.75rem;
}

.cs-tmpl-header .cs-section-title {
  margin-bottom: 0.75rem;
}

.cs-tmpl-desc {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.8;
}

/* ── PERSONA CARDS ── */
.cs-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3rem;
}

.cs-persona-card {
  padding: 2.5rem;
  background: var(--bg2);
  position: relative;
  transition: background var(--transition);
}

.cs-persona-card:hover {
  background: var(--bg3);
}

.cs-persona-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.cs-persona-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.cs-persona-role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.cs-persona-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}

.cs-persona-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-persona-list li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}

.cs-persona-list.goals li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.75rem;
}

.cs-persona-list.pains li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-size: 0.65rem;
}

/* ── CHALLENGE CARDS ── */
.cs-challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.cs-challenge-card {
  padding: 2rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cs-challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.cs-challenge-num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.cs-challenge-icon {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  display: block;
}

.cs-challenge-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

.cs-challenge-body {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── RESEARCH CARDS ── */
.cs-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.cs-research-card {
  padding: 2.25rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cs-research-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.5;
}

.cs-research-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cs-research-stat {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cs-research-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.cs-research-body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-weight: 300;
}

/* ── USER STORIES TABLE ── */
.cs-stories-wrap {
  overflow-x: auto;
  margin-top: 3rem;
  border: 1px solid var(--border);
}

.cs-stories-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.cs-stories-table thead tr {
  background: var(--accent);
}

.cs-stories-table th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  white-space: nowrap;
}

.cs-stories-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.cs-stories-table tbody tr:last-child {
  border-bottom: none;
}

.cs-stories-table tbody tr:hover {
  background: var(--surface);
}

.cs-stories-table td {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  vertical-align: top;
}

.cs-stories-table td:first-child {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── COMPETITOR ANALYSIS ── */
.cs-comp-wrap {
  overflow-x: auto;
  margin-top: 3rem;
  border: 1px solid var(--border);
}

.cs-comp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.cs-comp-table thead tr {
  background: var(--bg3);
  border-bottom: 2px solid var(--accent);
}

.cs-comp-table th {
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cs-comp-table th:first-child {
  text-align: left;
  color: var(--text-muted);
}

.cs-comp-table th.cs-comp-us {
  color: var(--accent);
  background: var(--accent-dim);
}

.cs-comp-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.cs-comp-table tbody tr:last-child {
  border-bottom: none;
}

.cs-comp-table tbody tr:hover {
  background: var(--surface);
}

.cs-comp-table td {
  padding: 0.9rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cs-comp-table td:first-child {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
}

.cs-comp-table td.cs-comp-us {
  background: var(--accent-dim);
}

.cs-check {
  color: #22c55e;
  font-size: 1rem;
}

.cs-cross {
  color: rgba(255, 255, 255, 0.15);
  font-size: 1rem;
}

.cs-partial {
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── USER FLOW ── */
.cs-flow-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 3rem;
  border: 1px solid var(--border);
  overflow: hidden;
}

.cs-flow-step {
  flex: 1;
  min-width: 120px;
  padding: 1.75rem 1.5rem;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  position: relative;
  transition: background var(--transition);
}

.cs-flow-step:last-child {
  border-right: none;
}

.cs-flow-step:hover {
  background: var(--bg3);
}

.cs-flow-step::after {
  content: '›';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--accent);
  opacity: 0.6;
  z-index: 1;
}

.cs-flow-step:last-child::after {
  display: none;
}

.cs-flow-step-num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.cs-flow-step-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.cs-flow-step-body {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── TOOLKIT ── */
.cs-toolkit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.cs-tool {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: border-color var(--transition), background var(--transition);
}

.cs-tool:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.cs-tool-icon {
  font-size: 1.25rem;
}

.cs-tool-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.cs-tool-role {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* ── WHY / CAUSE ANALYSIS ── */
.cs-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.cs-why-card {
  padding: 2.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
}

.cs-why-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cs-why-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.cs-why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cs-why-list li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
}

.cs-why-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .cs-persona-grid {
    grid-template-columns: 1fr;
  }

  .cs-challenge-grid {
    grid-template-columns: 1fr;
  }

  .cs-research-grid {
    grid-template-columns: 1fr;
  }

  .cs-why-grid {
    grid-template-columns: 1fr;
  }

  .cs-flow-row {
    flex-direction: column;
  }

  .cs-flow-step {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .cs-flow-step:last-child {
    border-bottom: none;
  }

  .cs-flow-step::after {
    content: '↓';
    right: auto;
    left: 50%;
    top: auto;
    bottom: -12px;
    transform: translateX(-50%);
  }

  .cs-tmpl-section {
    padding: 4rem 1.25rem;
  }

  .cs-tmpl-section-bg {
    padding: 4rem 0;
  }

  .cs-tmpl-inner {
    padding: 0 1.25rem;
  }
}

/* ══════════════════════════════════════════
   LIGHT BODY THEME — UX Case Study Template
   Wraps all content below the hero section
═══════════════════════════════════════════ */

/* ── Light nav (overrides per-project dark nav) ── */
.cs-topnav {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

.cs-back {
  color: #475569 !important;
}

.cs-back:hover {
  color: var(--accent) !important;
}

.cs-nav-title {
  color: #94a3b8 !important;
}

.cs-nav-links a {
  color: #94a3b8 !important;
}

.cs-nav-links a:hover,
.cs-nav-links a.active {
  color: var(--accent) !important;
}

/* ── Light body wrapper ── */
.cs-light-body {
  --bg: #ffffff;
  --bg2: #f7f8fc;
  --bg3: #eef0f6;
  --surface: rgba(0, 0, 0, 0.025);
  --border: rgba(0, 0, 0, 0.08);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --card-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  --card-radius: 12px;

  background: var(--bg);
  color: var(--text-primary);
}

/* Section title — bold sans-serif to match template */
.cs-light-body .cs-section-title {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cs-light-body .cs-section-title em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

/* Body text */
.cs-light-body .cs-body-text {
  color: var(--text-secondary);
}

/* Section divider */
.cs-light-body .cs-section-divider {
  border-color: rgba(0, 0, 0, 0.07);
}

/* ── Stats band ── */
.cs-light-body .cs-stats {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.cs-light-body .cs-stat {
  border-color: rgba(0, 0, 0, 0.07);
}

/* ── Insight / problem cards ── */
.cs-light-body .cs-insight-grid {
  background: transparent;
  border: none;
  gap: 1.25rem;
}

.cs-light-body .cs-insight-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-insight-card::before {
  border-radius: var(--card-radius) 0 0 var(--card-radius);
}

/* ── Process steps ── */
.cs-light-body .cs-process-steps::before {
  background: rgba(0, 0, 0, 0.08);
}

.cs-light-body .cs-step-num {
  background: #ffffff;
}

/* ── Overview grid ── */
.cs-light-body .cs-overview-grid {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-overview-col {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ── Showcase / mockup ── */
.cs-light-body .cs-showcase {
  background: var(--bg2);
  border-color: rgba(0, 0, 0, 0.07);
}

.cs-light-body .cs-mockup-frame {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* ── Design system ── */
.cs-light-body .cs-ds-grid {
  background: transparent;
  border: none;
  gap: 1.25rem;
}

.cs-light-body .cs-ds-block {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-color-swatch {
  border-color: rgba(0, 0, 0, 0.12);
}

/* ── Impact section ── */
.cs-light-body .cs-impact {
  background: var(--bg2);
  border-color: rgba(0, 0, 0, 0.07);
}

/* ── Quote ── */
.cs-light-body .cs-quote {
  background: var(--bg2);
}

.cs-light-body .cs-reflection-quote {
  color: var(--text-secondary);
}

/* ── Tags ── */
.cs-light-body .cs-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

/* ── Prev/Next nav ── */
.cs-light-body .cs-next {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

.cs-light-body .cs-next-prev {
  border-color: rgba(0, 0, 0, 0.08);
}

.cs-light-body .cs-next-prev:hover,
.cs-light-body .cs-next-next:hover {
  background: var(--bg2);
}

/* ── Template Sections — persona cards ── */
.cs-light-body .cs-persona-grid {
  background: transparent;
  border: none;
  gap: 1.5rem;
}

.cs-light-body .cs-persona-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.25s, transform 0.25s;
}

.cs-light-body .cs-persona-card:hover {
  background: #ffffff;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.13);
  transform: translateY(-4px);
}

.cs-light-body .cs-persona-role {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ── Challenge cards ── */
.cs-light-body .cs-challenge-grid {
  gap: 1.25rem;
}

.cs-light-body .cs-challenge-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

/* ── Research cards ── */
.cs-light-body .cs-research-grid {
  gap: 1.25rem;
}

.cs-light-body .cs-research-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-research-card::after {
  opacity: 0.25;
}

/* ── User Stories table ── */
.cs-light-body .cs-stories-wrap {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-stories-table tbody tr:hover {
  background: var(--bg2);
}

/* ── Competitor table ── */
.cs-light-body .cs-comp-wrap {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-comp-table thead tr {
  background: var(--bg3);
  border-bottom: 2px solid var(--accent);
}

.cs-light-body .cs-comp-table thead th {
  color: var(--text-primary);
}

.cs-light-body .cs-comp-table thead th.cs-comp-us {
  background: var(--accent-dim);
  color: var(--accent);
}

.cs-light-body .cs-comp-table td {
  color: var(--text-muted);
}

.cs-light-body .cs-comp-table td:first-child {
  color: var(--text-secondary);
}

.cs-light-body .cs-comp-table tbody tr:hover {
  background: var(--bg2);
}

.cs-light-body .cs-comp-table td.cs-comp-us {
  background: var(--accent-dim);
}

/* ── Flow steps ── */
.cs-light-body .cs-flow-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-flow-step {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

.cs-light-body .cs-flow-step:hover {
  background: var(--bg2);
}

/* ── Toolkit ── */
.cs-light-body .cs-toolkit-grid {
  gap: 1rem;
}

.cs-light-body .cs-tool {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.cs-light-body .cs-tool:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: none;
}

/* ── Why/cause cards ── */
.cs-light-body .cs-why-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* ── tmpl-section-bg ── */
.cs-light-body .cs-tmpl-section-bg {
  background: var(--bg2);
  border-color: rgba(0, 0, 0, 0.07);
}

/* ══════════════════════════════════════════
   READABILITY & UX — WCAG AA + UX Laws
   Miller's Law · Fitts's Law · Gestalt · WCAG 2.1 AA
═══════════════════════════════════════════ */

/* ── 1. Fix --text-muted contrast on white (WCAG AA: 4.5:1) ──
   #94a3b8 on white = ~2.5:1  →  FAILS
   #64748b on white = ~4.6:1  →  PASSES                        */
.cs-light-body {
  --text-muted: #64748b;
}

/* ── 2. Remove font-weight: 300 from body content ──
   300 weight on white fails readability at any contrast ratio  */
.cs-light-body .cs-body-text,
.cs-light-body .cs-insight-body,
.cs-light-body .cs-step-body,
.cs-light-body .cs-metric-desc,
.cs-light-body .cs-tmpl-desc,
.cs-light-body .cs-challenge-body,
.cs-light-body .cs-research-body {
  font-weight: 400;
}

/* ── 3. Minimum body-text size — 14.4px (0.9rem) floor ──
   WCAG SC 1.4.4 + legibility on HiDPI screens               */
.cs-light-body .cs-body-text {
  font-size: 1rem;
  line-height: 1.85;
}

.cs-light-body .cs-challenge-body,
.cs-light-body .cs-research-body {
  font-size: 0.9rem;
  line-height: 1.8;
}

.cs-light-body .cs-persona-list li {
  font-size: 0.875rem;
}

.cs-light-body .cs-flow-step-body {
  font-size: 0.82rem;
  line-height: 1.7;
}

.cs-light-body .cs-stories-table td {
  font-size: 0.9rem;
  line-height: 1.7;
}

.cs-light-body .cs-why-list li {
  font-size: 0.9rem;
  line-height: 1.75;
}

.cs-light-body .cs-tool-name {
  font-size: 0.875rem;
}

/* ── 4. Fix competitor table text — muted cells invisible on white ── */
.cs-light-body .cs-comp-table td {
  color: #475569;
}

.cs-light-body .cs-cross {
  color: #94a3b8;
}

/* was rgba(255,255,255,0.15) = invisible */

/* ── 5. Visual hierarchy — bolder card headings (Gestalt: Figure/Ground) ── */
.cs-light-body .cs-persona-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.cs-light-body .cs-challenge-title {
  font-size: 1rem;
  font-weight: 700;
}

.cs-light-body .cs-research-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.cs-light-body .cs-flow-step-label {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── 6. Fitts's Law — 44px minimum touch targets on interactive elements ── */
.cs-hero-cta {
  min-height: 48px;
}

.cs-nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── 7. Focus-visible states — WCAG 2.4.7 keyboard navigation ── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 8. Nav text contrast — #94a3b8 fails 4.5:1 on white ── */
.cs-nav-links a {
  color: #64748b !important;
}

.cs-nav-links a:hover,
.cs-nav-links a.active {
  color: var(--accent) !important;
}

.cs-nav-title {
  color: #64748b !important;
}

/* ── 9. Gestalt proximity — tighter list item spacing ── */
.cs-light-body .cs-persona-list {
  gap: 0.5rem;
}

.cs-light-body .cs-why-list {
  gap: 0.65rem;
}

/* ── 10. Responsive font-size adjustments ── */
@media (max-width: 768px) {
  .cs-light-body .cs-body-text {
    font-size: 0.95rem;
  }

  .cs-light-body .cs-challenge-body,
  .cs-light-body .cs-research-body {
    font-size: 0.875rem;
  }
}

/* ══════════════════════════════════════════
   SHARED IMAGE SHOWCASE + LIGHTBOX
   Used by all case study design sections
═══════════════════════════════════════════ */

/* ── Image hero (full-width featured screenshot) ── */
.cs-img-hero {
  margin-top: 3.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 32px 90px rgba(0, 0, 0, 0.6), 0 0 80px var(--accent-glow);
  cursor: zoom-in;
}

.cs-img-chrome {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cs-img-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cs-img-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.cs-img-dots span:nth-child(1) {
  background: #ff5f57;
}

.cs-img-dots span:nth-child(2) {
  background: #febc2e;
}

.cs-img-dots span:nth-child(3) {
  background: #28c840;
}

.cs-img-url {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0.28rem 0.75rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-img-hero>img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ── 3-column image grid ── */
.cs-img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cs-img-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: zoom-in;
}

.cs-img-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 40px var(--accent-glow);
}

.cs-img-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-img-caption {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.75rem;
}

/* ── Lightbox ── */
.cs-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
}

.cs-lightbox.open {
  display: flex;
}

.cs-lb-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 80px var(--accent-glow);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cs-lb-img.transitioning {
  opacity: 0;
  transform: scale(0.96);
}

.cs-lb-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10000;
}

.cs-lb-close:hover {
  background: var(--accent-dim);
}

.cs-lb-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
  z-index: 10000;
}

.cs-lb-arrow:hover {
  background: var(--accent-dim);
}

.cs-lb-prev {
  left: 1.25rem;
}

.cs-lb-next {
  right: 1.25rem;
}

.cs-lb-dots {
  position: fixed;
  bottom: 2.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10000;
}

.cs-lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  border: none;
}

.cs-lb-dot.active {
  background: var(--accent);
  transform: scale(1.45);
}

.cs-lb-counter {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  z-index: 10000;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cs-img-grid {
    grid-template-columns: 1fr;
  }

  .cs-img-hero>img {
    height: 260px;
  }

  .cs-img-item img {
    height: 200px;
  }

  .cs-lb-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
}

/* ── SHARED JS SCRIPT (inline in each page) ── */