/* Self-hosted @font-face */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/plex-ar-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/plex-ar-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/plex-ar-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/plex-ar-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jb-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jb-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Base */
html {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-0);
  background-image: url('/assets/img/mesh-bg.svg');
  background-size: 100% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;
}

::selection { background: var(--accent); color: var(--bg-0); }

/* Layout primitives */
.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center { text-align: center; }

.section {
  padding-block: var(--s-10);
}

/* Typography classes */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.display-xl { font-size: var(--fs-display-1); }
.display-lg { font-size: var(--fs-display-3); }
.display-md { font-size: var(--fs-display-4); }

h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }

.lead {
  font-size: var(--fs-body-lg);
  color: var(--text-1);
  line-height: 1.5;
  max-inline-size: 52ch;
}

.caption {
  font-size: var(--fs-body-sm);
  color: var(--text-2);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}