:root {
  --detail-bg: #090d14;
  --detail-bg-soft: #0c121d;
  --detail-panel: #111927;
  --detail-panel-2: #151f2f;
  --detail-text: #f2f5f8;
  --detail-muted: #9ba8b9;
  --detail-quiet: #6f7e91;
  --detail-line: #263245;
  --detail-line-soft: rgba(150, 168, 190, .14);
  --detail-accent: #79e2b6;
  --detail-accent-soft: rgba(121, 226, 182, .11);
  --detail-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --detail-mono: "IBM Plex Mono", monospace;
  --detail-shell: 1200px;
  --detail-gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--detail-bg) !important;
  color: var(--detail-text) !important;
  font-family: var(--detail-sans) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 46rem);
  pointer-events: none;
}

::selection { background: var(--detail-accent); color: #07100d; }
:focus-visible { outline: 2px solid var(--detail-accent); outline-offset: 4px; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.case-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 72px;
  border-bottom: 1px solid var(--detail-line-soft);
  background: rgba(9,13,20,.9);
  backdrop-filter: blur(18px);
}

.case-nav-inner {
  width: min(100% - (var(--detail-gutter) * 2), var(--detail-shell));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.case-brand,
.case-back {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.case-brand { gap: .75rem; font-size: .88rem; font-weight: 650; letter-spacing: -.02em; }
.case-brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--detail-line);
  border-radius: .55rem;
  color: var(--detail-accent);
  font: 500 .68rem/1 var(--detail-mono);
}
.case-back {
  gap: .55rem;
  min-height: 42px;
  padding: .65rem .85rem;
  border: 1px solid var(--detail-line);
  border-radius: .6rem;
  color: var(--detail-muted);
  font-size: .75rem;
  font-weight: 600;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.case-back:hover { color: var(--detail-accent); border-color: var(--detail-accent); transform: translateX(-2px); }

.project-header,
.hero-section {
  position: relative !important;
  min-height: 530px;
  padding: clamp(9.5rem, 17vw, 13rem) var(--detail-gutter) clamp(4.5rem, 8vw, 7rem) !important;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 1px solid var(--detail-line) !important;
  background:
    radial-gradient(circle at 82% 42%, rgba(121,226,182,.15), transparent 27rem),
    linear-gradient(145deg, #101927, #090d14 72%) !important;
  color: var(--detail-text) !important;
  text-align: left !important;
}

.project-header::after,
.hero-section::after {
  content: "CASE / STUDY";
  position: absolute;
  right: max(var(--detail-gutter), calc((100% - var(--detail-shell)) / 2));
  bottom: 1.5rem;
  color: var(--detail-quiet);
  font: 500 .6rem/1 var(--detail-mono);
  letter-spacing: .08em;
}

.project-header > *:not(.back-btn),
.hero-container {
  width: min(100%, var(--detail-shell)) !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

.project-header .back-btn,
.nav-bar { display: none !important; }

.case-study-eyebrow {
  margin: 0 auto 1.15rem !important;
  color: var(--detail-accent) !important;
  font: 500 .65rem/1.4 var(--detail-mono) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.project-header h1,
.hero-text h1 {
  max-width: 980px;
  margin: 0 auto !important;
  color: var(--detail-text) !important;
  font-family: var(--detail-sans) !important;
  font-size: clamp(3rem, 7vw, 6.7rem) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-shadow: none !important;
  animation: none !important;
}

.project-header > p,
.hero-subtitle {
  max-width: 760px;
  margin: 1.5rem auto 0 !important;
  color: var(--detail-muted) !important;
  font-family: var(--detail-sans) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  line-height: 1.7 !important;
  animation: none !important;
}

.hero-content { display: block !important; }
.hero-stats { display: none !important; }
.hero-bg-pattern { display: none !important; }
.tech-stack {
  max-width: 980px;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem !important;
  animation: none !important;
}
.tech-badge {
  padding: .45rem .62rem !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: .45rem !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--detail-muted) !important;
  font: 400 .61rem/1 var(--detail-mono) !important;
}

.project-section,
.main-content {
  width: min(100% - (var(--detail-gutter) * 2), var(--detail-shell)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 8vw, 7rem) 0 !important;
}

.project-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.project-card,
.section,
.sidebar-card,
.feature-card,
.video-section {
  border: 1px solid var(--detail-line) !important;
  border-radius: 1rem !important;
  background: var(--detail-panel) !important;
  color: var(--detail-text) !important;
  box-shadow: none !important;
}

.project-card {
  grid-column: span 6;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(1.5rem, 3vw, 2.4rem) !important;
  transform: none !important;
}
.project-card:first-child { grid-column: 1 / -1; }
.project-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.project-card h2,
.section h2,
.sidebar-card h3 {
  margin: 0 0 1.3rem !important;
  padding: 0 0 .9rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--detail-line) !important;
  color: var(--detail-text) !important;
  font-family: var(--detail-sans) !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}

.project-card h2::before,
.section h2::before {
  content: "// ";
  color: var(--detail-accent);
  font-family: var(--detail-mono);
  font-size: .72em;
}

.project-card h3,
.section h3 {
  margin: 1.5rem 0 .65rem !important;
  color: var(--detail-text) !important;
  font-family: var(--detail-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.project-card p,
.project-card ul,
.project-card li,
.section p,
.section li,
.sidebar-card p,
.info-value,
.feature-desc {
  color: var(--detail-muted) !important;
  font-family: var(--detail-sans) !important;
  font-size: .9rem !important;
  line-height: 1.72 !important;
}

.project-card p,
.section p { margin-top: 0; }
.project-card ul,
.section ul { margin: 0; padding: 0; list-style: none !important; }
.project-card li,
.section li {
  position: relative;
  margin: 0 !important;
  padding: .7rem 0 .7rem 1.2rem !important;
  border-bottom: 1px solid var(--detail-line-soft) !important;
}
.project-card li:last-child,
.section li:last-child { border-bottom: 0 !important; }
.project-card li::before,
.section li::before {
  content: "↳" !important;
  position: absolute !important;
  left: 0 !important;
  top: .72rem !important;
  color: var(--detail-accent) !important;
  font-family: var(--detail-mono) !important;
}
.project-card strong,
.section strong { color: var(--detail-text); }

.demo-carousel,
.demo-media {
  margin: 1.6rem 0 0 !important;
  overflow: hidden;
  border: 1px solid var(--detail-line);
  border-radius: .8rem;
  background: #070a10;
}
.demo-carousel img,
.demo-media img,
.demo-media video,
.tns-slider img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 620px;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
}
.tns-outer { display: block !important; width: 100%; }
.tns-controls { padding: 0 .8rem !important; }
.tns-controls button {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: .55rem !important;
  background: rgba(9,13,20,.9) !important;
  color: var(--detail-text) !important;
}
.tns-nav { padding: .8rem; }
.tns-nav button { background: var(--detail-quiet) !important; }
.tns-nav button.tns-nav-active { background: var(--detail-accent) !important; }

.try-btn,
.btn,
.action-buttons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  margin-top: 1rem;
  padding: .75rem 1rem !important;
  border: 1px solid var(--detail-accent) !important;
  border-radius: .65rem !important;
  background: var(--detail-accent) !important;
  color: #07100d !important;
  font-family: var(--detail-sans) !important;
  font-size: .76rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .2s ease, background .2s ease !important;
}
.try-btn:hover,
.btn:hover,
.action-buttons a:hover { transform: translateY(-2px) !important; background: #91ecc6 !important; }
.btn-secondary { border-color: var(--detail-line) !important; background: transparent !important; color: var(--detail-text) !important; }

.content-grid { grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr) !important; gap: 1rem !important; }
.section,
.sidebar-card { margin: 0 0 1rem !important; padding: clamp(1.5rem, 3vw, 2.4rem) !important; }
.sidebar { min-width: 0; }
.features-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
.feature-card { padding: 1.2rem !important; }
.feature-icon { color: var(--detail-accent) !important; }
.feature-title,
.info-label { color: var(--detail-text) !important; }
.info-item { border-color: var(--detail-line-soft) !important; }
.video-section { padding: 1rem !important; }
.video-container,
.video-placeholder { background: #070a10 !important; }
.code-block { border: 1px solid var(--detail-line) !important; border-radius: .7rem !important; background: #070a10 !important; }
.code-lang { color: var(--detail-accent) !important; }

.case-footer {
  border-top: 1px solid var(--detail-line-soft);
  background: #06090e;
}
.case-footer-inner {
  width: min(100% - (var(--detail-gutter) * 2), var(--detail-shell));
  margin-inline: auto;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--detail-quiet);
  font: 500 .59rem/1.5 var(--detail-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.case-footer a { color: var(--detail-muted); text-decoration: none; }
.case-footer a:hover { color: var(--detail-accent); }
body > footer:not(.case-footer) { display: none !important; }

@media (max-width: 820px) {
  .case-nav { height: 64px; }
  .case-brand > span:last-child { display: none; }
  .project-header,
  .hero-section { min-height: 460px; padding-top: 8.5rem !important; }
  .project-card { grid-column: 1 / -1; }
  .content-grid { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 540px) {
  .project-header h1,
  .hero-text h1 { font-size: clamp(2.75rem, 14vw, 4rem) !important; }
  .project-header,
  .hero-section { min-height: 430px; }
  .case-back { font-size: 0; }
  .case-back::after { content: "All projects"; font-size: .72rem; }
  .case-footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}