:root {
  --bg: #000;
  --fg: rgba(255,255,255,.90);
  --fg-2: rgba(255,255,255,.60);
  --fg-3: rgba(255,255,255,.40);
  --hair: rgba(255,255,255,.25);
  --line: rgba(255,255,255,.10);
  --fill-hover: rgba(255,255,255,.04);
  --fill-hover-2: rgba(255,255,255,.07);
  --accent: #FF6A1A;
  --white: #fff;
  --phone-bezel: #0b0b0d;
  --grey: #666666;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --container: 1140px;
  --pad: 24px;
  --header-h: 60px;
  --ease-out: cubic-bezier(.15,.8,.25,1);
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font: 400 16px/1.55 var(--font-text); overflow-x: clip; }
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #000; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.section { padding: 120px 0; }
.section-title { font: 800 36px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--fg); margin-bottom: 40px; }
.section-sub { font: 500 12px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--fg-3); margin: -28px 0 40px; }
.sq { display: inline-block; width: .22em; height: .22em; background: var(--accent); margin-left: .08em; vertical-align: baseline; }
.mono { font: 500 12px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--fg-3); }
.card { border: 1px solid var(--line); background: transparent; transition: background-color .3s ease; }
.card:hover { background: var(--fill-hover); }
.arrow { flex: none; color: var(--fg); transition: transform .2s ease; }
.card:hover .arrow, a:hover > .arrow { transform: translate(4px,-4px); }
.dots { background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px) 0 0 / 20px 20px, rgba(255,255,255,.04); }
.ulink { border-bottom: 1.5px solid rgba(117,122,138,.4); padding-bottom: 1px; transition: border-color .2s ease; }
.ulink:hover { border-color: var(--fg); }

/* one-shot section reveal (see js/main.js) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  :root { --pad: 16px; }
  .section { padding: 80px 0; }
  .section-title { font-size: 30px; margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}