/* ═══════════════════════════════════════════════════════════
   RAHUL VERMA — Portfolio Design System
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Fonts */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Ink — all values WCAG AA compliant on both --bg and --surface */
  --ink: #1a1a1a;
  --ink-2: #444;
  --ink-3: #6e6e6e;   /* 4.88:1 on bg, 4.59:1 on surface — AA ✅ */
  --ink-4: #767676;   /* 4.54:1 on bg — decorative/secondary use only */

  /* Surfaces */
  --bg: #FAFAF8;
  --surface: #F3F3F0;
  --white: #fff;

  /* Accent */
  --accent: #6750E8;
  --accent-light: rgba(103, 80, 232, 0.08);

  /* Project gradients — 3-stop */
  --agenz: linear-gradient(135deg, #EDEFFF 0%, #DDD9FF 50%, #D0CBFF 100%);
  --dashboard: linear-gradient(135deg, #E0F5EE 0%, #C4EDDF 50%, #B0E8D4 100%);
  --ai-skins: linear-gradient(135deg, #F0EAFF 0%, #E2D8FF 50%, #D5C8FF 100%);
  --acton: linear-gradient(135deg, #E5FAF0 0%, #CCF2E3 50%, #B8EDD8 100%);
  --threatfeeds: linear-gradient(135deg, #FFF0ED 0%, #FFE2DA 50%, #FFD6CC 100%);
  --narrative: linear-gradient(135deg, #FFF5E5 0%, #FFE8D8 50%, #FFDFCC 100%);
  --nymo: linear-gradient(135deg, #EAF5E2 0%, #D6EDCA 50%, #C6E6B5 100%);

  /* Flat backgrounds for case study pages */
  --agenz-bg: #EDEFFF;
  --dashboard-bg: #E0F5EE;
  --ai-skins-bg: #F0EAFF;
  --acton-bg: #E5FAF0;
  --threatfeeds-bg: #FFF0ED;
  --narrative-bg: #FFF5E5;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0,0,0,0.04);
  --sh-md: 0 8px 24px rgba(0,0,0,0.06);
  --sh-lg: 0 16px 48px rgba(0,0,0,0.08);
  --sh-xl: 0 24px 64px rgba(0,0,0,0.12);

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Layout */
  --max-w: 1200px;
  --gutter: 24px;

  /* Cursor Reveal */
  --cursor-radius: 90px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
}

h2 { font-size: clamp(32px, 5vw, 48px); }
h2 em { font-style: italic; }

p { color: var(--ink-2); line-height: 1.7; }

strong { font-weight: 600; color: var(--ink); }

/* ─── Page Transition ────────────────────────────────────── */
.page-enter {
  animation: pageEnter 0.5s ease both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Noise Overlay ──────────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

/* ─── Progress Bar ───────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 10001;
  width: 0;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ─── Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 100px 0;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-family: var(--sans);
}

.section-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--ink-4);
}

.section-desc {
  max-width: 560px;
  color: var(--ink-3);
  font-size: 17px;
  margin-top: 12px;
  line-height: 1.65;
}

/* ─── Navigation ─────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.scrolled {
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 32px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nav-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color 0.2s;
  position: relative;
}

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

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.btn-primary:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(0,0,0,0.15);
}

.btn-outline:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn-white {
  background: #fff;
  color: var(--ink);
  border-color: rgba(0,0,0,0.08);
}

.btn-white:hover {
  border-color: rgba(0,0,0,0.2);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.btn-sm {
  padding: 8px 20px;
  font-size: 13px;
}

/* ─── Tags ───────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: 0.02em;
}

/* Tag colors — text values verified WCAG AA 4.5:1 on tinted bg ✅ */
.tag-accent { background: rgba(103, 80, 232, 0.1); color: #5040c8; } /* 4.56:1 ✅ */
.tag-dark   { background: rgba(0, 0, 0, 0.06);     color: var(--ink-2); }
.tag-green  { background: rgba(5, 150, 105, 0.1);  color: #047955; } /* 4.64:1 ✅ */
.tag-teal   { background: rgba(8, 145, 178, 0.1);  color: #06728c; } /* 4.64:1 ✅ */
.tag-amber  { background: rgba(217, 119, 6, 0.1);  color: #a45a04; } /* 4.59:1 ✅ */
.tag-coral  { background: rgba(232, 79, 54, 0.1);  color: #bb3f2b; } /* 4.62:1 ✅ */
.tag-purple { background: rgba(124, 58, 237, 0.1); color: #5c27c0; } /* passes on tinted bg */

/* ─── NETENRICH Logo SVG ─────────────────────────────────── */
.neten-logo-svg {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

.neten-logo-svg img {
  height: 14px;
  width: auto;
  display: block;
}

/* Show light logo by default, dark logo hidden */
.neten-logo-dark { display: none !important; }
[data-theme="dark"] .neten-logo-light { display: none !important; }
[data-theme="dark"] .neten-logo-dark { display: block !important; }

/* Small variant used in testimonials */
.neten-logo-svg--sm img { height: 11px; }

/* Nymo logo */
.nymo-logo-svg {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}
.nymo-logo-svg img {
  height: 18px;
  width: auto;
  display: block;
}

/* Text paths switch color in dark mode (legacy inline SVG support) */
.neten-logo-text { fill: #3A3A3B; }
[data-theme="dark"] .neten-logo-text { fill: #E4E2DC; }

/* ─── Social Icons ───────────────────────────────────────── */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  color: var(--ink-3);
  transition: all 0.25s;
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.social-icon:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}

/* ─── Hero Canvas ──────────────────────────────────────────── */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


.hero-inner {
  max-width: 820px;
  position: relative;
  z-index: 1;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 32px;
  box-shadow: var(--sh-sm);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #059669;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Hero title with word animation */
.hero-title {
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1.08;
  margin-bottom: 24px;
  font-family: var(--serif);
}

.hero-title em {
  font-style: italic;
  color: var(--ink);
}

.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 4px;
}

.hero-title .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

.hero-title .word-inner.animated {
  animation: wordReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wordReveal {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.hero-sub {
  font-size: 18px;
  color: var(--ink-3);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* Hero actions */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.hero-social {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}

/* Hero stats */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
}

.stat-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 500;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--ink-4), transparent);
  animation: scrollBounce 2s ease infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════
   TOOLS MARQUEE
   ═══════════════════════════════════════════════════════════ */
.tools-section {
  overflow: hidden;
  background: #111827;
}
.tools-section .container { margin-bottom: 48px; }

/* Text overrides on dark background */
.tools-section .section-label {
  color: rgba(255,255,255,0.45);
}
.tools-section .section-label::before {
  background: rgba(255,255,255,0.2);
}
.tools-section h2 {
  color: #fff;
}
.tools-section h2 em {
  color: rgba(255,255,255,0.75);
}
.tools-section .section-desc {
  color: rgba(255,255,255,0.5);
}

.work-continued { padding-top: 0; }

.tools-marquee-wrap {
  width: 100%;
  overflow: hidden;
  padding-bottom: 8px;
}

.tools-marquee {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 40px 16px;
  animation: tools-scroll 40s linear infinite;
}

.tools-marquee:hover { animation-play-state: paused; }

@keyframes tools-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card */
.tool-card {
  width: 300px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

/* Preview area */
.tool-preview {
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  gap: 10px;
}

/* Preview backgrounds */
.tp-svg-anim { background: #111827; }
.tp-micro    { background: #f0eeff; }
.tp-icons    { background: #FAFAF3; }
.tp-brand    { background: #e8f5f0; }

/* ── SVG Anim rings ── */
.tp-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.18);
  animation: ring-spin 10s linear infinite;
}
.tp-ring-1 { width: 64px;  height: 64px;  }
.tp-ring-2 { width: 96px;  height: 96px;  animation-duration: 15s; animation-direction: reverse; }
.tp-ring-3 { width: 130px; height: 130px; animation-duration: 22s; }
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.tp-center-icon { position: relative; z-index: 2; color: #fff; }
.tp-hint { position: absolute; bottom: 12px; font-size: 11px; color: rgba(255,255,255,0.4); font-family: var(--sans); }

/* ── Micro interaction ── */
.tp-icon-row { display: flex; gap: 12px; align-items: center; }
.tp-micro-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(103,80,232,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #9E86FF;
}
.tp-micro-active {
  background: #6750E8; border-color: #6750E8; color: #fff;
  box-shadow: 0 4px 16px rgba(103,80,232,0.4);
  transform: scale(1.12);
}
.tp-badge {
  font-size: 11px; font-weight: 600; font-family: var(--sans);
  padding: 3px 10px; border-radius: 99px;
}
.tp-badge-green { background: rgba(5,150,105,0.1); color: #059669; }
.tp-code { font-size: 10px; color: rgba(0,0,0,0.3); font-family: monospace; }

/* ── Icon grid ── */
.tp-prompt-bar {
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 7px; padding: 6px 12px; width: 210px;
}
.tp-prompt-text { font-size: 11px; color: var(--ink-3); font-family: var(--sans); flex: 1; }
.tp-cursor { color: #6750E8; animation: tp-blink 1s step-end infinite; }
@keyframes tp-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.tp-icon-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 7px; width: 138px;
}
.tp-gi {
  width: 36px; height: 36px; border-radius: 7px;
  background: #fff; border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-3);
}
.tp-gi-active { background: #6750E8; border-color: #6750E8; color: #fff; }

/* ── Brand scraper ── */
.tp-swatches { display: flex; gap: 5px; }
.tp-swatch   { width: 30px; height: 30px; border-radius: 7px; }
.tp-layout   { display: flex; flex-direction: column; gap: 6px; width: 200px; }
.tp-lb       { background: rgba(26,46,36,0.14); border-radius: 4px; }

/* Info area */
.tool-info {
  padding: 20px 22px 22px;
  flex: 1; display: flex; flex-direction: column;
}
.tool-name {
  font-size: 14px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; font-family: var(--sans);
}
.tool-desc {
  font-size: 13px; color: var(--ink-3);
  line-height: 1.55; flex: 1; margin-bottom: 10px;
}
.tool-impact {
  font-size: 12px; font-weight: 600;
  color: var(--ink-2); font-family: var(--sans); margin-bottom: 10px;
}
.tool-cta {
  font-size: 13px; font-weight: 600;
  color: var(--ink); font-family: var(--sans);
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS GRID
   ═══════════════════════════════════════════════════════════ */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

.project-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  min-height: 450px;
  /* entrance animation — set by JS data-dir */
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Even-numbered cards flip (image on right) */
.project-card.flip {
  flex-direction: row-reverse;
}

.project-card:hover {
  transform: translateY(-6px) scale(1.003) !important;
  box-shadow: var(--sh-xl);
  border-color: rgba(103, 80, 232, 0.12);
}

/* ── Directional entrance animation ─────────────────────── */
.project-card[data-dir="left"]  { opacity: 0; transform: translateX(-56px); }
.project-card[data-dir="right"] { opacity: 0; transform: translateX(56px);  }
.project-card[data-dir].card-visible {
  opacity: 1;
  transform: translateX(0) !important;
}

.project-thumb {
  padding: 40px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44%;
  max-width: 44%;
  min-height: 450px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.mock-screen {
  background: #fff;
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-card:hover .mock-screen {
  animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.mock-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  margin-bottom: 6px;
}

.project-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.project-title {
  font-size: 22px;
  font-family: var(--serif);
  line-height: 1.3;
  margin-bottom: 10px;
}

.project-desc {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.65;
}

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  gap: 12px;
}

.project-impact strong {
  color: var(--ink);
  font-weight: 700;
}

.project-impact {
  font-size: 13px;
  color: var(--ink-2);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-full);
  padding: 8px 16px;
  line-height: 1.5;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: gap 0.2s;
}

.project-card:hover .arrow-link {
  gap: 10px;
}

.arrow-icon {
  display: inline-block;
  transition: transform 0.3s;
}

.project-card:hover .arrow-icon {
  transform: rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════
   OLD WORKS
   ═══════════════════════════════════════════════════════════ */
.old-works {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.old-works h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 10px;
}

.old-works p {
  color: rgba(255,255,255,0.6);
  max-width: 420px;
  margin-bottom: 20px;
}

.old-works .section-label {
  color: rgba(255,255,255,0.45);
}

.old-works .section-label::before {
  background: rgba(255,255,255,0.2);
}

.old-works-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.work-chip {
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.about-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 8px;
}

.about-photo-wrap {
  background: #161614;  /* always dark — matches dark mode look in both light & dark */
  border-radius: 20px;
  overflow: hidden;
  width: 220px;     /* smaller, more portrait-style */
  line-height: 0;
}

.about-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%);
  transform: scaleX(-1);
}

/* Connect block sits below photo in right column */
.about-connect {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  width: 220px;   /* match photo width */
  text-align: center;
}

.about-connect-msg {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-style: italic;
}

.about-connect-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-text p {
  margin-bottom: 16px;
  font-size: 16px;
}

/* About Principles */
.about-principles {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ap-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.ap-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  min-width: 22px;
  padding-top: 2px;
  font-family: var(--sans);
}

.ap-item strong {
  font-size: 14px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
}

.ap-item p {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.testimonial-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.quote-mark {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  margin-bottom: 8px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}

.testimonial-author {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 16px;
}

.author-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.author-role {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.company-text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT CTA
   ═══════════════════════════════════════════════════════════ */
.contact-cta {
  text-align: center;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 64px 40px;
  border: 1px solid rgba(0,0,0,0.05);
}

.contact-cta .section-desc {
  margin: 12px auto 36px;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--surface);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.25s;
  border: 1px solid rgba(0,0,0,0.04);
}

.contact-link svg {
  width: 20px;
  height: 20px;
}

.contact-link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 32px;
  margin-top: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

.footer-heading {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

.footer-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  color: #fff;
  transition: background 0.2s;
  margin-bottom: 4px;
}

.footer-link-card:hover {
  background: rgba(255,255,255,0.06);
}

.footer-link-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.footer-link-icon svg {
  width: 18px;
  height: 18px;
}

.footer-link-name {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}

.footer-link-arrow {
  color: rgba(255,255,255,0.3);
  font-size: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

.footer-bottom a {
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}

.footer-bottom a:hover {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — HERO
   ═══════════════════════════════════════════════════════════ */
.cs-hero {
  padding: 120px 0 80px;
  position: relative;
}

.cs-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 28px;
  transition: color 0.2s, gap 0.2s;
}

.cs-back:hover {
  color: var(--ink);
  gap: 10px;
}

.cs-category {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cs-title {
  font-size: clamp(36px, 5.5vw, 60px);
  font-family: var(--serif);
  line-height: 1.1;
  max-width: 750px;
  margin-bottom: 32px;
}

.cs-title em {
  font-style: italic;
}

/* Case study metrics */
.cs-metrics {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.cs-metric-value {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}

.cs-metric-label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
}

/* Hero image area */
.cs-hero-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

/* Real screenshot inside hero */
.cs-hero-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-xl);
}

/* Real screenshots inside solution cards */
.cs-solution-visual img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  border-radius: var(--r-md);
}

/* Full-width image layout — used when card visual contains a real screenshot */
.cs-solution-card--img {
  grid-template-columns: 1fr;
  /* Break out wider than cs-narrow's 860px cap */
  width: calc(100% + 240px);
  margin-left: -120px;
  margin-right: -120px;
}
.cs-solution-card--img .cs-solution-text {
  padding: 32px 40px 24px;
  max-width: 680px;
}
.cs-solution-card--img .cs-solution-visual {
  padding: 0;
  background: transparent;
  min-height: unset;
  display: block;
}
.cs-solution-card--img .cs-solution-visual img,
.cs-solution-card--img .cs-solution-visual video {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
  border-radius: 0;
  display: block;
}
/* Only the very last media element gets rounded card-bottom corners */
.cs-solution-card--img .cs-solution-visual img:last-child,
.cs-solution-card--img .cs-solution-visual video:last-child {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.cs-solution-card--img.cs-solution-card:nth-child(even) {
  direction: ltr;
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — CONTENT
   ═══════════════════════════════════════════════════════════ */
.cs-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter) 100px;
}

/* ─── Project Summary Card ───────────────────────────────── */
.cs-summary {
  padding: 0 var(--gutter) 64px;
  margin: -32px 0 0;
}

.cs-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--r-xl);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* Full-width header row */
.cs-summary__header {
  grid-column: 1 / -1;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-summary__header-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cs-summary__header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.cs-summary__item {
  padding: 28px 28px 32px;
  border-right: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.cs-summary__label {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  display: block;
  letter-spacing: -0.01em;
}

.cs-summary__value {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

[data-theme="dark"] .cs-summary__grid {
  background: var(--surface);
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

[data-theme="dark"] .cs-summary__header,
[data-theme="dark"] .cs-summary__item {
  border-color: rgba(255,255,255,0.07);
}

[data-theme="dark"] .cs-summary__label {
  color: var(--ink);
}

@media (max-width: 768px) {
  .cs-summary__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-summary__item {
    padding: 22px 20px 26px;
  }
  .cs-summary__item:nth-child(3) { border-right: none; }
  .cs-summary__item:nth-child(2),
  .cs-summary__item:nth-child(3) {
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
}

.cs-section {
  padding: 64px 0;
}

.cs-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-family: var(--sans);
}

.cs-h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Problem grid */
.cs-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.cs-problem-card {
  padding: 24px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
}

.cs-problem-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cs-problem-card p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Persona grid */
.cs-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.cs-persona-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}

.cs-persona-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.cs-persona-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.cs-persona-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cs-persona-card p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Solutions */
.cs-solutions {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 15vh, 140px);
  margin-top: 32px;
}

.cs-solution-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

.cs-solution-card:nth-child(even) {
  direction: rtl;
}

.cs-solution-card:nth-child(even) > * {
  direction: ltr;
}

.cs-solution-text {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-solution-text .cs-sol-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-family: var(--sans);
}

.cs-img-caption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0 2px;
}

.cs-solution-text h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.cs-solution-text p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.65;
}

.cs-solution-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 260px;
  overflow: hidden;
  background: rgba(0,0,0,0.03);
}

/* Impact / metrics row in case study body */
.cs-metrics-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.cs-impact-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  flex: 1;
  min-width: 160px;
}

/* Quotes */
.cs-quote {
  background: #fff;
  border-radius: var(--r-md);
  padding: 28px 32px;
  border-left: 3px solid var(--accent);
  margin: 20px 0;
  font-size: 15px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.7;
}

.cs-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Highlight box */
.cs-highlight {
  border-radius: var(--r-md);
  padding: 28px 32px;
  margin: 20px 0;
}

.cs-highlight p {
  font-size: 15px;
  line-height: 1.7;
}

/* Learnings */
.cs-learnings {
  border-radius: var(--r-lg);
  padding: 40px;
  margin: 48px 0 0;
}

.cs-learnings h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 20px;
}

.cs-learnings ul {
  list-style: none;
  padding: 0;
}

.cs-learnings li {
  padding: 10px 0;
  padding-left: 24px;
  position: relative;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cs-learnings li:last-child {
  border-bottom: none;
}

.cs-learnings li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Project nav at bottom */
.cs-project-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 56px 0 0;
}

.cs-nav-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.25s;
  text-align: center;
}

.cs-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(103, 80, 232, 0.15);
}

.cs-nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.cs-nav-title {
  font-family: var(--serif);
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — COMPARE (Before/After)
   ═══════════════════════════════════════════════════════════ */
.cs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0;
}

.cs-compare-side {
  border-radius: var(--r-md);
  padding: 28px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.cs-compare-side h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — COLOR SWATCHES
   ═══════════════════════════════════════════════════════════ */
.cs-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.cs-swatch {
  text-align: center;
}

.cs-swatch-color {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}

.cs-swatch-label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--sans);
}

.cs-swatch-hex {
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--sans);
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — PATTERN GRID (AI Skins)
   ═══════════════════════════════════════════════════════════ */
.cs-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.cs-pattern-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 28px 24px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}

.cs-pattern-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.cs-pattern-num {
  font-family: var(--serif);
  font-size: 40px;
  color: rgba(103, 80, 232, 0.15);
  line-height: 1;
  margin-bottom: 12px;
}

.cs-pattern-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cs-pattern-card p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — TIMELINE
   ═══════════════════════════════════════════════════════════ */
.cs-timeline {
  position: relative;
  padding-left: 28px;
}

.cs-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(103,80,232,0.15));
  border-radius: 1px;
}

.cs-timeline-item {
  position: relative;
  padding-bottom: 28px;
  display: flex;
  gap: 16px;
}

.cs-timeline-item:last-child {
  padding-bottom: 0;
}

.cs-timeline-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  flex-shrink: 0;
  z-index: 1;
}

.cs-timeline-content {
  flex: 1;
}

.cs-timeline-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
  font-family: var(--sans);
}

.cs-timeline-title {
  font-family: var(--serif);
  font-size: 18px;
  margin-bottom: 4px;
}

.cs-timeline-desc {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — COMIC GRID (Narrative)
   ═══════════════════════════════════════════════════════════ */
.cs-comic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.cs-comic-panel {
  background: #fff;
  border: 2px solid rgba(232,79,54,0.12);
  border-radius: var(--r-md);
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}

.cs-comic-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(232,79,54,0.1);
}

.cs-comic-panel .panel-emoji {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}

.cs-comic-panel .panel-number {
  font-size: 10px;
  font-weight: 700;
  color: #E84F36;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cs-comic-panel h4 {
  font-size: 16px;
  margin: 0 0 8px;
}

.cs-comic-panel p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY — TABLE
   ═══════════════════════════════════════════════════════════ */
.cs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.cs-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 16px;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  font-family: var(--sans);
}

.cs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: var(--ink-2);
  vertical-align: top;
}

.cs-table tr:hover td {
  background: rgba(0,0,0,0.015);
}

/* ═══════════════════════════════════════════════════════════
   BUTTON RIPPLE
   ═══════════════════════════════════════════════════════════ */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════════════ */
.custom-cursor { cursor: none; }
.custom-cursor a,
.custom-cursor button,
.custom-cursor .btn,
.custom-cursor .project-card,
.custom-cursor .social-icon { cursor: none; }

.cursor-dot, .cursor-circle {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.cursor-dot {
  width: 10px; height: 10px;
  background: #fff;
  mix-blend-mode: difference;
  transition: opacity 0.3s, transform 0.15s;
}

.cursor-dot--click {
  transform: scale(0.6);
}

.cursor-circle {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, width 0.25s, height 0.25s, border-color 0.25s;
  will-change: transform;
  mix-blend-mode: difference;
}

.cursor-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.cursor--card .cursor-label { opacity: 1; color: #fff; }
.cursor--card {
  background: rgba(15, 15, 15, 0.88);
  border-color: transparent;
  mix-blend-mode: normal;
}
.cursor--link { border-color: rgba(255,255,255,0.75); }
.cursor--text { border-color: rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════════════════════
   3D CARD TILT
   ═══════════════════════════════════════════════════════════ */
.project-card {
  transform-style: preserve-3d;
}

.project-card .mock-screen {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255,255,255,0.1) 0%, transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}

.project-card:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   MORPH TRANSITION OVERLAY
   ═══════════════════════════════════════════════════════════ */
.morph-overlay {
  position: fixed;
  z-index: 9998;
  will-change: top, left, width, height, border-radius;
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.morph-overlay--expand {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

.morph-overlay--incoming {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.morph-overlay--reveal {
  animation: morphReveal 0.65s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes morphReveal {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(8% 4% 55% 4% round 24px); }
}

/* ═══════════════════════════════════════════════════════════
   INTRO / LOADING SEQUENCE
   ═══════════════════════════════════════════════════════════ */
#introOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

#introOverlay.exit {
  animation: introExit 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes introExit {
  0%   { clip-path: inset(0); opacity: 1; }
  100% { clip-path: inset(50% 0); opacity: 0; }
}

.intro-content {
  text-align: center;
}

.intro-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0;
  animation: introFadeUp 0.4s 0.15s ease forwards;
}

.intro-line {
  width: 48px;
  height: 1px;
  background: var(--ink-4);
  margin: 12px auto;
  transform: scaleX(0);
  animation: introLineGrow 0.4s 0.45s ease forwards;
}

.intro-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: introFadeUp 0.4s 0.55s ease forwards;
}

@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes introLineGrow {
  to { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS (Progressive Enhancement)
   ═══════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  .section h2, .cs-h2 {
    animation: textScrub linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

@keyframes textScrub {
  from { opacity: 0.1; filter: blur(3px); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

/* Social icon hover animations */
.social-spin {
  animation: socialSpin 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes socialSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.social-bounce {
  animation: socialBounce 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes socialBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(-2px); }
}

.social-wiggle {
  animation: socialWiggle 0.4s ease;
}
@keyframes socialWiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* Tag bounce on card hover */
.project-card:hover .tag {
  animation: tagBounce 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.project-card:hover .tag:nth-child(2) { animation-delay: 0.05s; }
.project-card:hover .tag:nth-child(3) { animation-delay: 0.1s; }

@keyframes tagBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Quote mark wobble */
.quote-wobble {
  animation: quoteWobble 0.5s ease;
}
@keyframes quoteWobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Skill icon spin on click */
.spin-click {
  animation: spinClick 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes spinClick {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Footer year bounce */
.footer-year-bounce {
  animation: footerBounce 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes footerBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Konami easter egg */
.konami-active .ink-canvas {
  opacity: 1 !important;
  transition: opacity 0.3s;
}

/* Logo easter egg */
.logo-easter-egg .nav-logo {
  animation: logoEaster 1.5s ease;
}
@keyframes logoEaster {
  0%, 100% { transform: none; color: var(--ink); }
  25% { transform: rotate(-3deg) scale(1.1); color: var(--accent); }
  50% { transform: rotate(3deg) scale(1.1); color: #E84F36; }
  75% { transform: rotate(-1deg) scale(1.05); color: #059669; }
}

/* Arrow overshoot on card hover */
.project-card:hover .arrow-icon {
  animation: arrowOvershoot 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes arrowOvershoot {
  0% { transform: rotate(0); }
  60% { transform: rotate(-50deg); }
  100% { transform: rotate(-45deg); }
}

/* ═══════════════════════════════════════════════════════════
   MAGNETIC EFFECT (legacy, now handled by JS spring)
   ═══════════════════════════════════════════════════════════ */
.magnetic {
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ═══════════════════════════════════════════════════════════
   SHIMMER (decorative)
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .cs-solution-card:nth-child(even) {
    direction: ltr;
  }

  .cs-solution-card--img {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

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

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

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .old-works {
    flex-direction: column;
    text-align: center;
    padding: 40px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ink-canvas { opacity: 0.4; }
  .cursor-dot, .cursor-circle { display: none; }
  .custom-cursor { cursor: auto; }
  #introOverlay { display: none; }
  .morph-overlay { display: none; }
  .ripple { animation: none; }
  .project-card::after { display: none; }
}

@media (max-width: 768px) {
  .cursor-dot, .cursor-circle { display: none; }
  .custom-cursor { cursor: auto; }

  :root {
    --gutter: 18px;
  }

  .section {
    padding: 72px 0;
  }

  nav {
    padding: 16px 18px;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: 100px 18px 60px;
  }

  .hero-title {
    font-size: clamp(36px, 9vw, 52px);
  }

  .hero-stats {
    gap: 28px;
  }

  .stat-number {
    font-size: 28px;
  }

  .projects-grid {
    gap: 18px;
  }

  /* Cards stack vertically on mobile */
  .project-card,
  .project-card.flip {
    flex-direction: column !important;
    min-height: unset;
  }

  .project-thumb {
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .cs-title {
    font-size: clamp(30px, 7vw, 48px);
  }

  .cs-metrics {
    gap: 24px;
  }

  .cs-hero-img {
    padding: 24px 16px;
  }

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

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

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

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

  .cs-learnings {
    padding: 28px;
  }

  .contact-cta {
    padding: 40px 24px;
  }
}

@media (max-width: 500px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-social {
    margin-left: 0;
    margin-top: 4px;
  }

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

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

  .cs-metrics {
    flex-direction: column;
    gap: 16px;
  }

  .contact-links {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

/* ─── Theme Toggle Button ─────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 17px; height: 17px; pointer-events: none; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

/* ─── Dark Tokens ─────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:          #E4E2DC;
  --ink-2:        #B8B5AE;
  --ink-3:        #908E88;   /* 4.56:1 on surface, 5.05:1 on bg — AA ✅ */
  --ink-4:        #6b6965;   /* decorative only — passes on bg, not surface */
  --bg:           #0A0A09;   /* deeper black for more contrast */
  --surface:      #161614;   /* darker surface, better separation */
  --white:        #1C1C1A;
  --accent:       #8A78F2;
  --accent-light: rgba(138,120,242,0.14);
  --sh-sm:        0 2px 8px  rgba(0,0,0,0.35);
  --sh-md:        0 8px 24px rgba(0,0,0,0.45);
  --sh-lg:        0 16px 48px rgba(0,0,0,0.55);
  --sh-xl:        0 24px 64px rgba(0,0,0,0.65);

  /* Muted project gradients for dark */
  --agenz:      linear-gradient(135deg,#1E1D30 0%,#221F3A 50%,#272344 100%);
  --dashboard:  linear-gradient(135deg,#152820 0%,#1A3028 50%,#1E3A30 100%);
  --ai-skins:   linear-gradient(135deg,#1E1B2E 0%,#231F38 50%,#282342 100%);
  --acton:      linear-gradient(135deg,#162820 0%,#1C3228 50%,#223C30 100%);
  --threatfeeds:linear-gradient(135deg,#2A1E1A 0%,#302018 50%,#382215 100%);
  --narrative:  linear-gradient(135deg,#2A2010 0%,#30240E 50%,#38280C 100%);
  --nymo:       linear-gradient(135deg,#142010 0%,#1A2A14 50%,#1E3018 100%);
}

/* ─── Global transitions on theme switch ─────────────────── */
body, nav, .hero, section, .project-card, .testimonial-card,
.contact-cta, .site-footer, .old-works, .tool-card,
.btn, input, .nav-link, .footer-link-card, .work-chip {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease;
}

/* ─── Nav ─────────────────────────────────────────────────── */
[data-theme="dark"] nav {
  background: rgba(10,10,9,0.92);
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .theme-toggle {
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ─── Buttons ─────────────────────────────────────────────── */
/* Primary: --ink in dark = #E4E2DC (light), so flip to dark bg + light text
   #E4E2DC bg / #111110 text = ~15.5:1 — WCAG AAA ✓ */
[data-theme="dark"] .btn-primary {
  background: var(--ink);       /* #E4E2DC — warm off-white */
  color: var(--bg);             /* #111110 — near-black     */
  border-color: var(--ink);
}
[data-theme="dark"] .btn-primary:hover {
  background: #f0eeea;
  border-color: #f0eeea;
}

/* Outline: border visible, text readable against dark bg
   #E4E2DC text / #111110 bg = ~15.5:1 — WCAG AAA ✓ */
[data-theme="dark"] .btn-outline {
  border-color: rgba(228,226,220,0.35);
  color: var(--ink);
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(228,226,220,0.6);
}

[data-theme="dark"] .btn-white {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .btn-white:hover {
  background: rgba(255,255,255,0.13);
}

/* ─── Noise overlay ───────────────────────────────────────── */
[data-theme="dark"] .noise-overlay { opacity: 0.3; }

/* ─── Cards ───────────────────────────────────────────────── */
[data-theme="dark"] .project-card {
  background: var(--surface);
  border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .project-card:hover {
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .testimonial-card {
  background: var(--surface);
  border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .tool-card {
  border-color: rgba(255,255,255,0.06);
}

/* ─── Contact CTA ─────────────────────────────────────────── */
[data-theme="dark"] .contact-cta {
  background: var(--surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .contact-link {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
[data-theme="dark"] .contact-link:hover {
  background: rgba(255,255,255,0.09);
}

/* ─── Old Works ───────────────────────────────────────────── */
[data-theme="dark"] .old-works {
  background: #2A2A28;
}

/* ─── Footer ──────────────────────────────────────────────── */
[data-theme="dark"] .site-footer {
  background: #EDEBE5;   /* inverted: cream footer on dark page — clearly distinct */
  color: #1a1a1a;
}
[data-theme="dark"] .footer-heading {
  color: rgba(0,0,0,0.45);
}
[data-theme="dark"] .footer-link-card {
  color: #1a1a1a;
}
[data-theme="dark"] .footer-link-card:hover {
  background: rgba(0,0,0,0.06);
}
[data-theme="dark"] .footer-link-icon {
  background: rgba(0,0,0,0.08);
}
[data-theme="dark"] .footer-link-arrow {
  color: rgba(0,0,0,0.3);
}
[data-theme="dark"] .footer-links a {
  color: rgba(0,0,0,0.6);
}
[data-theme="dark"] .footer-links a:hover {
  color: #1a1a1a;
}
[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.35);
}
[data-theme="dark"] .footer-bottom a {
  color: rgba(0,0,0,0.45);
}
[data-theme="dark"] .footer-bottom a:hover {
  color: #1a1a1a;
}

/* ─── About section ───────────────────────────────────────── */
/* about-photo-wrap uses a fixed warm background in both modes — see base rule */
[data-theme="dark"] .about-principles {
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .about-connect {
  border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .skill-item {
  background: var(--surface);
  border-color: rgba(255,255,255,0.05);
}

/* ─── Section label line ──────────────────────────────────── */
[data-theme="dark"] .section-label::before {
  background: rgba(255,255,255,0.2);
}

/* ─── Work chips ──────────────────────────────────────────── */
[data-theme="dark"] .work-chip {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
}

/* ─── Progress bar ────────────────────────────────────────── */
[data-theme="dark"] .progress-bar {
  background: var(--accent);
}

/* ─── Scroll indicator ────────────────────────────────────── */
[data-theme="dark"] .scroll-line { background: rgba(255,255,255,0.25); }
[data-theme="dark"] .hero-scroll { color: rgba(255,255,255,0.35); }

/* ─── Stats ───────────────────────────────────────────────── */
[data-theme="dark"] .stat-item {
  border-color: rgba(255,255,255,0.08);
}

/* ─── Case study pages ────────────────────────────────────── */
[data-theme="dark"] .cs-hero { background: var(--bg) !important; }
[data-theme="dark"] .cs-tag {
  background: rgba(255,255,255,0.07);
  color: var(--ink-2);
}
[data-theme="dark"] .cs-section {
  border-top-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .cs-nav-card {
  background: var(--surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .cs-nav-card:hover {
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .cs-metric {
  background: var(--surface);
  border-color: rgba(255,255,255,0.06);
}

/* ── Project-tinted card backgrounds → dark surface in dark mode ──
   All case study pages use --*-bg vars (light tints) for cards.
   Without overrides, light text renders on light bg → contrast fail.  */
[data-theme="dark"] .cs-problem-card {
  background: var(--surface) !important;
  border-left-color: var(--accent);
}
[data-theme="dark"] .cs-problem-card h4 { color: var(--ink); }
[data-theme="dark"] .cs-problem-card p  { color: var(--ink-3); }

[data-theme="dark"] .cs-solution-card {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .cs-highlight {
  background: var(--surface) !important;
  border-left-color: var(--accent);
}
[data-theme="dark"] .cs-highlight h3 { color: var(--ink); }
[data-theme="dark"] .cs-highlight p,
[data-theme="dark"] .cs-highlight li { color: var(--ink-2); }
[data-theme="dark"] .cs-highlight strong { color: var(--ink); }

[data-theme="dark"] .cs-learnings {
  background: var(--surface) !important;
}
[data-theme="dark"] .cs-learnings h3 { color: var(--ink); }
[data-theme="dark"] .cs-learnings li { color: var(--ink-2); }

[data-theme="dark"] .cs-persona-card {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .cs-pattern-card {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .cs-quote {
  background: var(--surface) !important;
  border-left-color: var(--accent);
}

[data-theme="dark"] .cs-impact-card {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.05);
}

/* Solution visual bg — so "contain" images have a proper background */
[data-theme="dark"] .cs-solution-visual {
  background: #0D0D12;
}

/* ─── Tools marquee ───────────────────────────────────────── */
[data-theme="dark"] .tools-marquee-wrap {
  border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .tools-section {
  background: #0A0A09;
}
[data-theme="dark"] .tp-svg-anim { background: #0D0D1A; }
[data-theme="dark"] .tp-micro    { background: #16152A; }
[data-theme="dark"] .tp-icons    { background: #141410; }
[data-theme="dark"] .tp-brand    { background: #0E1A16; }