:root {
  --color-bg: #FAFAFA;
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  --color-gray: #666666;
  --color-gray-light: #E5E5E5;
  
  /* Brand Colors */
  --brand-orange: #f79430;
  --brand-orange-light: #fef3e7;
  --brand-orange-dark: #d67a1f;
  --brand-blue: #175778;
  --brand-blue-light: #e8f2f6;
  --brand-blue-dark: #0f3d52;
  --brand-cyan: #6ccacd;
  --brand-cyan-light: #e5f8f9;
  --brand-cyan-dark: #4ba5a7;
  
  /* Functional Colors */
  --color-primary: #f79430;
  --color-secondary: #175778;
  --color-accent: #6ccacd;
  --color-orange: #f79430;
  --color-orange-light: #fef3e7;
  --color-green: #00C853;
  --color-green-light: #E5FFF0;
  --color-blue: #175778;
  --color-blue-light: #e8f2f6;
  --color-pink: #FF4081;
  --color-pink-light: #FFE5EF;
  --color-yellow: #fdb44b;
  --color-purple: #7C4DFF;
  
  /* Brutalist Theme with Brand Colors */
  --brutalist-mustard: #f79430;
  --brutalist-cream: #FDFBF7;
  --brutalist-red: #B91C1C;
  --brutalist-orange: #d67a1f;
  --brutalist-dark-grey: #175778;
  --brutalist-border: 3px solid #175778;
  
  --font-main: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", monospace;
  --border-width: 3px;
  --shadow-offset: 4px;
  --radius: 0px;
  --shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-black);
  --shadow-hover: 2px 2px 0 var(--color-black);
  --shadow-active: 0px 0px 0 var(--color-black)
}
*,
*:before,
*:after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%
}
body {
  font-family:var(--font-main);
  background:var(--color-bg);
  color:var(--color-black);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  width:100%
}
body.modal-open {
  overflow:hidden
}
.container {
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
  width:100%;
  overflow-x:hidden;
  box-sizing:border-box
}
.hero {
  background:linear-gradient(135deg, var(--brand-orange-light) 0%, var(--brand-cyan-light) 100%);
  color:var(--brand-blue);
  padding:140px 24px 40px;
  text-align:center;
  border-bottom:var(--border-width) solid var(--brand-blue);
  position:relative;
  overflow:hidden
}
.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(255,255,255,.03) 50px,rgba(255,255,255,.03) 51px);
  pointer-events:none
}
.hero-content {
  position:relative;
  z-index:1
}
.hero-badge {
  display:inline-block;
  background:var(--brand-blue);
  color:var(--color-white);
  padding:8px 20px;
  font-weight:700;
  font-size:14px;
  letter-spacing:1px;
  border:var(--border-width) solid var(--brand-blue);
  margin-bottom:24px;
  font-family:var(--font-mono)
}
.hero-title {
  font-size:clamp(48px,10vw,90px);
  font-weight:700;
  letter-spacing:-2px;
  line-height:.95;
  margin-bottom:24px;
  text-transform:uppercase
}
.card-header {
  margin-bottom:12px
}
.card-header-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:4px
}
.card-name {
  font-size:20px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  word-break:break-word;
  flex:1
}
.share-btn-card {
  background:transparent;
  border:none;
  width:24px;
  height:24px;
  padding:0;
  cursor:pointer;
  opacity:.4;
  transition:opacity .2s ease,transform .2s ease;
  flex-shrink:0;
  color:var(--color-black)
}
.share-btn-card:hover {
  opacity:1;
  transform:scale(1.1)
}
.share-btn-card.copied {
  color:var(--color-green);
  opacity:1
}
.card-year {
  font-family:var(--font-mono);
  font-size:14px;
  opacity:.7
}
.hero-subtitle {
  font-size:clamp(18px,3vw,24px);
  max-width:600px;
  margin:0 auto 16px;
  opacity:.9
}
.hero-tagline {
  font-family:var(--font-mono);
  font-size:16px;
  opacity:.6;
  font-style:italic;
  margin-bottom:24px
}
.hero-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:900px;
  margin:0 auto;
  position:relative;
  z-index:10;
  padding:0 40px
}
.hero-item {
  background:var(--color-white);
  border:4px solid var(--color-black);
  padding:24px;
  box-shadow:8px 8px 0 var(--color-black);
  transition:transform .2s ease,box-shadow .2s ease;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  text-decoration:none;
  color:var(--color-black)
}
.hero-item:hover {
  transform:translate(-4px,-4px) rotate(0)!important;
  box-shadow:12px 12px 0 var(--color-black)
}
.hero-item:active {
  transform:translate(2px,2px) rotate(0)!important;
  box-shadow:4px 4px 0 var(--color-black)
}
.item-dead {
  background:var(--color-white);
  transform:rotate(-2deg)
}
.item-burned {
  background:var(--color-orange);
  transform:rotate(1deg)
}
.item-steal {
  background:var(--color-green);
  transform:rotate(-1deg)
}
.item-story {
  background:var(--color-pink);
  transform:rotate(2deg)
}
.item-ideas {
  background:var(--color-yellow);
  transform:rotate(-3deg)
}
.item-roadmap {
  background:var(--color-blue);
  color:var(--color-white);
  transform:rotate(1deg)
}
.hero-stat-label {
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:8px;
  letter-spacing:1px
}
.hero-stat-number {
  font-size:36px;
  font-weight:700;
  line-height:1;
  font-family:var(--font-main)
}
.hero-nav-label {
  font-family:var(--font-main);
  font-weight:800;
  font-size:20px;
  text-transform:uppercase;
  line-height:1.2
}
.hero-nav-sub {
  font-family:var(--font-mono);
  font-size:14px;
  margin-top:4px;
  opacity:.8
}
.hero-cta-text {
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  margin-top:12px;
  border-bottom:2px solid var(--color-black)
}
.hero-box,
.stat-box,
.nav-box,
.hero-nav-link {
  display:none
}
.stat-label {
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:1px
}
.stat-number {
  font-size:32px;
  font-weight:700;
  line-height:1.1;
  color:var(--color-black)
}
.nav-box {
  cursor:pointer;
  text-decoration:none;
  color:var(--color-black)
}
.hero-nav-link {
  text-decoration:none;
  color:inherit;
  width:100%
}
.nav-label-wrapper {
  display:flex;
  flex-direction:column;
  gap:4px
}
.nav-label-top {
  font-weight:700;
  font-size:18px;
  text-transform:uppercase
}
.nav-label-bottom {
  font-family:var(--font-mono);
  font-size:12px;
  opacity:.7
}
.nav-arrow {
  position:absolute;
  top:-40px;
  right:-20px;
  pointer-events:none;
  z-index:20;
  display:none
}
.hero-nav {
  display:none
}
.highlight-orange {
  color:var(--color-orange)
}
.highlight-green {
  color:var(--color-black)
}
.highlight-pink {
  color:var(--color-pink)
}
.highlight-blue {
  color:var(--color-blue)
}
.inline-stat-box {
  display:inline-block;
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:4px 12px;
  font-weight:700;
  font-family:var(--font-main);
  box-shadow:4px 4px 0 var(--color-black);
  transform:rotate(-2deg);
  transition:transform .2s ease,box-shadow .2s ease;
  line-height:1.2
}
.inline-stat-box:hover {
  transform:rotate(0) translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.inline-stat-box.stat-dead {
  background:var(--color-white);
  transform:rotate(-2deg)
}
.inline-stat-box.stat-burned {
  background:var(--color-orange);
  transform:rotate(2deg)
}
@media(max-width:768px) {
  .inline-stat-box {
    padding:3px 8px;
    font-size:14px;
    border-width:2px;
    box-shadow:3px 3px 0 var(--color-black)
  }
}
.hero-forensics-box {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:900px;
  width:calc(100% - 80px);
  margin:20px auto 0;
  padding:20px 40px;
  background:var(--color-white);
  border:4px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black);
  text-decoration:none;
  color:var(--color-black);
  transform:rotate(-1deg);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;
  z-index:10
}
.hero-forensics-box:hover {
  transform:rotate(0) translate(-4px,-4px);
  box-shadow:12px 12px 0 var(--color-black);
  background:var(--color-orange)
}
.forensics-icon {
  font-size:28px
}
.forensics-label {
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px
}
.forensics-arrow {
  font-size:24px;
  font-weight:700
}
@media(max-width:768px) {
  .hero-forensics-box {
    padding:16px 20px;
    gap:12px;
    margin:20px 40px 0;
    width:calc(100% - 80px);
    transform:rotate(0)
  }
  .forensics-label {
    font-size:12px
  }
}
.top10-cta-wrapper {
  padding:20px 24px 0
}
.top10-cta,
.hero-top10-cta {
  display:block;
  width:100%;
  background:var(--brutalist-mustard, #EAB308);
  border:4px solid #000;
  box-shadow:8px 8px #000;
  text-decoration:none;
  color:#000;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease
}
.hero-top10-cta {
  display:inline-flex;
  align-items:center;
  margin:16px auto 0;
  max-width:220px;
  background:var(--brand-orange);
  border:3px solid var(--brand-blue);
  box-shadow:4px 4px var(--brand-blue);
  text-decoration:none;
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:12px 20px;
  transform:rotate(-1deg);
  transition:transform .3s ease,box-shadow .3s ease;
  box-sizing:border-box;
  z-index:10
}
.hero-top10-cta .top10-cta-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0;
  gap:20px
}
.hero-top10-cta .folder-stack {
  font-size:16px
}
.hero-top10-cta .top10-cta-center {
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px
}
.hero-top10-cta .top10-cta-title {
  font-family:var(--font-main);
  font-weight:800;
  font-size:14px;
  margin:0
}
.hero-top10-cta .top10-cta-subtitle {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  color:#666
}
.hero-top10-cta .top10-cta-badge {
  display:inline-block;
  font-size:18px;
  background:transparent;
  color:#000;
  padding:0;
  font-weight:800;
  margin-bottom:2px;
  margin-right:0
}
.hero-top10-cta .top10-cta-right {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px
}
.hero-top10-cta .hero-cta-text {
  margin-top:0;
  border-bottom-width:1px
}
.hero-top10-cta .top10-cta-arrow {
  font-size:20px;
  font-weight:800;
  line-height:1
}
@media(max-width:768px) {
  .hero-top10-cta {
    width:calc(100% - 40px);
    padding:8px 16px;
    min-height:auto
  }
  .hero-top10-cta .top10-cta-title {
    font-size:16px
  }
  .hero-top10-cta .top10-cta-subtitle {
    font-size:9px
  }
  .hero-top10-cta .folder-stack {
    font-size:18px
  }
  .hero-top10-cta .top10-cta-arrow {
    font-size:20px
  }
  .hero-top10-cta .top10-cta-badge {
    font-size:8px;
    padding:1px 4px
  }
}
.top10-cta:hover,
.hero-top10-cta:hover {
  transform:translate(-6px,-6px);
  box-shadow:14px 14px var(--brand-blue)
}
.top10-cta:active,
.hero-top10-cta:active {
  transform:translate(2px,2px);
  box-shadow:4px 4px var(--brand-blue)
}
.top10-cta-glow {
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(234,179,8,.15) 0%,transparent 60%);
  animation:glowPulse 3s ease-in-out infinite;
  pointer-events:none
}
@keyframes glowPulse {
  0%,
  to {
    opacity:.3;
    transform:scale(1)
  }
  50% {
    opacity:.8;
    transform:scale(1.1)
  }
}
.top10-cta-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  position:relative;
  z-index:2
}
.top10-cta-left {
  flex-shrink:0
}
.folder-stack {
  display:flex;
  position:relative;
  width:60px;
  height:50px
}
.folder-icon {
  font-size:28px;
  position:absolute;
  transition:all .3s ease;
  filter:drop-shadow(2px 2px 0 #000)
}
.folder-1 {
  left:0;
  top:8px;
  z-index:1;
  opacity:.5
}
.folder-2 {
  left:12px;
  top:4px;
  z-index:2;
  opacity:.7
}
.folder-3 {
  left:24px;
  top:0;
  z-index:3;
  animation:folderBounce 2s ease-in-out infinite
}
@keyframes folderBounce {
  0%,
  to {
    transform:translateY(0) rotate(-5deg)
  }
  50% {
    transform:translateY(-4px) rotate(5deg)
  }
}
.top10-cta:hover .folder-1 {
  transform:translate(-8px) rotate(-15deg);
  opacity:.8
}
.top10-cta:hover .folder-2 {
  transform:translate(-4px) rotate(-8deg);
  opacity:.9
}
.top10-cta:hover .folder-3 {
  transform:translateY(-6px) scale(1.2);
  animation:none
}
.top10-cta-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1;
  text-align:center
}
.top10-cta-badge {
  display:inline-block;
  background:#b91c1c;
  color:#fff;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border:2px solid #000;
  letter-spacing:1px;
  animation:badgePulse 1.5s ease-in-out infinite
}
@keyframes badgePulse {
  0%,
  to {
    transform:scale(1)
  }
  50% {
    transform:scale(1.05);
    box-shadow:0 0 10px #b91c1c80
  }
}
.top10-cta-title {
  font-family:var(--font-main, "Space Grotesk", sans-serif);
  font-size:32px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#000
}
@keyframes shimmer {
  0% {
    background-position:0% center
  }
  to {
    background-position:200% center
  }
}
.top10-cta-subtitle {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:12px;
  color:#000;
  opacity:.7;
  letter-spacing:.5px
}
.top10-cta-right {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}
.skull-pulse {
  font-size:36px;
  animation:skullFloat 2s ease-in-out infinite;
  filter:drop-shadow(2px 2px 0 #000)
}
@keyframes skullFloat {
  0%,
  to {
    transform:translateY(0) rotate(-5deg)
  }
  25% {
    transform:translateY(-4px) rotate(0)
  }
  75% {
    transform:translateY(2px) rotate(5deg)
  }
}
.top10-cta:hover .skull-pulse {
  animation:skullShake .4s ease-in-out infinite;
  filter:drop-shadow(3px 3px 0 #000)
}
@keyframes skullShake {
  0%,
  to {
    transform:rotate(-5deg)
  }
  25% {
    transform:rotate(5deg)
  }
  50% {
    transform:rotate(-5deg)
  }
  75% {
    transform:rotate(5deg)
  }
}
.top10-cta-arrow {
  font-size:32px;
  font-weight:900;
  color:#000;
  transition:transform .3s ease
}
.top10-cta:hover .top10-cta-arrow {
  transform:translate(8px)
}
.top10-cta-marquee {
  display:flex;
  overflow:hidden;
  background:#000;
  border-top:3px solid #000;
  padding:8px 0
}
.top10-cta-marquee span {
  display:inline-block;
  white-space:nowrap;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:11px;
  color:#fff9;
  letter-spacing:1px;
  animation:marqueeScroll 30s linear infinite
}
@keyframes marqueeScroll {
  0% {
    transform:translate(0)
  }
  to {
    transform:translate(-50%)
  }
}
.top10-cta:hover .top10-cta-marquee span {
  color:var(--brutalist-mustard, #EAB308);
  animation-duration:15s
}
@media(max-width:768px) {
  .top10-cta-wrapper {
    padding:16px 16px 0
  }
  .top10-cta {
    width:100%
  }
  .top10-cta-content {
    flex-direction:column;
    gap:12px;
    padding:16px
  }
  .top10-cta-left {
    display:none
  }
  .top10-cta-title {
    font-size:22px
  }
  .top10-cta-subtitle {
    font-size:10px
  }
  .top10-cta-right {
    justify-content:center
  }
  .skull-pulse {
    font-size:28px
  }
  .top10-cta-arrow {
    font-size:24px
  }
  .top10-cta-marquee span {
    font-size:10px
  }
}
.dashboard-cta {
  background:var(--color-white);
  border-bottom:var(--border-width) solid var(--color-black);
  padding:60px 0;
  position:relative;
  z-index:5
}
.cta-link-wrapper {
  text-decoration:none;
  color:inherit;
  display:block
}
.cta-link-wrapper:hover .cta-primary-btn {
  transform:translate(-4px,-4px);
  box-shadow:12px 12px 0 var(--color-black);
  background:var(--color-yellow);
  color:var(--color-black)
}
.cta-link-wrapper:hover .img-1 {
  transform:translate(-15px,-15px) rotate(-1deg);
  z-index:3
}
.cta-link-wrapper:hover .img-2 {
  transform:translate(15px,15px) rotate(2deg);
  z-index:1
}
.cta-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center
}
.cta-text .cta-badge {
  display:inline-block;
  background:var(--color-cyan, #00ebff);
  color:var(--color-black);
  padding:4px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  border:3px solid var(--color-black);
  box-shadow:4px 4px 0 var(--color-black);
  margin-bottom:20px
}
.cta-text h2 {
  font-size:48px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:24px
}
.cta-text p {
  font-size:18px;
  margin-bottom:32px;
  opacity:.8;
  max-width:500px
}
.cta-primary-btn {
  display:inline-block;
  background:var(--color-pink);
  color:var(--color-white);
  padding:16px 32px;
  font-size:18px;
  font-weight:800;
  text-decoration:none;
  border:4px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black);
  transition:transform .1s ease,box-shadow .1s ease;
  text-transform:uppercase
}
.cta-primary-btn:hover {
  transform:translate(-4px,-4px);
  box-shadow:12px 12px 0 var(--color-black);
  background:var(--color-yellow);
  color:var(--color-black)
}
.cta-visuals {
  position:relative;
  height:400px
}
.visual-stack {
  position:relative;
  width:100%;
  height:100%
}
.cta-img {
  position:absolute;
  width:80%;
  border:4px solid var(--color-black);
  box-shadow:10px 10px 0 var(--color-black);
  transition:transform .3s ease,z-index .3s ease
}
.img-1 {
  top:0;
  left:0;
  z-index:2;
  transform:rotate(-2deg)
}
.img-2 {
  bottom:0;
  right:0;
  z-index:1;
  transform:rotate(3deg)
}
.visual-stack:hover .img-1 {
  transform:translate(-10px,-10px) rotate(-1deg);
  z-index:3
}
.visual-stack:hover .img-2 {
  transform:translate(10px,10px) rotate(2deg);
  z-index:1
}
@media(max-width:900px) {
  .cta-grid {
    grid-template-columns:1fr;
    text-align:center;
    gap:40px
  }
  .cta-text p {
    margin:0 auto 32px
  }
  .cta-visuals {
    height:300px
  }
}
.toggle-filters-btn {
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  background:var(--color-black);
  color:var(--color-white);
  border:4px solid var(--color-black);
  padding:12px 24px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  text-transform:uppercase;
  margin-bottom:20px;
  transition:all .15s ease;
  box-shadow:4px 4px 0 var(--color-yellow)
}
.toggle-filters-btn:hover {
  background:var(--color-orange);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.toggle-filters-btn.active {
  background:var(--color-orange)
}
.control-panel {
  background:var(--color-white);
  padding:20px 24px;
  margin:20px auto;
  max-width:1200px;
  border:4px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black)
}
.filter-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start
}
.sort-row {
  display:none
}
.sort-section-wrapper {
  display:flex!important
}
.control-select {
  appearance:none;
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:10px 32px 10px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--color-black);
  transition:all .12s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  min-width:140px;
  flex:1 1 auto
}
@media(max-width:768px) {
  .toggle-filters-btn {
    display:flex
  }
  .toggle-sort-btn {
    margin-top:-10px;
    margin-bottom:0
  }
  .filter-row,
  .sort-row {
    display:none;
    margin-top:10px
  }
  .filter-row.expanded,
  .sort-row.expanded {
    display:flex
  }
  .sort-row .sort-btn {
    min-width:calc(50% - 6px);
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    text-align:left;
    padding:10px 12px;
    background:var(--color-white);
    border:3px solid var(--color-black);
    box-shadow:4px 4px 0 var(--color-black);
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase
  }
  .sort-row .sort-btn.active {
    background:var(--color-yellow);
    box-shadow:2px 2px 0 var(--color-black);
    transform:translate(2px,2px)
  }
  .control-select {
    min-width:calc(50% - 6px)
  }
  .reset-btn {
    width:100%;
    margin-top:4px
  }
  .sort-section-wrapper {
    display:none!important
  }
}
.control-select:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.control-select:focus {
  outline:none;
  background-color:var(--color-yellow)
}
.sort-panel {
  background:var(--brutalist-mustard, #EAB308);
  padding:16px 24px;
  margin:0 auto 20px;
  max-width:1200px;
  border:4px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black);
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}
.sort-panel .container {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  width:100%
}
.sort-label {
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase
}
.sort-btn {
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:8px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--color-black);
  transition:all .12s ease
}
@media(max-width:600px) {
  .sort-panel {
    padding:12px 16px;
    gap:12px
  }
  .sort-btn-group {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    flex:1
  }
  .sort-btn {
    padding:6px 2px;
    font-size:8px;
    text-align:center;
    width:100%;
    min-width:0;
    letter-spacing:-.2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px
  }
  .sort-label {
    width:auto;
    margin-bottom:0;
    text-align:left;
    white-space:nowrap
  }
  .sort-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    width:100%
  }
}
.sort-btn:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.sort-btn:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--color-black)
}
.bonfire-btn {
  background:var(--color-orange)
}
.bonfire-btn.active {
  background:var(--color-orange);
  color:var(--color-black);
  animation:flamePulse .6s infinite alternate
}
.search-box {
  display:flex;
  align-items:center;
  background:var(--color-white);
  border:3px solid var(--color-black);
  box-shadow:4px 4px 0 var(--color-black);
  padding:0;
  margin-bottom:16px;
  transition:all .2s cubic-bezier(.175,.885,.32,1.275);
  overflow:hidden;
  position:relative
}
.search-box:focus-within {
  box-shadow:8px 8px 0 var(--color-black);
  transform:scale(1.03);
  z-index:10
}
.search-icon {
  font-size:18px;
  margin-left:16px;
  margin-right:0
}
.search-box input {
  flex:1;
  padding:18px 16px;
  border:none;
  font-family:var(--font-mono);
  font-size:16px;
  background:#fff;
  color:var(--color-black);
  outline:none;
  width:100%
}
.search-box input::placeholder {
  color:var(--color-gray)
}
.filter-group {
  margin-bottom:16px
}
.filter-group-label {
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
  color:var(--color-black)
}
.chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.filter-chip,
.sort-chip {
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:8px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all .12s ease;
  box-shadow:4px 4px 0 var(--color-black);
  position:relative
}
.filter-chip:hover,
.sort-chip:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.filter-chip:active,
.sort-chip:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--color-black)
}
.filter-chip.active {
  background:var(--color-yellow)
}
.sort-chip.active {
  background:var(--color-black);
  color:var(--color-white)
}
.bonfire-chip {
  background:var(--color-orange)
}
.bonfire-chip.active {
  background:var(--color-orange);
  color:var(--color-black);
  animation:flamePulse .6s infinite alternate
}
@keyframes flamePulse {
  0% {
    box-shadow:4px 4px 0 var(--color-black),0 0 8px #ff640099
  }
  to {
    box-shadow:4px 4px 0 var(--color-black),0 0 20px #ff3200e6
  }
}
.year-timeline {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:8px 0;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--color-black) var(--color-white)
}
.year-timeline::-webkit-scrollbar {
  height:6px
}
.year-timeline::-webkit-scrollbar-track {
  background:var(--color-white);
  border:2px solid var(--color-black)
}
.year-timeline::-webkit-scrollbar-thumb {
  background:var(--color-black)
}
.year-chip {
  scroll-snap-align:start;
  flex-shrink:0;
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all .12s ease;
  box-shadow:3px 3px 0 var(--color-black)
}
.year-chip:hover {
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--color-black)
}
.year-chip.active {
  background:var(--color-pink)
}
.score-chip[data-difficulty].active {
  background:var(--color-green)
}
.score-chip[data-scalability].active {
  background:var(--color-blue);
  color:var(--color-white)
}
.score-chip[data-market].active {
  background:var(--color-orange)
}
.active-filters-bar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 16px;
  margin-top:16px;
  background:var(--color-yellow);
  border:3px solid var(--color-black);
  box-shadow:4px 4px 0 var(--color-black)
}
.active-label {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase
}
.active-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1
}
.active-chip {
  background:var(--color-white);
  border:2px solid var(--color-black);
  padding:4px 10px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer
}
.active-chip:hover {
  background:var(--color-pink)
}
.active-chip .remove {
  font-weight:900
}
.reset-btn {
  background:var(--color-white);
  border:3px solid var(--color-black);
  padding:8px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--color-black);
  transition:all .12s ease
}
.reset-btn:hover {
  background:var(--color-pink);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--color-black)
}
.reset-btn:active {
  transform:translate(1px,1px);
  box-shadow:2px 2px 0 var(--color-black)
}
.startup-card.bonfire-top {
  position:relative;
  animation:bonfireGlow 1s infinite alternate
}
.startup-card.bonfire-top:before {
  content:"🔥";
  position:absolute;
  top:-12px;
  right:-12px;
  font-size:24px;
  animation:flameWiggle .3s infinite alternate
}
@keyframes bonfireGlow {
  0% {
    box-shadow:6px 6px 0 var(--color-black),0 0 15px #ff640066
  }
  to {
    box-shadow:6px 6px 0 var(--color-black),0 0 30px #ff3200b3
  }
}
@keyframes flameWiggle {
  0% {
    transform:rotate(-5deg) scale(1)
  }
  to {
    transform:rotate(5deg) scale(1.1)
  }
}
.stats-bar-integrated {
  margin-top:60px;
  padding-bottom:20px;
  border-top:2px solid var(--color-black);
  padding-top:40px
}
.stats-bar-integrated .container {
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap
}
.highlight-black {
  color:var(--color-black)
}
.stats-bar .container {
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap
}
.stat {
  text-align:center
}
.stat-number {
  display:block;
  font-size:32px;
  font-weight:700;
  font-family:var(--font-mono)
}
.stat-label {
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  opacity:.7
}
.modal-title-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%
}
.share-btn {
  background:transparent;
  border:none;
  width:32px;
  height:32px;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .2s ease,opacity .2s ease;
  opacity:.5;
  padding:4px;
  color:var(--color-black)
}
.share-btn:hover {
  transform:scale(1.1);
  opacity:1
}
.share-btn.copied {
  font-size:14px;
  font-weight:700;
  font-family:var(--font-mono);
  color:var(--color-green);
  opacity:1;
  background:var(--color-green-light);
  padding:4px 8px;
  border:2px solid var(--color-green);
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:80px
}
.share-btn svg,
.share-btn-card svg {
  display:block
}
.score-sliders-section {
  background:var(--color-white);
  border-bottom:var(--border-width) solid var(--color-black);
  padding:24px
}
.sliders-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px
}
.sliders-icon {
  font-size:20px
}
.sliders-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--color-gray);
  flex-grow:1
}
.reset-filters-btn {
  background:var(--color-white);
  border:2px solid var(--color-black);
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:2px 2px 0 var(--color-black)
}
.reset-filters-btn:hover {
  background:var(--color-pink);
  color:var(--color-white);
  box-shadow:1px 1px 0 var(--color-black);
  transform:translate(1px,1px)
}
.sliders-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px
}
@media(max-width:900px) {
  .sliders-grid {
    grid-template-columns:1fr;
    gap:24px
  }
}
.slider-item {
  background:var(--color-bg);
  border:2px solid var(--color-black);
  padding:16px
}
.slider-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px
}
.slider-value {
  background:var(--color-black);
  color:var(--color-white);
  padding:4px 10px;
  font-family:var(--font-mono);
  font-size:12px
}
.slider-range {
  position:relative;
  height:24px;
  margin-bottom:8px
}
.range-slider {
  position:absolute;
  width:100%;
  height:8px;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  pointer-events:none
}
.range-slider::-webkit-slider-runnable-track {
  width:100%;
  height:8px;
  background:var(--color-gray-light);
  border:2px solid var(--color-black)
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  height:24px;
  width:16px;
  background:var(--color-black);
  border:2px solid var(--color-black);
  cursor:pointer;
  pointer-events:auto;
  margin-top:-10px;
  transition:background .15s ease
}
.range-slider::-webkit-slider-thumb:hover {
  background:var(--color-orange)
}
.range-slider::-moz-range-track {
  width:100%;
  height:8px;
  background:var(--color-gray-light);
  border:2px solid var(--color-black)
}
.range-slider::-moz-range-thumb {
  height:20px;
  width:12px;
  background:var(--color-black);
  border:2px solid var(--color-black);
  border-radius:0;
  cursor:pointer;
  pointer-events:auto
}
.range-slider::-moz-range-thumb:hover {
  background:var(--color-orange)
}
.slider-labels {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:700;
  color:var(--color-gray);
  letter-spacing:.5px
}
.sort-section-wrapper {
  display:flex;
  gap:20px;
  align-items:center;
  margin-bottom:30px
}
.sort-panel {
  background:var(--color-yellow);
  padding:12px 24px;
  border:4px solid var(--color-black);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  box-shadow:8px 8px 0 var(--color-black);
  flex:1
}
.sort-controls {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  width:100%
}
.sort-label {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px
}
.sort-btn-group {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.sort-btn {
  background:transparent;
  border:2px solid var(--color-black);
  padding:8px 16px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:all .1s;
  text-transform:uppercase
}
.sort-btn:hover {
  background:var(--color-white);
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--color-black)
}
.sort-btn.active {
  background:var(--color-black);
  color:var(--color-white)
}
@media(max-width:768px) {
  .sort-section-wrapper {
    flex-direction:column;
    align-items:stretch;
    gap:16px
  }
  .sort-panel {
    padding:16px
  }
  .sort-section-wrapper {
    display:none!important
  }
}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 20px
}
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:32px;
  padding-bottom:80px;
  min-height:600px
}
.main-content {
  padding:40px 24px 80px
}
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:32px;
  justify-items:center;
  align-items:stretch
}
.startup-card {
  background:var(--brutalist-cream);
  border:var(--brutalist-border);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  margin-bottom:24px;
  box-shadow:8px 8px #000;
  transition:transform .1s ease,box-shadow .1s ease;
  cursor:pointer;
  max-width:450px;
  width:100%;
  aspect-ratio:1 / 1.2;
  border-radius:0
}
@media(min-width:768px) {
  .startup-card {
    aspect-ratio:1 / 1.1
  }
}
.startup-card:hover {
  transform:translate(-4px,-4px);
  box-shadow:12px 12px #000
}
.card-header-new {
  background:var(--brutalist-mustard);
  border-bottom:var(--brutalist-border);
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.header-left-new {
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  flex:1
}
.header-icon-box {
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  width:36px;
  height:36px;
  box-sizing:border-box;
  transition:all .1s ease;
  flex-shrink:0
}
.header-icon-box svg {
  width:100%;
  height:100%
}
.share-btn-card:hover {
  background:#000;
  color:#fff
}
.share-btn-card svg {
  width:20px;
  height:20px
}
.header-title-new {
  font-family:var(--font-main);
  font-weight:800;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 8px
}
.card-body-new {
  padding:16px 20px;
  background:var(--brutalist-cream);
  flex-grow:1;
  display:flex;
  flex-direction:column
}
@media(max-width:768px) {
  .card-body-new {
    padding:10px 16px
  }
}
.card-title-group {
  margin-bottom:8px
}
.card-title-main {
  line-height:1.1;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  overflow:hidden
}
.card-title-name {
  font-size:28px;
  font-weight:950;
  color:#000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:0 1 auto
}
.funding-skew-badge {
  background:var(--color-orange);
  color:#fff;
  padding:4px 10px;
  border:3px solid black;
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:800;
  transform:rotate(-1.5deg);
  box-shadow:4px 4px #000;
  display:inline-block;
  white-space:nowrap;
  flex:0 0 auto;
  position:relative;
  z-index:1
}
.card-title-country {
  font-size:15px;
  color:var(--brutalist-dark-grey);
  font-weight:700;
  text-transform:uppercase;
  margin-top:4px
}
.card-desc-new {
  font-size:14px;
  line-height:1.4;
  color:#333;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.card-stats-row {
  display:flex;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:8px
}
.stat-badge-new {
  background:var(--brutalist-dark-grey);
  border:var(--brutalist-border);
  color:#fff;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:700;
  justify-content:center;
  flex:0 0 auto
}
.stat-badge-new svg {
  width:16px;
  height:16px
}
.views-badge {
  background:transparent!important;
  color:var(--color-black)!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
  font-weight:400!important;
  font-size:11px!important;
  gap:4px!important;
  margin-left:4px
}
.views-badge span:first-child {
  font-size:14px
}
.body-divider {
  border:none;
  border-top:var(--brutalist-border);
  margin-bottom:4px
}
.card-metrics-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:4px
}
@media(min-width:768px) {
  .card-metrics-row {
    margin-top:auto!important;
    margin-bottom:auto!important;
    justify-content:center;
    gap:40px
  }
}
.metric-item-new {
  flex:1;
  cursor:help
}
.metric-label-new {
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:6px;
  text-align:center
}
.metric-bars-new {
  display:flex;
  gap:4px;
  justify-content:center
}
.metric-block {
  width:18px;
  height:18px;
  border:2px solid black;
  background:var(--brutalist-cream)
}
.metric-block.filled {
  background:var(--brutalist-orange)
}
.card-footer-new {
  background:var(--brutalist-red);
  border-top:var(--brutalist-border);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  margin-top:auto;
  position:relative
}
@media(max-width:768px) {
  .card-footer-new {
    padding:14px 16px
  }
}
.footer-icon {
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center
}
.footer-icon svg {
  width:100%;
  height:100%
}
.footer-text-new {
  font-weight:800;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.5px
}
.startup-card .card-header,
.startup-card .card-footer,
.startup-card .card-scores {
  display:none!important
}
.startup-card {
  padding:0!important
}
.new-badge {
  z-index:20
}
.new-badge {
  position:absolute;
  bottom:8px;
  right:8px;
  background:var(--color-orange);
  color:var(--color-white);
  padding:2px 8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  border:2px solid var(--color-black);
  box-shadow:2px 2px 0 var(--color-black);
  z-index:10;
  pointer-events:none;
  text-transform:uppercase
}
@media(max-width:768px) {
  .new-badge {
    bottom:8px;
    right:8px
  }
}
.startup-card.viewed {
  opacity:.8;
  filter:grayscale(.2)
}
.startup-card.viewed:hover {
  opacity:1;
  filter:none
}
.autopsied-badge {
  display:none;
  position:absolute;
  bottom:45px;
  right:8px;
  background:var(--color-black);
  color:var(--color-white);
  padding:2px 8px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  border:1px solid var(--color-white);
  z-index:30;
  pointer-events:none;
  text-transform:uppercase;
  box-shadow:2px 2px 0 var(--color-black);
  transform:rotate(-2deg)
}
.startup-card.viewed .autopsied-badge {
  display:block
}
@media(max-width:768px) {
  .autopsied-badge {
    bottom:45px;
    right:8px;
    font-size:9px
  }
}
.card-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:12px
}
.card-name {
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.5px;
  line-height:1.2
}
.card-year {
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--color-gray);
  white-space:nowrap
}
.card-description {
  font-size:14px;
  color:var(--color-gray);
  line-height:1.5;
  margin-bottom:16px;
  flex-grow:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis
}
.card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px
}
.card-burned {
  background:var(--color-orange-light);
  border:2px solid var(--color-orange);
  color:var(--color-orange);
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700
}
.card-category {
  background:var(--color-black);
  color:var(--color-white);
  padding:6px 12px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px
}
.card-difficulty {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-family:var(--font-mono)
}
.difficulty-bar {
  display:flex;
  gap:2px
}
.difficulty-bar span {
  width:8px;
  height:16px;
  background:var(--color-gray-light);
  border:1px solid var(--color-black)
}
.difficulty-bar span.filled {
  background:var(--color-green)
}
.difficulty-bar span.filled.medium {
  background:var(--color-orange)
}
.difficulty-bar span.filled.hard {
  background:var(--color-pink)
}
.no-results {
  text-align:center;
  padding:80px 24px
}
.no-results-icon {
  font-size:64px;
  display:block;
  margin-bottom:16px
}
.no-results p {
  font-size:18px;
  color:var(--color-gray)
}
.modal-overlay {
  position:fixed;
  inset:0;
  background:#000c;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease
}
.modal-overlay.active {
  opacity:1;
  visibility:visible
}
.modal {
  background:var(--color-white);
  border:var(--border-width) solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black);
  max-width:800px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  transform:translateY(20px) scale(.95);
  transition:transform .2s ease
}
.modal-overlay.active .modal {
  transform:translateY(0) scale(1)
}
.modal-close {
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  background:var(--color-white);
  border:var(--border-width) solid var(--color-black);
  box-shadow:2px 2px 0 var(--color-black);
  font-size:20px;
  cursor:pointer;
  transition:all .15s ease;
  z-index:10
}
.modal-close:hover {
  background:var(--color-pink);
  box-shadow:1px 1px 0 var(--color-black);
  transform:translate(1px,1px)
}
.modal-content {
  padding:0
}
.modal-header {
  background:var(--color-black);
  color:var(--color-white);
  padding:32px 60px 32px 32px
}
.modal-company-name {
  font-size:36px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:8px;
  line-height:1.1
}
.modal-meta {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  font-family:var(--font-mono);
  font-size:14px
}
.modal-years {
  opacity:.7
}
.modal-burned {
  background:var(--color-orange);
  color:var(--color-black);
  padding:4px 12px;
  font-weight:700
}
.modal-category {
  background:var(--color-white);
  color:var(--color-black);
  padding:4px 12px;
  font-weight:700;
  text-transform:uppercase
}
.modal-section {
  padding:24px 32px;
  border-bottom:var(--border-width) solid var(--color-black)
}
.modal-section:last-child {
  border-bottom:none
}
.section-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px
}
.section-icon {
  font-size:24px
}
.section-title {
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--color-gray)
}
.section-content {
  font-size:16px;
  line-height:1.7
  
}
.section-content ul {
  list-style:none;
  padding:0
}
.section-content li {
  padding:8px 0 8px 24px;
  position:relative
}
.section-content li:before {
  content:"→";
  position:absolute;
  left:0;
  color:var(--color-orange);
  font-weight:700
}
.loot-section {
  background:var(--color-green-light)
}
.loot-section .section-title {
  color:var(--color-green)
}
.loot-section li:before {
  content:"💎"
}
.people-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px
}
.person-card {
  background:var(--color-bg);
  border:2px solid var(--color-black);
  padding:16px
}
.person-role {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--color-gray);
  margin-bottom:4px
}
.person-name {
  font-weight:700
}
.market-score {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--color-white);
  border:2px solid var(--color-black);
  padding:8px 16px;
  margin-top:16px
}
.market-score-label {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase
}
.market-score-value {
  font-family:var(--font-mono);
  font-weight:700;
  padding:4px 8px
}
.market-score-value.high {
  background:var(--color-green)
}
.market-score-value.medium {
  background:var(--color-orange)
}
.market-score-value.low {
  background:var(--color-pink);
  color:var(--color-white)
}
.pivot-section {
  background:var(--color-blue-light)
}
.pivot-section .section-title {
  color:var(--color-blue)
}
.pivot-name {
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--color-blue)
}
.execution-section {
  background:var(--color-pink-light)
}
.execution-section .section-title {
  color:var(--color-pink)
}
.step-list {
  counter-reset:step
}
.step-list li {
  counter-increment:step;
  padding-left:40px
}
.step-list li:before {
  content:counter(step);
  position:absolute;
  left:0;
  width:24px;
  height:24px;
  background:var(--color-pink);
  color:var(--color-white);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center
}
.tech-stack {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px
}
.tech-tag {
  background:var(--color-white);
  border:2px solid var(--color-black);
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700
}
.monetization {
  background:var(--color-green);
  color:var(--color-black);
  padding:16px;
  margin-top:16px;
  border:2px solid var(--color-black)
}
.monetization-title {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:8px
}
#hero-canvas {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:600px;
  z-index:1;
  pointer-events:none
}
.hero-title.glitch {
  animation:glitch .2s infinite;
  text-shadow:2px 0 var(--primary-pink),-2px 0 var(--primary-orange)
}
@keyframes glitch {
  0% {
    transform:translate(0)
  }
  20% {
    transform:translate(-2px,2px)
  }
  40% {
    transform:translate(-2px,-2px)
  }
  60% {
    transform:translate(2px,2px)
  }
  80% {
    transform:translate(2px,-2px)
  }
  to {
    transform:translate(0)
  }
}
.footer {
  background:var(--color-black);
  color:var(--color-white);
  padding:40px 24px;
  text-align:center;
  border-top:var(--border-width) solid var(--color-black)
}
.footer p {
  margin-bottom:8px
}
.footer-sub {
  font-size:14px;
  opacity:.6
}
.footer a {
  color:var(--color-pink);
  text-decoration:none
}
.footer a:hover {
  text-decoration:underline
}
@media(max-width:768px) {
  .hero {
    padding:60px 24px
  }
  .hero-title {
    font-size:48px
  }
  .stats-bar .container {
    gap:30px
  }
  .cards-grid {
    grid-template-columns:1fr
  }
  .modal {
    max-height:100vh;
    margin:0
  }
  .modal-company-name {
    font-size:28px
  }
  .modal-section {
    padding:20px
  }
}
@keyframes fadeIn {
  0% {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.startup-card {
  animation:fadeIn .3s ease forwards
}
.startup-card:nth-child(1) {
  animation-delay:.05s
}
.startup-card:nth-child(2) {
  animation-delay:.1s
}
.startup-card:nth-child(3) {
  animation-delay:.15s
}
.startup-card:nth-child(4) {
  animation-delay:.2s
}
.startup-card:nth-child(5) {
  animation-delay:.25s
}
.startup-card:nth-child(6) {
  animation-delay:.3s
}
.card-scores {
  display:flex;
  gap:16px;
  margin-top:16px;
  padding-top:16px;
  border-top:2px dashed var(--color-gray-light);
  flex-wrap:wrap;
  position:relative
}
.score-hint {
  display:block;
  text-align:center;
  width:100%;
  margin-bottom:8px;
  font-size:9px;
  font-weight:600;
  color:var(--color-gray);
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.6
}
.score-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:help
}
.score-label {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--color-gray)
}
.score-bar {
  display:flex;
  gap:2px
}
.score-bar span {
  width:6px;
  height:14px;
  background:var(--color-gray-light);
  border:1px solid var(--color-black);
  transition:background .15s ease
}
.score-bar span.filled {
  background:var(--color-green)
}
.score-bar span.filled.medium {
  background:var(--color-orange)
}
.score-bar span.filled.hard {
  background:var(--color-pink)
}
.score-tooltip {
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translate(-50%);
  background:var(--color-black);
  color:var(--color-white);
  padding:12px 16px;
  font-size:12px;
  line-height:1.5;
  width:280px;
  border:2px solid var(--color-black);
  box-shadow:4px 4px #0003;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:50;
  pointer-events:none;
  margin-bottom:8px
}
.score-tooltip:after {
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%);
  border:8px solid transparent;
  border-top-color:var(--color-black)
}
.score-item:hover .score-tooltip {
  opacity:1;
  visibility:visible
}
.score-item.difficulty .score-bar span.filled {
  background:var(--color-green)
}
.score-item.difficulty.level-3 .score-bar span.filled,
.score-item.difficulty.level-4 .score-bar span.filled {
  background:var(--color-orange)
}
.score-item.difficulty.level-5 .score-bar span.filled {
  background:var(--color-pink)
}
.score-item.scalability .score-bar span.filled {
  background:var(--color-blue)
}
.score-item.market .score-bar span.filled {
  background:var(--color-purple)
}
.score-item.market.level-high .score-bar span.filled {
  background:var(--color-green)
}
.score-item.market.level-medium .score-bar span.filled {
  background:var(--color-orange)
}
.score-item.market.level-low .score-bar span.filled {
  background:var(--color-pink)
}
.modal-scores {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:16px
}
.modal-score-item {
  position:relative;
  background:var(--color-bg);
  border:2px solid var(--color-black);
  padding:16px;
  min-width:180px;
  flex:1;
  cursor:help
}
.modal-score-item:hover {
  background:var(--color-white)
}
.modal-score-label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--color-gray);
  margin-bottom:8px
}
.modal-score-bar {
  display:flex;
  gap:3px;
  margin-bottom:8px
}
.modal-score-bar span {
  width:20px;
  height:8px;
  background:var(--color-gray-light);
  border:1px solid var(--color-black)
}
.modal-score-bar span.filled {
  background:var(--color-green)
}
.modal-score-bar span.filled.medium {
  background:var(--color-orange)
}
.modal-score-bar span.filled.hard {
  background:var(--color-pink)
}
.modal-score-value {
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700
}
.modal-score-tooltip {
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  background:var(--color-black);
  color:var(--color-white);
  padding:12px 16px;
  font-size:12px;
  line-height:1.5;
  border:2px solid var(--color-black);
  box-shadow:4px 4px #0003;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:50;
  pointer-events:none;
  margin-bottom:8px
}
.modal-score-tooltip:after {
  content:"";
  position:absolute;
  top:100%;
  left:24px;
  border:8px solid transparent;
  border-top-color:var(--color-black)
}
.modal-score-item:hover .modal-score-tooltip {
  opacity:1;
  visibility:visible
}
.value-prop-section {
  background:var(--color-yellow)
}
.value-prop-section .section-title {
  color:var(--color-black)
}
.value-prop-text {
  font-size:18px;
  font-weight:500;
  line-height:1.6
}
@media(max-width:768px) {
  .hero-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:0 12px
  }
  .hero-item {
    min-height:120px;
    padding:12px;
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .hero-stat-number {
    font-size:28px
  }
  .hero-nav-label {
    font-size:16px
  }
  .hero-stat-label,
  .hero-nav-sub {
    font-size:11px
  }
  .hero-cta-text {
    font-size:10px;
    margin-top:8px
  }
  .hero {
    padding:100px 16px 40px
  }
  .hero-title {
    font-size:36px;
    letter-spacing:-1px
  }
  .hero-subtitle {
    font-size:16px;
    max-width:100%;
    padding:0 16px
  }
  .hero-nav {
    flex-direction:column;
    gap:32px;
    margin-top:32px
  }
  .nav-arrow {
    display:none
  }
  .control-panel,
  .enhanced-filters {
    margin:0 4px 12px;
    padding:16px 12px;
    box-shadow:4px 4px 0 var(--color-black);
    width:auto;
    box-sizing:border-box
  }
  .filter-group {
    margin-bottom:12px
  }
  .filter-row {
    flex-direction:column;
    align-items:stretch;
    gap:12px
  }
  .control-select {
    width:100%;
    min-width:0;
    font-size:12px;
    padding:12px 16px
  }
  .search-box {
    margin-bottom:16px;
    width:100%;
    box-sizing:border-box
  }
  .filter-group-label {
    font-size:10px;
    margin-bottom:8px
  }
  .chip-row {
    gap:6px
  }
  .filter-chip,
  .sort-chip {
    padding:6px 10px;
    font-size:10px;
    box-shadow:3px 3px 0 var(--color-black)
  }
  .year-timeline {
    gap:4px
  }
  .year-chip {
    padding:4px 8px;
    font-size:10px;
    box-shadow:2px 2px 0 var(--color-black)
  }
  .active-filters-bar {
    padding:10px 12px;
    flex-direction:column;
    gap:8px;
    text-align:center
  }
  .sort-panel {
    margin:0 4px 16px!important;
    padding:12px 8px!important;
    gap:8px;
    flex-direction:column;
    align-items:flex-start;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box;
    box-shadow:4px 4px 0 var(--color-black)!important
  }
  .sort-panel .container {
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .sort-buttons {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    width:100%;
    gap:8px;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .sort-buttons::-webkit-scrollbar {
    display:none
  }
  .sort-btn {
    flex-shrink:0;
    white-space:nowrap;
    font-size:10px;
    padding:8px 12px
  }
  .sort-label {
    font-size:10px
  }
  .filters-section {
    padding:12px;
    position:relative
  }
  .filters-section:before,
  .filters-section:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:20px;
    z-index:2;
    pointer-events:none;
    display:none
  }
  .filters-section:before {
    left:0;
    background:linear-gradient(to right,var(--primary-white),transparent)
  }
  .filters-section:after {
    right:0;
    background:linear-gradient(to left,var(--primary-white),transparent)
  }
  .filters-section:before,
  .filters-section:after {
    display:block
  }
  .category-filters {
    gap:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:4px 0 12px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }
  .category-filters::-webkit-scrollbar {
    display:none
  }
  .filter-pill {
    padding:10px 14px;
    font-size:11px;
    white-space:nowrap;
    flex-shrink:0;
    min-height:40px;
    scroll-snap-align:start;
    border-width:2px
  }
  .stat-item {
    text-align:center
  }
  .stat-number {
    font-size:18px;
    margin-bottom:2px
  }
  .stat-label {
    font-size:8px;
    letter-spacing:.05em
  }
  .score-filters {
    padding:12px;
    margin-top:12px
  }
  .sliders-grid {
    grid-template-columns:1fr;
    gap:8px
  }
  .slider-group {
    padding:8px;
    border-width:2px
  }
  .slider-header {
    margin-bottom:4px;
    font-size:11px
  }
  .score-label {
    min-width:80px;
    flex-shrink:0
  }
  .category-filters {
    max-width:100%;
    overflow-x:auto
  }
  .cards-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .startup-card {
    padding:0!important
  }
  .card-name {
    font-size:18px
  }
  .card-scores {
    flex-direction:column;
    gap:12px
  }
  .score-hint {
    position:static;
    margin-bottom:8px;
    display:block;
    text-align:center
  }
  .score-tooltip {
    left:0;
    right:0;
    transform:none;
    width:auto
  }
  .modal {
    max-height:100vh;
    border-radius:0
  }
  .modal-overlay {
    padding:0;
    align-items:stretch
  }
  .modal-company-name {
    font-size:24px
  }
  .modal-meta {
    font-size:12px
  }
  .modal-section {
    padding:16px 20px
  }
  .modal-scores {
    flex-direction:column;
    gap:16px
  }
  .modal-score-item {
    min-width:100%
  }
  .people-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .footer {
    padding:24px 16px
  }
}
@media(max-width:768px) {
  .filter-pill,
  .reset-filters-btn,
  .modal-close {
    min-height:44px;
    min-width:44px
  }
}
.loading {
  text-align:center;
  padding:80px 24px;
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--color-gray)
}
.floating-bucket {
  position:relative;
  background:var(--brand-cyan);
  border:var(--border-width) solid var(--color-black);
  padding:12px 24px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-weight:700;
  cursor:pointer;
  box-shadow:6px 6px 0 var(--color-black);
  transition:all .2s;
  z-index:90;
  text-decoration:none;
  color:var(--brand-blue)
}
.back-to-top {
  position:fixed;
  bottom:100px;
  right:30px;
  width:50px;
  height:50px;
  background:var(--color-yellow);
  border:var(--border-width) solid var(--color-black);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:6px 6px 0 var(--color-black);
  transition:all .2s;
  z-index:90;
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.back-to-top.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.back-to-top:hover {
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--color-black)
}
.back-to-top:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--color-black)
}
.back-to-top-icon {
  font-size:1.5rem;
  font-weight:900
}
.floating-bucket:hover {
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--color-black)
}
.floating-bucket:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--color-black)
}
.bucket-icon {
  font-size:1.5rem
}
.bucket-text i {
  font-style:italic;
  font-weight:400;
  font-size:.85rem;
  opacity:.8;
  display:inline-block;
  margin-left:2px
}
.request-modal {
  max-width:500px;
  background:var(--color-bg);
  padding:40px
}
.request-modal .modal-close {
  top:-10px;
  right:-10px;
  background:var(--color-black);
  color:var(--color-white)
}
.request-modal-header {
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:2px dashed var(--color-black)
}
.request-modal-header h2 {
  font-family:var(--font-mono);
  font-size:1.5rem;
  margin-bottom:8px
}
.request-modal-header p {
  color:var(--color-gray);
  font-size:.9rem
}
.request-form {
  display:flex;
  flex-direction:column;
  gap:20px
}
.form-group {
  display:flex;
  flex-direction:column;
  gap:8px
}
.form-group label {
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:700
}
.form-group select,
.form-group textarea,
.form-group input {
  padding:12px;
  border:2px solid var(--color-black);
  font-family:var(--font-main);
  font-size:1rem;
  background:var(--color-white);
  border-radius:0
}
.form-group textarea {
  min-height:120px;
  resize:vertical
}
.submit-request-btn {
  background:var(--color-pink);
  color:var(--color-white);
  border:2px solid var(--color-black);
  padding:16px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.1rem;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--color-black);
  transition:all .2s
}
.submit-request-btn:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.submit-request-btn:active {
  transform:translate(2px,2px);
  box-shadow:0 0 0 var(--color-black)
}
.request-status {
  margin-top:16px;
  padding:12px;
  font-family:var(--font-mono);
  font-size:.9rem;
  display:none
}
.request-status.success {
  display:block;
  background:var(--color-green-light);
  border:2px solid var(--color-green);
  color:var(--color-green)
}
.request-status.error {
  display:block;
  background:var(--color-pink-light);
  border:2px solid var(--color-pink);
  color:var(--color-pink)
}
.footer {
  background:var(--color-black);
  color:var(--color-white);
  padding:60px 24px;
  text-align:center;
  margin-top:80px
}
.footer-sub {
  margin-top:12px;
  color:var(--color-gray);
  font-size:.9rem
}
.footer-sub a {
  color:var(--color-pink);
  text-decoration:none
}
@media(max-width:480px) {
  * {
    max-width:100vw!important;
    box-sizing:border-box!important
  }
  #hero-canvas {
    width:100%!important;
    height:auto!important;
    max-width:100vw!important
  }
  .hero {
    padding:100px 12px 40px!important
  }
  .container {
    padding:0 8px!important;
    max-width:100%!important
  }
  section {
    margin-left:0!important;
    margin-right:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
    box-sizing:border-box!important
  }
  p, .section-header {
    max-width:100%!important;
    box-sizing:border-box!important;
    word-wrap:break-word!important
  }
  .main-content-area {
    padding-top:80px!important;
    padding-left:0!important;
    padding-right:0!important;
    max-width:100vw!important
  }
  .main-content {
    max-width:100%!important;
    overflow-x:hidden!important;
    padding:40px 8px 80px!important
  }
  .floating-bucket {
    position:relative!important;
    bottom:auto!important;
    right:auto!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    height:auto!important;
    padding:12px 16px!important;
    box-shadow:3px 3px 0 var(--color-black)!important;
    font-size:12px!important;
    flex-direction:column!important;
    text-align:center!important;
    gap:8px!important;
    display:inline-flex!important;
    box-sizing:border-box!important
  }
  .bucket-icon {
    font-size:2.5rem!important
  }
  .bucket-text {
    line-height:1.5!important;
    word-wrap:break-word;
    max-width:100%;
    font-weight:600
  }
  .bucket-text i {
    font-size:11px!important;
    display:block;
    margin-top:2px
  }
  .back-to-top {
    bottom:96px;
    right:24px;
    box-shadow:4px 4px 0 var(--color-black)
  }
  .request-modal {
    padding:24px;
    width:calc(100% - 32px);
    max-height:85vh
  }
  .request-modal .modal-close {
    top:12px;
    right:12px;
    width:36px
  }
}
@media(min-width:481px) and (max-width:768px) {
  .container {
    padding:0 16px!important
  }
  .floating-bucket {
    position:relative!important;
    bottom:auto!important;
    right:auto!important;
    width:auto!important;
    max-width:calc(100% - 32px)!important;
    height:auto!important;
    padding:14px 20px!important;
    box-shadow:4px 4px 0 var(--color-black)!important;
    font-size:14px!important;
    flex-direction:row!important;
    text-align:left!important;
    gap:10px!important;
    align-items:center!important;
    display:inline-flex!important;
    box-sizing:border-box!important
  }
  .bucket-icon {
    font-size:1.8rem!important
  }
  .bucket-text {
    line-height:1.4;
    word-wrap:break-word;
    flex:1
  }
  .bucket-text i {
    font-size:12px!important
  }
}
@media(min-width:769px) and (max-width:1024px) {
  .floating-bucket {
    max-width:400px!important;
    padding:12px 24px!important;
    font-size:14px!important
  }
  .bucket-icon {
    font-size:1.5rem!important
  }
}
@media(min-width:1025px) {
  .floating-bucket {
    max-width:450px!important;
    padding:12px 24px!important;
    font-size:15px!important
  }
  .bucket-icon {
    font-size:1.5rem!important
  }
}
.hero-nav {
  display:flex;
  justify-content:center;
  gap:60px;
  margin-top:64px;
  position:relative;
  z-index:10
}
.hero-nav-item {
  position:relative
}
.hero-nav-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--color-white);
  border:4px solid var(--color-black);
  padding:15px 30px;
  text-decoration:none;
  color:var(--color-black);
  font-family:var(--font-mono);
  font-weight:700;
  box-shadow:12px 12px 0 var(--color-black);
  transition:all .1s ease;
  text-transform:uppercase;
  min-width:220px;
  text-align:center
}
.nav-label-wrapper {
  display:flex;
  flex-direction:column;
  line-height:1.2
}
.nav-label-top {
  font-size:18px
}
.nav-label-bottom {
  font-size:14px
}
.story-block .hero-nav-link {
  background:var(--color-orange);
  transform:rotate(-3deg)
}
.roadmap-block .hero-nav-link {
  background:var(--color-blue);
  color:var(--color-white);
  transform:rotate(2deg)
}
.ideas-block .hero-nav-link {
  background:var(--color-yellow);
  color:var(--color-black);
  transform:rotate(-1deg);
  border-color:var(--color-black)
}
.ideas-block .hero-nav-link.highlight {
  box-shadow:12px 12px 0 var(--color-pink)
}
.hero-nav-link:hover {
  transform:translate(4px,4px) rotate(0);
  box-shadow:6px 6px 0 var(--color-black)
}
.nav-arrow {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--color-pink);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  pointer-events:none;
  white-space:nowrap
}
.story-arrow {
  top:-50px;
  left:-110px;
  transform:rotate(-10deg)
}
.roadmap-arrow {
  top:-60px;
  right:-120px;
  transform:rotate(10deg)
}
.ideas-arrow {
  bottom:-60px;
  right:-80px;
  transform:rotate(-10deg);
  color:var(--color-green)
}
.hand-drawn-svg {
  filter:drop-shadow(3px 3px 0 var(--color-black))
}
.arrow-label {
  margin-top:-5px;
  background:var(--color-black);
  color:var(--color-white);
  padding:4px 10px;
  border:2px solid var(--color-white)
}
@media(max-width:900px) {
  .hero-nav {
    flex-direction:column;
    align-items:center;
    gap:60px;
    margin-top:40px
  }
  .nav-arrow {
    display:none
  }
}
.insights-cta-section {
  padding:0 0 40px;
  text-align:center
}
.insights-trigger-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-black);
  color:var(--color-white);
  padding:18px 30px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.2rem;
  text-decoration:none;
  border:4px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-pink);
  transition:all .2s ease;
  width:100%;
  max-width:600px;
  margin:0 auto;
  gap:12px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden
}
.insights-trigger-btn:hover {
  transform:translate(-4px,-4px);
  box-shadow:12px 12px 0 var(--color-pink);
  background:var(--color-white);
  color:var(--color-black)
}
.insights-trigger-btn:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--color-pink)
}
.insights-trigger-btn .icon {
  font-size:1.5rem;
  animation:pulse 2s infinite
}
@keyframes pulse {
  0% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.2)
  }
  to {
    transform:scale(1)
  }
}
@media(max-width:768px) {
  .insights-trigger-btn {
    font-size:1rem;
    padding:16px;
    box-shadow:6px 6px 0 var(--color-pink)
  }
}
.insights-cta-section {
  padding:60px 0;
  background:var(--color-bg)
}
.insights-trigger-btn.full-width {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:var(--color-orange);
  color:var(--color-white);
  text-decoration:none;
  font-family:var(--font-main);
  font-weight:800;
  font-size:1.8rem;
  padding:35px;
  border:var(--border-width) solid var(--color-black);
  box-shadow:10px 10px 0 var(--color-black);
  transition:all .2s cubic-bezier(.175,.885,.32,1.275);
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer
}
.insights-trigger-btn.full-width:hover {
  transform:translate(-4px,-4px);
  box-shadow:14px 14px 0 var(--color-black);
  background:var(--color-pink);
  color:var(--color-white)
}
.insights-trigger-btn.full-width:active {
  transform:translate(2px,2px);
  box-shadow:6px 6px 0 var(--color-black)
}
.insights-trigger-btn.full-width .icon {
  margin-right:20px;
  font-size:2.5rem
}
@media(max-width:768px) {
  .insights-trigger-btn.full-width {
    font-size:1.1rem;
    padding:24px 15px;
    text-align:center
  }
  .insights-trigger-btn.full-width .icon {
    font-size:1.6rem;
    margin-right:10px
  }
}
.showcase-section {
  background:var(--color-yellow);
  padding:64px 24px;
  border-bottom:var(--border-width) solid var(--color-black);
  position:relative;
  overflow:hidden
}
.showcase-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center
}
.showcase-content {
  position:relative;
  z-index:2
}
.showcase-title {
  font-size:clamp(32px,5vw,48px);
  font-weight:900;
  margin-bottom:24px;
  text-transform:uppercase;
  background:var(--color-white);
  display:inline-block;
  padding:8px 16px;
  border:var(--border-width) solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-black)
}
.showcase-desc {
  font-size:18px;
  font-weight:500;
  margin-bottom:32px;
  max-width:500px
}
.showcase-cta {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--color-black);
  color:var(--color-white);
  padding:16px 32px;
  font-family:var(--font-mono);
  font-weight:700;
  text-decoration:none;
  font-size:18px;
  border:var(--border-width) solid var(--color-white);
  box-shadow:8px 8px 0 var(--color-white);
  transition:all .1s
}
.showcase-cta:hover {
  transform:translate(-2px,-2px);
  box-shadow:12px 12px 0 var(--color-white);
  background:var(--color-white);
  color:var(--color-black);
  border-color:var(--color-black)
}
.showcase-image-wrapper {
  position:relative;
  transform:rotate(2deg);
  transition:transform .3s ease
}
.showcase-image-wrapper:hover {
  transform:rotate(0) scale(1.02)
}
.showcase-image {
  width:100%;
  border:var(--border-width) solid var(--color-black);
  box-shadow:16px 16px 0 var(--color-black)
}
.showcase-badge {
  position:absolute;
  top:-20px;
  right:-20px;
  background:var(--color-pink);
  color:var(--color-white);
  padding:8px 16px;
  font-family:var(--font-mono);
  font-weight:700;
  border:var(--border-width) solid var(--color-black);
  transform:rotate(5deg)
}
@media(max-width:900px) {
  .showcase-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .showcase-image-wrapper {
    order:-1;
    transform:rotate(0)
  }
}
.main-layout {
  display:flex;
  min-height:100vh;
  width:100%;
  overflow-x:hidden
}
.main-layout.below-hero {
  min-height:auto;
  margin-top:20px
}
.main-content-area {
  flex:1;
  min-width:0;
  padding-top:80px;
  width:100%;
  overflow-x:hidden
}
.search-bar-section {
  background:var(--brutalist-mustard, #EAB308);
  border:4px solid #000;
  padding:24px 32px;
  margin-bottom:24px;
  box-sizing:border-box;
  box-shadow:8px 8px #000
}
@media(max-width:768px) {
  .search-bar-section {
    padding:16px;
    margin:0 0 16px
  }
  .search-bar-label,
  .search-bar-input {
    font-size:20px
  }
  .sort-pills-row {
    gap:4px;
    flex-wrap:nowrap
  }
  .sort-pill {
    padding:6px 8px;
    font-size:8px;
    flex-shrink:0;
    white-space:nowrap;
    box-shadow:2px 2px #000;
    border-width:2px
  }
}
.search-bar-container {
  position:relative;
  cursor:pointer;
  margin-bottom:20px
}
.search-bar-label {
  font-family:var(--font-heading, "Anton", sans-serif);
  font-size:clamp(28px,5vw,48px);
  font-weight:400;
  font-style:italic;
  color:#000;
  display:block;
  transition:opacity .2s ease
}
.search-bar-input {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  font-family:var(--font-heading, "Anton", sans-serif);
  font-size:clamp(28px,5vw,48px);
  font-weight:400;
  font-style:italic;
  color:#000;
  background:transparent;
  border:none;
  outline:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease
}
.search-bar-input::placeholder {
  color:#0006;
  font-style:italic
}
.search-bar-container.active .search-bar-label {
  opacity:0;
  pointer-events:none
}
.search-bar-container.active .search-bar-input {
  opacity:1;
  pointer-events:auto
}
.sort-pills-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.sort-pill {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  padding:10px 20px;
  background:#fff;
  color:#000;
  border:3px solid #000;
  box-shadow:4px 4px #000;
  cursor:pointer;
  transition:all .15s ease
}
.sort-pill:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px #000
}
.sort-pill.active {
  background:#000;
  color:#fff;
  transform:translate(2px,2px);
  box-shadow:2px 2px #000
}
body.has-sidebar {
  overflow-x:hidden
}
.main-mobile-header {
  display:flex;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--brand-orange);
  border-bottom:4px solid var(--brand-blue);
  padding:12px 16px;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.main-mobile-header .hamburger-btn {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  background:#fff;
  border:3px solid #000;
  box-shadow:3px 3px #000;
  cursor:pointer;
  padding:8px;
  transition:transform .15s ease,box-shadow .15s ease
}
.main-mobile-header .hamburger-btn:hover {
  transform:translate(-2px,-2px);
  box-shadow:5px 5px #000
}
.main-mobile-header .hamburger-line {
  width:100%;
  height:3px;
  background:#000;
  transition:transform .2s ease,opacity .2s ease
}
.main-mobile-header .hamburger-btn.active .hamburger-line:nth-child(1) {
  transform:rotate(45deg) translate(5px,5px)
}
.main-mobile-header .hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity:0
}
.main-mobile-header .hamburger-btn.active .hamburger-line:nth-child(3) {
  transform:rotate(-45deg) translate(6px,-6px)
}
.main-mobile-header .mobile-title {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  flex:1;
  text-align:center;
  color:var(--brand-blue);
}
.main-mobile-header .skull-icon {
  font-size:24px;
  text-decoration:none
}
.drawer-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:#00000080;
  z-index:1001;
  opacity:0;
  transition:opacity .3s ease
}
.drawer-overlay.active {
  display:block;
  opacity:1
}
.main-sidebar {
  width:360px;
  min-width:360px;
  background:#fdfbf7;
  border-right:4px solid #000;
  border-top:4px solid #000;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  align-self:flex-start;
  max-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:100
}
.main-sidebar::-webkit-scrollbar {
  width:8px
}
.main-sidebar::-webkit-scrollbar-track {
  background:#fdfbf7
}
.main-sidebar::-webkit-scrollbar-thumb {
  background:#000;
  border:2px solid #FDFBF7
}
.sidebar-section {
  border-bottom:3px solid #000
}
/* .section-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  background:var(--brutalist-mustard, #EAB308);
  border-bottom:3px solid #000;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px
}
.section-head .header-icon {
  font-size:18px
}
.section-head .header-title {
  flex:1
} */
.sidebar-close {
  display:none;
  width:32px;
  height:32px;
  background:#fff;
  border:3px solid #000;
  box-shadow:3px 3px #000;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease
}
.sidebar-close:hover {
  transform:translate(-2px,-2px);
  box-shadow:5px 5px #000
}
.nav-pills {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px
}
.nav-pill {
  display:block;
  padding:12px 16px;
  background:#fff;
  border:3px solid #000;
  box-shadow:4px 4px #000;
  font-family:var(--font-main, "Space Grotesk", sans-serif);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  color:#000;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
.nav-pill:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px #000;
  background:var(--color-pink, #FF90E8)
}
.nav-pill:active {
  transform:translate(1px,1px);
  box-shadow:2px 2px #000
}
.nav-pill.nav-pill-highlight {
  background:var(--brutalist-mustard, #EAB308);
  font-weight:700
}
.nav-pill.nav-pill-highlight:hover {
  background:var(--color-orange, #F97316)
}
.search-nav-header {
  background:var(--brutalist-mustard, #EAB308);
  border-bottom:3px solid #000
}
.search-nav-header .search-label {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,.3)
}
.sidebar-search-wrapper {
  padding:12px 16px;
  background:#fff;
  border-bottom:3px solid #000
}
.nav-header {
  border-bottom:none;
  padding-bottom:0
}
.sidebar-sort-btns {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px
}
.sidebar-sort-btn {
  display:block;
  width:100%;
  padding:12px 16px;
  background:#fff;
  border:3px solid #000;
  box-shadow:4px 4px #000;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
.sidebar-sort-btn:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px #000
}
.sidebar-sort-btn.active {
  background:var(--brutalist-mustard, #EAB308)
}
.sidebar-sort-btn:active {
  transform:translate(1px,1px);
  box-shadow:2px 2px #000
}
.filter-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:var(--brutalist-mustard, #EAB308);
  border-bottom:3px solid #000
}
.sidebar-search-input {
  flex:1;
  padding:10px 12px;
  border:3px solid #000;
  font-family:var(--font-main, "Space Grotesk", sans-serif);
  font-size:14px;
  background:#fff;
  box-shadow:3px 3px #000
}
.sidebar-search-input:focus {
  outline:none;
  box-shadow:4px 4px 0 var(--color-pink, #FF90E8)
}
.filter-tree {
  padding:0
}
.filter-category {
  border-bottom:2px solid #ddd
}
.filter-category:last-child {
  border-bottom:none
}
.filter-category-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  cursor:pointer;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  background:#fff;
  border:none;
  width:100%;
  text-align:left;
  transition:background .15s ease
}
.filter-category-header:hover {
  background:#0000000d
}
.filter-category-header .category-icon {
  font-size:16px
}
.filter-category-header .category-name {
  flex:1
}
.filter-category-header .expand-icon {
  font-size:10px;
  transition:transform .2s ease;
  opacity:.6
}
.filter-category-header.expanded .expand-icon {
  transform:rotate(180deg)
}
.filter-options {
  display:none;
  padding:0 16px 12px
}
.filter-options.expanded {
  display:block
}
.filter-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  margin-bottom:4px;
  cursor:pointer;
  font-family:var(--font-main, "Space Grotesk", sans-serif);
  font-size:13px;
  background:#fff;
  border:2px solid #ddd;
  transition:all .15s ease
}
.filter-option:hover {
  border-color:#000;
  background:#f5f5f0
}
.filter-option.selected {
  background:var(--color-pink, #FF90E8);
  border-color:#000;
  font-weight:600
}
.filter-checkbox {
  width:18px;
  height:18px;
  border:2px solid #000;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.filter-option.selected .filter-checkbox {
  background:#000
}
.filter-option.selected .filter-checkbox:after {
  content:"✓";
  color:#fff;
  font-size:12px;
  font-weight:700
}
.filter-option-label {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.filter-option-count {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:11px;
  opacity:.6
}
.lists-section {
  display:flex;
  flex-direction:column
}
.top10-tree {
  padding:8px 0
}
.top10-category {
  margin-bottom:4px
}
.top10-category-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  cursor:pointer;
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
  transition:background .15s ease
}
.top10-category-header:hover {
  background:#0000000d
}
.top10-category-header .folder-emoji {
  font-size:16px
}
.top10-category-header .category-name {
  flex:1
}
.top10-category-header .expand-icon {
  font-size:10px;
  transition:transform .2s ease;
  opacity:.6
}
.top10-category-header.expanded .expand-icon {
  transform:rotate(180deg)
}
.top10-category-items {
  display:none;
  padding-left:20px;
  border-left:2px dashed #999;
  margin-left:24px
}
.top10-category-items.expanded {
  display:block
}
.top10-list-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-family:var(--font-main, "Space Grotesk", sans-serif);
  font-size:13px;
  font-weight:500;
  color:#000;
  text-decoration:none;
  cursor:pointer;
  transition:all .15s ease
}
.top10-list-item:before {
  content:"├─";
  font-family:var(--font-mono, "Space Mono", monospace);
  opacity:.4;
  font-size:12px
}
.top10-list-item:last-child:before {
  content:"└─"
}
.top10-list-item:hover {
  background:#0000000d;
  padding-left:20px
}
.top10-list-item .list-icon {
  font-size:14px
}
.top10-list-item .list-name {
  flex:1
}
.sidebar-footer {
  padding:16px;
  border-top:3px solid #000;
  background:#000;
  margin-top:auto
}
.sidebar-footer .footer-text {
  font-family:var(--font-mono, "Space Mono", monospace);
  font-size:11px;
  color:#fff9;
  text-transform:uppercase;
  letter-spacing:1px
}
@media(max-width:1024px) {
  .main-sidebar {
    width:280px;
    min-width:280px
  }
}
@media(max-width:768px) {
  .main-mobile-header {
    display:flex
  }
  body.has-sidebar .main-content-area {
    padding-top:80px
  }
  .main-sidebar {
    position:fixed;
    top:0;
    left:-340px;
    width:320px;
    min-width:320px;
    height:100vh;
    z-index:1002;
    transition:left .3s ease
  }
  .main-sidebar.open {
    left:0
  }
  .sidebar-close {
    display:flex;
    align-items:center;
    justify-content:center
  }
  .main-layout {
    flex-direction:column
  }
  .filter-tree {
    max-height:none
  }
  .lists-section {
    min-height:auto
  }
}