/* tokens */
/* Design tokens: the only place a colour, a size or a typeface is chosen. Everything else reads these. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  /* Text shows at once in the fallback and swaps when the font arrives; the page never waits blank. */
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #0b0d12;
  --surface: #11141b;
  --line: #232833;
  --text: #f3f2ee;
  --text-soft: #b3bac5;
  --text-mute: #8b94a3;
  --blue: #3381ff;
  --blue-deep: #0a66ff;
  --cyan: #15d4d4;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 6vw;
  --page-max: 1600px;
  --measure: 36rem;
}

/* base */
/* Reset, document defaults and the one focus style every interactive element shares. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

::selection { background: var(--blue-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--gutter) 26px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

@media (max-width: 480px) {
  .page { padding-top: 25px; }
}

/* header */
header {
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  font-size: 29px;
  letter-spacing: -1.2px;
  font-weight: 750;
}

.brand img { width: 27px; height: 36px; }

@media (max-width: 480px) {
  header { gap: 16px; }
  .brand { font-size: 24px; }
  .brand img { width: 24px; height: 32px; }
}

/* hero */
/* The first screen: the mark, the line, one sentence. It fills the viewport under the header. */

.hero {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px 0 84px;
}

h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .99;
  margin: 0 0 40px;
}

h1 span { color: var(--blue); }

.intro {
  max-width: 550px;
  color: var(--text-soft);
  line-height: 1.65;
  font-size: 18px;
}

/* Nine squares settle from scattered into a grid and back; the per-square offsets are data, kept
   here as custom properties so the markup carries no style attributes. */
.square-loop {
  position: relative;
  width: 100px;
  height: 56px;
  margin: 0 0 30px;
  pointer-events: none;
}

.square-loop i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  background: var(--color);
  animation: squares-order 6s cubic-bezier(.65, 0, .35, 1) infinite;
  animation-delay: var(--delay);
}

.square-loop i:nth-child(1) { --x: 0;    --y: 18px; --dx: 8px;  --dy: -18px; --color: #0a66ff; --delay: 0s; }
.square-loop i:nth-child(2) { --x: 14px; --y: 18px; --dx: 26px; --dy: -16px; --color: #1754d8; --delay: -.08s; }
.square-loop i:nth-child(3) { --x: 28px; --y: 18px; --dx: 51px; --dy: -15px; --color: #15c7e8; --delay: -.16s; }
.square-loop i:nth-child(4) { --x: 0;    --y: 32px; --dx: 3px;  --dy: -10px; --color: #15d4d4; --delay: -.24s; }
.square-loop i:nth-child(5) { --x: 14px; --y: 32px; --dx: 35px; --dy: -13px; --color: #0a66ff; --delay: -.32s; }
.square-loop i:nth-child(6) { --x: 28px; --y: 32px; --dx: 45px; --dy: -6px;  --color: #1754d8; --delay: -.4s; }
.square-loop i:nth-child(7) { --x: 0;    --y: 46px; --dx: 19px; --dy: -4px;  --color: #15c7e8; --delay: -.48s; }
.square-loop i:nth-child(8) { --x: 14px; --y: 46px; --dx: 34px; --dy: -3px;  --color: #15d4d4; --delay: -.56s; }
.square-loop i:nth-child(9) { --x: 28px; --y: 46px; --dx: 59px; --dy: -2px;  --color: #0a66ff; --delay: -.64s; }

@keyframes squares-order {
  0%, 100% { transform: translate(var(--dx), var(--dy)); opacity: .5; }
  35%, 65% { transform: translate(0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .square-loop i { animation: none; transform: none; opacity: 1; }
}

@media (max-width: 900px) {
  .hero { padding: 80px 0; }
}

@media (max-width: 480px) {
  .hero { padding: 48px 0; }
  h1 { font-size: clamp(28px, 8.6vw, 42px); margin-bottom: 30px; }
  .intro { font-size: 16px; }
  .square-loop { margin-bottom: 25px; }
}

/* footer */
footer {
  border-top: 1px solid var(--line);
  padding-top: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.tagline { font-size: 13px; line-height: 1.6; color: var(--text-mute); }

.copyright {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-mute);
  white-space: nowrap;
}

@media (max-width: 900px) {
  footer { align-items: flex-start; }
}

/* not-found */
/* The 404 page: the same type, shorter, with a way home. */

.not-found {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}

.not-found h1 { font-size: clamp(40px, 7vw, 88px); margin-bottom: 28px; }

.back-link {
  align-self: flex-start;
  margin-top: 20px;
  color: var(--text);
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
  padding: 14px 0 5px;
}

.back-link:hover { color: var(--blue); }