/* ==========================================================================
   K1 Nova design system
   Dark, editorial, blue-led. Violet is used sparingly as a second accent.
   ========================================================================== */

/* The hidden attribute, made to actually hide.

   `[hidden]` is display:none at the lowest specificity there is, so a single
   `display: flex` on the element beats it and the thing stays on screen while
   every script in the codebase believes it is gone. That is exactly what the
   card slider's controls were doing at desktop widths. One rule, rather than
   remembering to add an escape hatch per component. */
[hidden] { display: none !important; }

/* ---------- Fonts (self hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-400.066710ba43.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-500.140318bc0e.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-700.9f773b706a.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Dark surfaces */
  --ink-900: #080B10;
  --ink-850: #0B1016;
  --ink-800: #11161D;
  --ink-700: #161C25;
  --ink-600: #1B222C;

  /* Light surfaces. The page alternates light and dark, so these are first
     class tokens rather than one off overrides. */
  --paper: #F5F6F8;
  --paper-2: #FFFFFF;
  --paper-3: #E7EAF0;

  /* Accents */
  --blue: #246BFD;
  --blue-light: #A9C4FF;
  --blue-deep: #1B4FD0;
  /* Filled surfaces that carry white text use the deeper blue so contrast clears 4.5:1. */
  --blue-solid: #2563EB;
  /* #246BFD on #F5F6F8 is 4.2:1, just under AA for body text, so links and small
     text on light backgrounds use this instead. */
  --blue-ink: #1B57D6;
  --violet: #7C3AED;

  /* Type */
  --white: #FFFFFF;
  --text: #FFFFFF;
  --muted: #8E97A6;
  --muted-dim: #7F8BA3;
  /* #8E97A6 only reaches 2.8:1 on #F5F6F8, so light sections need their own. */
  --ink-text: #080B10;
  --muted-on-light: #59626F;

  /* Lines */
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.22);
  --line-on-light: rgba(8, 11, 16, 0.10);
  --line-on-light-2: rgba(8, 11, 16, 0.16);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-3xl: 60px;
  --r-pill: 999px;

  /* Layout.
     .page and .page-wide are deliberately the same width. They used to differ
     by 200px, which meant a section's left and right edges shifted depending on
     which container it happened to use, and interior pages, which lean on .page,
     sat visibly narrower than the homepage, which leans on .page-wide.
     Line length is held by the max-widths on .lead, .prose and .section-head
     rather than by the container, so widening this does not stretch paragraphs.
     Keep them equal unless you want that mismatch back. */
  --page: 1440px;
  --page-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Type scale, fluid */
  --fs-display: clamp(2.6rem, 1.3rem + 4.4vw, 4.35rem);
  --fs-h1: clamp(2.35rem, 1.35rem + 4.2vw, 4.5rem);
  --fs-h2: clamp(1.95rem, 1.25rem + 2.9vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1.05vw, 1.9rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.42vw, 1.28rem);
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-lift: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.22), 0 30px 70px -30px rgba(59, 130, 246, 0.5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:where(h1, h2, h3, h4, h5) {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: rgba(59, 130, 246, 0.32); color: #fff; }

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

/* ---------- Utilities ---------- */
.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.page-wide { width: 100%; max-width: var(--page-wide); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* ---------- Light sections ----------
   The page alternates light and dark. Rather than restyling every component
   twice, a light section rebinds the tokens its children already read, so
   existing components keep working inside one without knowing about it. */
.section--light,
.panel--light {
  --text: var(--ink-text);
  --white: #0B0F15;
  --muted: var(--muted-on-light);
  --muted-dim: #6B7483;
  --line: var(--line-on-light);
  --line-2: var(--line-on-light-2);
  --line-3: rgba(8, 11, 16, 0.28);
  --blue-light: var(--blue-ink);
  --ink-900: var(--paper);
  --ink-850: var(--paper);
  --ink-800: var(--paper-2);
  --ink-700: var(--paper-3);
  --ink-600: var(--paper-3);
  --shadow-lift: 0 30px 70px -32px rgba(8, 16, 32, 0.28), 0 8px 24px -12px rgba(8, 16, 32, 0.14);
  background: var(--paper);
  color: var(--ink-text);
}
.section--light-2 { background: var(--paper-2); }

/* Ambient glows are built for dark ground and turn to grey smudges on light. */
.section--light .glow { display: none; }

.stack > * + * { margin-top: 1.1rem; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  background: var(--blue-deep); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm); font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 12px 2px rgba(59, 130, 246, 0.7);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.018em; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.012em; font-weight: 500; }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.62; max-width: 56ch; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
/* Keeps a hyphenated phrase from splitting across a line break. */
.nowrap { white-space: nowrap; }

.grad-text {
  background: linear-gradient(102deg, var(--blue-light) 4%, var(--blue) 44%, var(--violet) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.55rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
  text-align: left;
}
.btn__arrow {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
.btn__arrow svg { width: 0.7rem; height: 0.7rem; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(2px); }

.btn--primary {
  background: linear-gradient(112deg, var(--blue-solid) 0%, #3F5FEA 52%, #6D3FE0 130%);
  box-shadow: 0 14px 34px -14px rgba(59, 130, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover {
  box-shadow: 0 20px 46px -14px rgba(59, 130, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--line-2);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--ghost .btn__arrow { background: rgba(255, 255, 255, 0.11); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.085); border-color: var(--line-3); }

.btn--sm { padding: 0.62rem 1.1rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.08rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.5rem; padding-block: 0.2rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--blue-light);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow svg { width: 0.8rem; height: 0.8rem; transition: transform 0.3s var(--ease); }
.link-arrow:hover { gap: 0.8rem; color: #8DBBFF; }

/* ---------- Ambient light ---------- */
.glow {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(90px);
}
.glow--blue { background: radial-gradient(circle, rgba(59, 130, 246, 0.30), transparent 68%); }
.glow--violet { background: radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 70%); }

/* ---------- Panels ---------- */
.panel {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.panel--raised { background: var(--ink-700); box-shadow: var(--shadow-lift); }
.panel--overlap { margin-top: clamp(-7rem, -6vw, -3rem); z-index: 3; }

.surface-alt { background: var(--ink-800); }

.hairline {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}