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

:root {
  --bg: #070707;
  --bg2: #0d0d0d;
  --bg3: #131313;
  --surface: #1a1a1a;
  --surface2: #222222;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.11);
  --orange: #ff6b2b;
  --orange2: #ff9500;
  --orange-soft: rgba(255,107,43,0.10);
  --orange-glow: rgba(255,107,43,0.22);
  --blue: #0ea5e9;
  --blue2: #6366f1;
  --blue-soft: rgba(14,165,233,0.10);
  --grad: linear-gradient(135deg,#ff6b2b,#ff9500,#6366f1);
  --grad-text: linear-gradient(135deg,#ff6b2b,#ff9500);
  --text: #f5f0eb;
  --text2: #8a8278;
  --text3: #4a4642;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --ease: cubic-bezier(0.22,1,0.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--orange); color: #fff; }

html, body {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  max-width: 100vw;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Remove custom cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  body, a, button, input, textarea { cursor: auto !important; }
  #cursor-dot, #cursor-ring, #cursor-trail { display: none !important; }
  .char-dot { cursor: pointer !important; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
input, textarea { font: inherit; color: inherit; cursor: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--text);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--orange);
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 8px;
}

.section-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
  letter-spacing: 0.1em;
  transition: color .3s var(--ease);
}
.section-link:hover { color: var(--orange); }

section {
  position: relative;
  padding: 120px 56px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 56px;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 36px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { transition: color .3s var(--ease); }
.footer-links a:hover { color: var(--orange); }

/* Letter reveal keyframes */
@keyframes letterReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Generic page header (used in subpages) */
.page-back {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text2);
  background: rgba(13,13,13,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  padding: 12px 18px;
  border-radius: 100px;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.page-back:hover {
  color: var(--orange);
  border-color: var(--orange);
  transform: translateX(-3px);
}

@media (max-width: 900px) {
  section { padding: 80px 22px; }
  footer { padding: 28px 22px; flex-direction: column; text-align: center; }
}