/* ==========================================
   JUST FUCKING STOP ALREADY
   A journey through design chaos
   ========================================== */

/* CSS Custom Properties */
:root {
  --electric-blue: #0066FF;
  --hot-pink: #FF0066;
  --acid-green: #00FF66;
  --deep-purple: #6600FF;
  --pure-black: #000000;
  --pure-white: #FFFFFF;
  --js-yellow: #F7DF1E;
  --react-blue: #61DAFB;
  --ruby-red: #CC342D;
  --go-cyan: #00ADD8;
  --cpp-dark: #1a1a2e;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

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

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

body {
  font-family: var(--font-main);
  line-height: 1.7;
  color: var(--pure-black);
  overflow-x: hidden;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

p {
  margin-bottom: 1.25rem;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

a {
  color: var(--electric-blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

a:hover {
  border-bottom-color: var(--electric-blue);
}

/* ==========================================
   STICKY NAV
   ========================================== */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.sticky-nav.visible {
  transform: translateY(0);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--pure-white);
  letter-spacing: 0.05em;
  border-bottom: none;
}

.nav-logo:hover {
  color: var(--hot-pink);
  border-bottom: none;
}

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

.nav-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--pure-white);
  border-bottom: none;
}

/* ==========================================
   HERO: Tabloid/Punk Zine
   ========================================== */
.hero {
  min-height: 92vh;
  background: var(--pure-black);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

.hero-content {
  text-align: center;
  z-index: 1;
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-title span {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.hero-just {
  font-size: 3rem;
  color: var(--pure-white);
}

.hero-fucking {
  font-size: 4.5rem;
  color: var(--hot-pink);
  transform: rotate(-2deg);
  text-shadow: 3px 3px 0 var(--deep-purple);
}

.hero-stop {
  font-size: 5rem;
  color: var(--pure-white);
  transform: rotate(1deg);
}

.hero-already {
  font-size: 3.5rem;
  color: var(--acid-green);
  transform: rotate(-1deg);
}

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: bolder;
  max-width: 75%;
  margin: 1.2rem auto;
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: bounce 2s ease-in-out infinite;
}

.scroll-indicator span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ==========================================
   INTRO
   ========================================== */
.intro {
  background: var(--pure-white);
  padding: 6rem 0;
  text-align: center;
}

.intro-text {
  font-size: 1.4rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.highlight-html {
  background: linear-gradient(135deg, #E44D26, #F16529);
  color: white;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-weight: 600;
}

.highlight-react {
  background: linear-gradient(135deg, #61DAFB, #00D4FF);
  color: #20232a;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-weight: 600;
}

.highlight-rails {
  background: linear-gradient(135deg, #CC342D, #FF4136);
  color: white;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-weight: 600;
}

.intro-punchline {
  font-size: 1.6rem;
  font-weight: 700;
}

.intro-point {
  font-size: 1.3rem;
  color: #666;
  font-style: italic;
}

/* ==========================================
   PHILOSOPHY: Deep Purple Gradient
   ========================================== */
.philosophy {
  background: linear-gradient(135deg, #1a0033 0%, #330066 50%, #4a0080 100%);
  color: var(--pure-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.philosophy h2 {
  color: var(--pure-white);
}

.philosophy .callout {
  background: rgba(255,255,255,0.1);
  border-left: 4px solid var(--hot-pink);
  padding: 1.5rem;
  margin: 2rem 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.floating-question {
  position: absolute;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  animation: float 6s ease-in-out infinite;
}

.floating-question { top: 10%; right: 10%; }
.floating-question.q2 { top: 50%; left: 5%; animation-delay: -2s; font-size: 6rem; }
.floating-question.q3 { bottom: 10%; right: 20%; animation-delay: -4s; font-size: 10rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* ==========================================
   HAMMER: Construction Zone
   ========================================== */
.hammer {
  background: #1a1a1a;
  color: var(--pure-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hazard-stripe {
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #FFB800,
    #FFB800 20px,
    #000 20px,
    #000 40px
  );
}

.hazard-stripe.top { margin-bottom: 3rem; }
.hazard-stripe.bottom { margin-top: 3rem; }

.hammer h2 {
  color: #FFB800;
}

.dijkstra {
  background: rgba(255,184,0,0.1);
  border: none;
  padding: 2rem;
  margin: 2rem 0;
  font-size: 1.3rem;
  font-style: italic;
  position: relative;
}

.dijkstra::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 6rem;
  color: rgba(255,184,0,0.2);
  font-family: Georgia, serif;
}

.dijkstra cite {
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  font-style: normal;
  color: #FFB800;
}

.bold-statement {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFB800;
  text-align: center;
  margin: 2rem 0;
}

.tool-list {
  list-style: none;
  margin: 2rem 0;
}

.tool-list li {
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
}

.tool-list li::before {
  content: '🔧';
  position: absolute;
  left: 0;
}

.floating-tool {
  position: absolute;
  font-size: 3rem;
  opacity: 0.15;
  animation: spin-slow 20s linear infinite;
}

.hammer-icon { top: 20%; right: 10%; }
.wrench-icon { bottom: 30%; left: 5%; animation-delay: -7s; }
.screwdriver-icon { top: 60%; right: 5%; animation-delay: -14s; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================
   POETRY: Lavender Elegance
   ========================================== */
.poetry {
  background: linear-gradient(180deg, #f8f0ff 0%, #fff0f5 100%);
  padding: 6rem 0;
}

.poetry h2 {
  color: #6b4c7a;
}

.poetry .lead {
  font-size: 1.3rem;
  font-weight: 500;
  color: #6b4c7a;
}

.poetry-quote {
  font-size: 1.4rem;
  font-style: italic;
  color: #8b5a9e;
  border-left: 3px solid #d4a5d9;
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* ==========================================
   HOT: 90s Web Chaos
   ========================================== */
.hot {
  background: linear-gradient(135deg, #00CED1 0%, #FF1493 50%, #FFD700 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hot-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,0,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,255,255,0.3) 0%, transparent 50%);
  animation: pulse-bg 4s ease-in-out infinite alternate;
}

@keyframes pulse-bg {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.hot .container {
  position: relative;
  z-index: 1;
}

.hot-badge {
  display: inline-block;
  background: #FF0000;
  color: white;
  padding: 0.5rem 1.5rem;
  font-weight: 900;
  font-size: 1.2rem;
  transform: rotate(-3deg);
  margin-bottom: 1rem;
  box-shadow: 3px 3px 0 #000;
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1deg); }
}

.hot h2 {
  color: var(--pure-black);
  text-shadow: 2px 2px 0 #FFD700;
}

.hot-list {
  list-style: none;
  margin: 2rem 0;
}

.hot-list li {
  padding: 0.75rem 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 3px;
  animation: blink 1s step-end infinite;
}

.badge.new { background: #FF0000; color: white; }
.badge.viral { background: #FF00FF; color: white; animation-delay: 0.25s; }
.badge.cool { background: #00FF00; color: black; animation-delay: 0.5s; }
.badge.loud { background: #FFFF00; color: black; animation-delay: 0.75s; }

@keyframes blink {
  50% { opacity: 0.5; }
}

.hot-conclusion {
  font-size: 1.3rem;
  font-weight: 700;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 1rem;
  margin-top: 2rem;
}

.marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--pure-black);
  color: #FF0000;
  padding: 0.5rem 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 0.9rem;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================
   FREEDOM: Sky & Liberation
   ========================================== */
.freedom {
  background: linear-gradient(180deg, #87CEEB 0%, #FFB6C1 50%, #FFA07A 100%);
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: rgba(255,255,255,0.8);
  border-radius: 100px;
  animation: drift 30s linear infinite;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: inherit;
}

.cloud.c1 {
  width: 200px;
  height: 60px;
  top: 10%;
  left: -200px;
}
.cloud.c1::before { width: 100px; height: 80px; top: -40px; left: 30px; }
.cloud.c1::after { width: 80px; height: 60px; top: -30px; left: 100px; }

.cloud.c2 {
  width: 150px;
  height: 45px;
  top: 25%;
  left: -150px;
  animation-delay: -10s;
  animation-duration: 35s;
}
.cloud.c2::before { width: 70px; height: 55px; top: -30px; left: 25px; }

.cloud.c3 {
  width: 180px;
  height: 50px;
  top: 5%;
  left: -180px;
  animation-delay: -20s;
  animation-duration: 40s;
}
.cloud.c3::before { width: 90px; height: 70px; top: -35px; left: 40px; }
.cloud.c3::after { width: 60px; height: 45px; top: -20px; left: 110px; }

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 300px)); }
}

.freedom .container {
  position: relative;
  z-index: 1;
}

.freedom h2 {
  color: #2c3e50;
}

.matz-quote {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  font-size: 1.4rem;
  font-style: italic;
  color: #2c3e50;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.freedom-callout {
  font-weight: 600;
  color: #c0392b;
}

.freedom-final {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  text-align: center;
  margin-top: 2rem;
}

.rainbow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3
  );
}

/* ==========================================
   OVERKILL ZONE HEADER
   ========================================== */
.overkill-header {
  background: var(--pure-black);
  color: var(--pure-white);
  padding: 4rem 0;
  text-align: center;
}

.overkill-header h2 {
  font-size: 3rem;
  background: linear-gradient(90deg, var(--hot-pink), var(--acid-green), var(--electric-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.overkill-header p {
  color: rgba(255,255,255,0.6);
  font-size: 1.2rem;
}

/* ==========================================
   JAVASCRIPT: Yellow Chaos
   ========================================== */
.js-overkill {
  background: var(--js-yellow);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.js-chaos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.npm-box {
  position: absolute;
  font-size: 2rem;
  opacity: 0.15;
  animation: fall 10s linear infinite;
}

.npm-box.b1 { left: 10%; animation-delay: 0s; }
.npm-box.b2 { left: 30%; animation-delay: -2s; }
.npm-box.b3 { left: 50%; animation-delay: -4s; }
.npm-box.b4 { left: 70%; animation-delay: -6s; }
.npm-box.b5 { left: 90%; animation-delay: -8s; }

@keyframes fall {
  from { transform: translateY(-50px) rotate(0deg); }
  to { transform: translateY(calc(100vh + 50px)) rotate(360deg); }
}

.js-overkill h2 {
  color: #323330;
}

.npm-count {
  font-family: var(--font-mono);
  background: #323330;
  color: var(--js-yellow);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.overkill-conclusion {
  font-size: 1.2rem;
  font-weight: 600;
  font-style: italic;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 2px dashed rgba(0,0,0,0.2);
}

/* ==========================================
   REACT: Corporate Blue Explosion
   ========================================== */
.react-overkill {
  background: linear-gradient(135deg, #20232a 0%, #282c34 100%);
  color: var(--pure-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.react-atoms {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atom {
  position: absolute;
  font-size: 4rem;
  opacity: 0.1;
  animation: orbit 8s linear infinite;
}

.atom.a1 { top: 20%; left: 10%; }
.atom.a2 { top: 60%; right: 10%; animation-delay: -2.6s; }
.atom.a3 { bottom: 10%; left: 30%; animation-delay: -5.2s; }

@keyframes orbit {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

.react-overkill .tilted {
  transform: rotate(-1deg);
}

.react-overkill h2 {
  color: var(--react-blue);
}

.react-overkill .overkill-conclusion {
  border-top-color: rgba(97,218,251,0.3);
}

/* ==========================================
   C++: Heavy Metal Gothic
   ========================================== */
.cpp-overkill {
  background: var(--cpp-dark);
  color: #eee;
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.matrix-rain {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, var(--cpp-dark) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,0,0,0.03) 2px,
      rgba(255,0,0,0.03) 4px
    );
  pointer-events: none;
}

.danger-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(ellipse at bottom, rgba(255,0,0,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cpp-overkill h2 {
  color: #ff4444;
  text-shadow: 0 0 20px rgba(255,0,0,0.5);
}

.cpp-overkill .overkill-conclusion {
  border-top-color: rgba(255,68,68,0.3);
  color: #ff6666;
}

/* ==========================================
   GO: Rigid Blocks
   ========================================== */
.go-overkill {
  background: #f0f0f0;
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.go-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  opacity: 0.05;
  pointer-events: none;
}

.go-block {
  background: var(--go-cyan);
}

.go-overkill h2 {
  color: #00758d;
}

.go-overkill .container {
  background: white;
  padding: 3rem;
  box-shadow: 0 0 0 4px var(--go-cyan);
}

.go-overkill .overkill-conclusion {
  border-top-color: rgba(0,173,216,0.3);
  color: #00758d;
}

/* ==========================================
   RAILS: Ruby Luxury
   ========================================== */
.rails-overkill {
  background: linear-gradient(135deg, #8B0000 0%, #CC342D 50%, #E74C3C 100%);
  color: var(--pure-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,0.1) 50%,
    transparent 60%
  );
  background-size: 300% 300%;
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.rails-overkill h2 {
  color: var(--pure-white);
}

.rails-actually {
  font-size: 1.3rem;
  font-style: italic;
  opacity: 0.8;
}

.rails-never {
  font-size: 2rem;
  margin: 1rem 0 2rem;
}

.rails-final {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

.gem-sparkle {
  position: absolute;
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
}

.gem-sparkle.s1 { top: 20%; right: 10%; }
.gem-sparkle.s2 { top: 50%; left: 5%; animation-delay: -0.6s; }
.gem-sparkle.s3 { bottom: 20%; right: 15%; animation-delay: -1.2s; }

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ==========================================
   RUBY: Love Letter
   ========================================== */
.ruby-overkill {
  background: linear-gradient(180deg, #fff5f5 0%, #ffe0e6 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hearts-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.heart {
  position: absolute;
  color: rgba(204,52,45,0.1);
  font-size: 3rem;
  animation: float-heart 8s ease-in-out infinite;
}

.heart.h1 { top: 10%; left: 10%; }
.heart.h2 { top: 30%; right: 15%; animation-delay: -1.5s; font-size: 2rem; }
.heart.h3 { top: 60%; left: 20%; animation-delay: -3s; font-size: 4rem; }
.heart.h4 { bottom: 20%; right: 10%; animation-delay: -4.5s; }
.heart.h5 { bottom: 30%; left: 5%; animation-delay: -6s; font-size: 2.5rem; }

@keyframes float-heart {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(10deg); }
}

.ruby-overkill h2 {
  color: var(--ruby-red);
}

.ruby-answer {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--ruby-red);
  margin-bottom: 2rem;
}

.ruby-always {
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ruby-red);
  text-align: center;
  margin-top: 2rem;
}

/* ==========================================
   LOVE: Dawn / New Beginning
   ========================================== */
.love {
  background: linear-gradient(180deg, #ffecd2 0%, #fcb69f 100%);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}

.particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.7) 1px, transparent 1px),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px;
  animation: twinkle 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes twinkle {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.love h2 {
  color: #6b4423;
}

.love-lead {
  font-size: 1.4rem;
  font-weight: 500;
  color: #8b5a3c;
}

.love-final {
  font-size: 1.8rem;
  font-weight: 700;
  color: #6b4423;
  text-align: center;
  margin-top: 2rem;
}

/* ==========================================
   ANSWER: Stacked Cards
   ========================================== */
.answer {
  background: linear-gradient(180deg, #f0f4ff 0%, #e8f0fe 100%);
  padding: 6rem 0;
  position: relative;
}

.answer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--electric-blue), var(--deep-purple), var(--hot-pink));
}

.answer h2 {
  color: var(--pure-black);
  text-align: center;
  font-size: 3rem;
}

.answer-intro {
  text-align: center;
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 3rem;
}

.answer-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.answer-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--pure-white);
  padding: 2rem;
  border-radius: 16px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.answer-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 12px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(0, 0, 0, 0.08);
}

.answer-card:nth-child(1) { border-left: 4px solid var(--electric-blue); }
.answer-card:nth-child(2) { border-left: 4px solid var(--deep-purple); }
.answer-card:nth-child(3) { border-left: 4px solid var(--hot-pink); }
.answer-card:nth-child(4) { border-left: 4px solid var(--acid-green); }
.answer-card:nth-child(5) { border-left: 4px solid #FF9500; }

.answer-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--electric-blue) 0%, var(--deep-purple) 100%);
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
  border-radius: 12px;
}

.answer-card:nth-child(1) .answer-number { background: linear-gradient(135deg, var(--electric-blue), #0044cc); }
.answer-card:nth-child(2) .answer-number { background: linear-gradient(135deg, var(--deep-purple), #4400aa); }
.answer-card:nth-child(3) .answer-number { background: linear-gradient(135deg, var(--hot-pink), #cc0055); }
.answer-card:nth-child(4) .answer-number { background: linear-gradient(135deg, var(--acid-green), #00cc55); }
.answer-card:nth-child(5) .answer-number { background: linear-gradient(135deg, #FF9500, #cc7700); }

.answer-content {
  flex: 1;
  min-width: 0;
}

.answer-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pure-black);
  margin: 0 0 0.5rem 0;
}

.answer-content p {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================
   META: Zen Minimal
   ========================================== */
.meta {
  background: #fafafa;
  padding: 6rem 0;
}

.meta .container {
  max-width: 650px;
}

.meta h2 {
  color: #888;
  font-weight: 600;
  font-size: 1.8rem;
}

.meta p {
  color: #666;
  font-size: 1.1rem;
}

.meta-final {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: var(--pure-black) !important;
  text-align: center;
  margin: 2rem 0;
}

.meta-wisdom {
  color: #444 !important;
  font-weight: 500;
}

.meta-answer {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--pure-black) !important;
  text-align: center;
}

/* ==========================================
   FINALE: Sunset Curtain Call
   ========================================== */
.finale {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
  color: var(--pure-white);
  padding: 6rem 0;
}

.finale h2 {
  color: var(--pure-white);
  font-size: 2rem;
}

.finale-companies {
  font-size: 1.1rem;
  background: rgba(0,0,0,0.15);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.finale-opinion {
  font-style: italic;
  opacity: 0.9;
  margin-top: 2rem;
}

.finale-choice {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-top: 1rem;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  background: var(--pure-black);
  color: rgba(255,255,255,0.6);
  padding: 3rem 0;
  text-align: center;
}

.footer a {
  color: var(--pure-white);
  font-weight: 600;
}

.footer-inspired {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 1rem;
  opacity: 0.6;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  h2 {
    font-size: 2rem;
  }

  .hero-just { font-size: 2.5rem; }
  .hero-fucking { font-size: 3.5rem; }
  .hero-stop { font-size: 4rem; }
  .hero-already { font-size: 3rem; }

  .hero-subtitle span {
    font-size: 1.3rem;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  }

  .hero-subtitle span:last-child {
    font-size: 1.6rem;
  }

  .scroll-indicator {
    bottom: 1.5rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.8rem;
  }

  .container {
    padding: 0 1.5rem;
  }

  .intro-text {
    font-size: 1.2rem;
  }

  .hot-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .answer-card {
    padding: 1.5rem;
    gap: 1rem;
  }

  .answer-number {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    border-radius: 10px;
  }

  .answer h2 {
    font-size: 2.2rem;
  }

  .floating-question,
  .floating-tool,
  .npm-box,
  .atom,
  .gem-sparkle,
  .heart {
    display: none;
  }

  .go-overkill .container {
    padding: 2rem 1.5rem;
  }

  .react-overkill .tilted {
    transform: none;
  }
}

@media (max-width: 480px) {
  .hero-just { font-size: 2rem; }
  .hero-fucking { font-size: 2.5rem; }
  .hero-stop { font-size: 3rem; }
  .hero-already { font-size: 2rem; }

  .hero-subtitle span {
    font-size: 1rem;
    letter-spacing: 0.1em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
  }

  .hero-subtitle span:last-child {
    font-size: 1.2rem;
  }

  .nav-links a {
    font-size: 0.7rem;
  }

  .nav-inner {
    padding: 0.75rem 1rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .rails-never,
  .ruby-answer {
    font-size: 1.8rem;
  }

  .meta-final {
    font-size: 1.5rem !important;
  }

  .finale-choice {
    font-size: 1.4rem;
  }
}