:root {
  --bg: #F4F1EC; --ink: #1A1714; --ink-muted: #7A7470; --ink-faint: #C8C4BE;
  --accent: #C4622D; --surface: #EDE9E2; --border: #DDD9D2;
  --font-display: 'Fraunces', Georgia, serif; --font-body: 'Instrument Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; cursor: none; }
.cursor { width: 8px; height: 8px; background: #fff; border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; mix-blend-mode: difference; }
.cursor-ring { width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: transform 0.12s ease-out, width 0.2s, height 0.2s; mix-blend-mode: difference; opacity: 0.6; }
.cursor.hovering { width: 14px; height: 14px; } .cursor-ring.hovering { width: 52px; height: 52px; opacity: 0.4; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(244,241,236,0.85); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
nav.scrolled { border-color: var(--border); }
.nav-logo { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font-size: 13px; color: var(--ink-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.25,0,0,1), transform 0.7s cubic-bezier(0.25,0,0,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; }
.section-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 48px; display: flex; align-items: center; gap: 16px; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
footer { padding: 32px 48px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
footer p { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
.footer-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4CAF50; }
.footer-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@media(max-width:768px){
  nav{padding:20px 24px} .nav-links{display:none}
  footer{padding:24px;flex-direction:column;gap:12px;text-align:center}
  body{cursor:auto} .cursor,.cursor-ring{display:none}
}