/* ==========================================================================
   Base: design tokens, reset, typography and utilities
   ========================================================================== */

:root {
  /* Colour */
  --c-bg: #f4f4f5;
  --c-surface: #ffffff;
  --c-ink: #0b0b0f;
  --c-ink-soft: #2b2b33;
  --c-muted: #6e6e78;
  --c-subtle: #a3a3ad;
  --c-line: #dedee3;
  --c-dark: #000000;
  --c-dark-ink: #f5f5f7;
  --c-dark-muted: #b9b9c2;

  --c-purple: #8a00f0;
  --c-violet: #5b2bff;
  --c-blue: #2b3bff;
  --c-cyan: #00dcd8;
  --c-orange: #ff7a00;
  --c-pink: #ff3d8a;

  --grad-brand: linear-gradient(90deg, #8a00f0 0%, #5a2cff 55%, #2b45ff 100%);
  --grad-warm: linear-gradient(90deg, #ff7a00 0%, #ff3d8a 100%);
  --grad-origin:
    radial-gradient(220px 185px at 0 100%, #4aaef1, rgba(74, 174, 241, 0)),
    linear-gradient(45deg, #7a4cff 56%, #b145d2 72%, #dd3fad 86%, #fb5e4f 100%);
  --grad-person: linear-gradient(38deg, #3bcdec 0%, #7a4cff 24%, #7a4cff 50%, #fa3f8c 92%, #ff4a6e 100%);
  --grad-board: linear-gradient(155deg, #171717 55%, #2d2224 100%);
  /* Soft brand blend: blue top left, coral top right, magenta on the right, deep plum below. */
  --grad-caplyzer:
    radial-gradient(120% 55% at 0% 0%, #536fb8 0%, rgba(83, 111, 184, 0) 70%),
    radial-gradient(120% 55% at 100% 0%, #fc8875 0%, rgba(252, 136, 117, 0) 70%),
    radial-gradient(110% 60% at 100% 55%, #ba266d 0%, rgba(186, 38, 109, 0) 75%),
    linear-gradient(180deg, #6b2f80 0%, #4e1c68 45%, #27043a 100%);

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Urbanist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.5rem, 11.2vw, 10.6rem);
  --fs-kicker: clamp(1.6rem, 3.1vw, 2.9rem);
  --fs-h2: clamp(1.75rem, 3.05vw, 2.9rem);
  --fs-h2-md: clamp(1.5rem, 2.35vw, 2.2rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.5rem);

  /* Shape & depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 16, 32, 0.06), 0 2px 8px rgba(16, 16, 32, 0.04);
  --shadow: 0 10px 30px -12px rgba(30, 20, 80, 0.18);
  --shadow-lg: 0 30px 60px -20px rgba(30, 20, 80, 0.3);

  /* Layout */
  --container: 1300px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 80px;
  /* Vertical spacing also tracks the viewport height so most sections fit on one screen. */
  --section-y: clamp(48px, min(7vw, 9vh), 120px);
  --head-gap: clamp(32px, min(4.5vw, 6vh), 72px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 40px);
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

address {
  font-style: normal;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(91, 43, 255, 0.2);
}

[hidden] {
  display: none !important;
}

/* --- Utilities ---------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Logos come in two versions: black type on the light site, white type when
   the Dark Reader extension darkens the page (it marks <html> with
   data-darkreader-scheme="dark"). */
html:not([data-darkreader-scheme='dark']) .on-dark,
html[data-darkreader-scheme='dark'] .on-light {
  display: none;
}

/* Scroll-reveal: elements fade up once they enter the viewport (see main.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A printout (or "Save as PDF") shows everything, scrolled to or not. */
@media print {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

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