@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cabinet+Grotesk:wght@400;500;700;800;900&display=swap');

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

:root {
  --paper: #f5f0e8;
  --paper2: #ede8dc;
  --ink: #1a1a2e;
  --ink-light: #2d2d4a;
  --muted: #8a8070;
  --amber: #c8841a;
  --amber-light: #f0a832;
  --rust: #c04a1a;
  --teal: #1a7a6e;
  --mono: 'Courier New', monospace;
  --display: 'Cabinet Grotesk', sans-serif;
  --hand: 'Caveat', cursive;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
}

/* CURSOR */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--amber); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s; mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed; width: 32px; height: 32px;
  border: 1.5px solid var(--amber); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: all 0.15s ease; mix-blend-mode: multiply;
}

/* CIRCUIT CANVAS */
#circuit-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500; padding: 18px 52px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(245,240,232,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(26,26,46,0.08);
}
.nav-logo {
  font-family: var(--display); font-size: 20px; font-weight: 900;
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
}
.nav-logo::after { content: '.'; color: var(--amber); }
.nav-logo .sub {
  font-family: var(--hand); font-size: 14px; font-weight: 400;
  color: var(--teal); margin-left: 6px; letter-spacing: 0;
}
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--hand); font-size: 16px;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1.5px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-tag {
  font-family: var(--hand); font-size: 14px; color: var(--teal);
  display: flex; align-items: center; gap: 6px;
}
.nav-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); animation: blink 2s ease infinite;
}
.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 22px; }

/* SECTION */
.section { position: relative; padding: 100px 52px; z-index: 10; }
.section-label {
  font-family: var(--hand); font-size: 16px; color: var(--teal);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-label::before { content: ''; width: 24px; height: 1.5px; background: var(--teal); }

/* REVEAL */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.left { transform: translateX(-28px); }
.reveal.right { transform: translateX(28px); }
.reveal.visible { opacity: 1; transform: none; }

/* FLOAT OBJECTS */
.float-obj {
  position: absolute; pointer-events: none;
  user-select: none; z-index: 2;
}
.float-obj svg { filter: drop-shadow(2px 4px 8px rgba(26,26,46,0.12)); }

/* BUTTONS */
.btn-primary {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  padding: 14px 32px; background: var(--ink); color: var(--paper);
  border: none; border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.15s; letter-spacing: 0.02em;
  display: inline-block;
}
.btn-primary:hover { background: var(--amber); transform: translateY(-1px); }
.btn-ghost {
  font-family: var(--hand); font-size: 17px; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; transition: gap 0.2s;
}
.btn-ghost:hover { gap: 14px; }
.btn-teal {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  padding: 14px 32px; background: var(--teal); color: var(--paper);
  border: none; border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.15s; letter-spacing: 0.02em;
  display: inline-block;
}
.btn-teal:hover { background: var(--ink); transform: translateY(-1px); }

/* FOOTER */
footer {
  background: var(--ink); padding: 28px 52px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 10;
}
.footer-logo { font-family: var(--display); font-size: 16px; font-weight: 900; color: var(--paper); letter-spacing: -0.02em; }
.footer-logo span { color: var(--amber); }
.footer-copy { font-size: 11px; color: rgba(245,240,232,0.3); }
.footer-links { display: flex; gap: 20px; list-style: none; }
.footer-links a { font-family: var(--hand); font-size: 15px; color: rgba(245,240,232,0.4); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--paper); }

/* SCHEMA BOX */
.schema-box {
  border: 1.5px solid rgba(26,26,46,0.15); border-radius: 4px;
  padding: 28px; background: var(--paper); position: relative;
  font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 2;
}
.schema-box::before {
  content: attr(data-label); position: absolute; top: -10px; left: 16px;
  background: var(--paper2); padding: 0 8px;
  font-family: var(--hand); font-size: 14px; color: var(--teal);
}
.schema-box .key { color: var(--teal); }
.schema-box .val { color: var(--amber); }
.schema-box .val-green { color: var(--teal); }
.schema-box .bracket { color: var(--ink); opacity: 0.4; }

/* CHIPS */
.chip {
  font-size: 11px; padding: 3px 10px;
  border: 1px solid rgba(26,26,46,0.15); border-radius: 20px;
  color: var(--muted); letter-spacing: 0.04em;
}

/* ANIMATIONS */
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes float1 { 0%,100% { transform:translateY(0) rotate(0deg); } 33% { transform:translateY(-18px) rotate(3deg); } 66% { transform:translateY(-8px) rotate(-2deg); } }
@keyframes float2 { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-22px) rotate(-4deg); } }
@keyframes float3 { 0%,100% { transform:translateY(0) rotate(0deg); } 40% { transform:translateY(-12px) rotate(5deg); } 80% { transform:translateY(-20px) rotate(-1deg); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* RESPONSIVE */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-links, .nav-tag { display: none; }
  .nav-mobile-toggle { display: block; }
  .section { padding: 60px 24px; }
  footer { flex-direction: column; gap: 16px; text-align: center; padding: 24px; }
}