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

:root {
  --bg: #050608;
  --bg-elevated: #0b0d12;
  --ink: #f4f5f7;
  --ink-dim: #9aa0ab;
  --ink-faint: #5c626e;
  --accent-proton-1: #ffe3a3;
  --accent-proton-2: #ff9d3d;
  --accent-proton-3: #e5501f;
  --accent-electron-a: #5be8ff;
  --accent-electron-b: #9dffb0;
  --border: rgba(255, 255, 255, 0.08);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  background: var(--bg);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  display: block;
}

/* Each top-level page section snaps into place like an Apple product page. */
hero-section,
services-section,
contact-section {
  display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--accent-proton-2);
  color: #10090a;
}

/* Utility class toggled by IntersectionObserver in various components */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-apple), transform 0.9s var(--ease-apple);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}