/* Ponta Website — v1.
   Every value here is taken from context/visual-design.md (measured reference values, type scale,
   palette, spacing). Where a value is NOT from that document it is marked "CHOICE:" so it is easy to find.
   No glow, no animation of our own, no hexagons, no blue fills. */

/* ---------- Fonts (self-hosted, Latin subset, no CDN) ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --bg: #0A0A0A;            /* page. CHOICE: much darker than the spec's #1A1A1A (founder request, twice) */
  --recessed: #050505;      /* form fields and cards: darker than the page (spec #111111, shifted with --bg) */
  --accent: #1E76FA;        /* logo, illustration, focus rings. Never a fill, never text below 24px */
  --link: #4A90FB;          /* inline links (5.53:1); the accent itself is 4.17:1 */
  --border: rgba(255, 255, 255, 0.08);

  --t-head: #FFFFFF;        /* headline + logo only */
  --t-body: #EDEDED;
  --t-2: #C3C3C3;
  --t-3: #A7A7A7;
  --t-4: #8A8A8A;           /* floor: nothing dimmer than this */

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Fluid steps between mobile (375px) and desktop (1440px) */
  --fs-display: clamp(2rem, 3.05vw, 2.75rem);                 /* 32 -> 44 (spec formula) */
  --fs-h2: clamp(25px, 23.24px + 0.4695vw, 30px);
  --fs-h3: clamp(18px, 17.3px + 0.1878vw, 20px);
  --fs-body: clamp(16px, 15.65px + 0.0939vw, 17px);
  --fs-small: 14px;
  --fs-mono: clamp(12px, 11.65px + 0.0939vw, 13px);

  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --inset: clamp(24px, 4.2vw, 60px);              /* side inset: 4.2%, min 24, max 60 */
  --nav-h: clamp(64px, 6.4vw, 92px);              /* 6.36% of container -> 92px at 1440 */
  --stage: max(100vh, 720px);                     /* hero height: 100vh, min 720 */
  --section-y: var(--s-8);                        /* 64 mobile */
}
@supports (height: 100svh) { :root { --stage: max(100svh, 720px); } }
@media (min-width: 960px) { :root { --section-y: var(--s-10); } }   /* 128 desktop */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--link); }
strong { font-weight: 500; color: var(--t-body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap { max-width: 1440px; margin-inline: auto; container-type: inline-size; }

/* ---------- Buttons ----------
   Primary: white fill, dark text. Secondary: 1px outline. ~4px radius as in the reference. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 45px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: 4px;
  font: 500 var(--fs-body)/1 var(--font-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn--primary { background: #FFFFFF; color: var(--bg); min-width: 173px; }
.btn--primary:hover { background: var(--t-body); }
/* CHOICE: outline colour #8A8A8A (5.3:1) so the 1px edge is a perceivable UI boundary. */
.btn--secondary { background: transparent; color: var(--t-head); border-color: var(--t-4); }
.btn--secondary:hover { border-color: var(--t-head); }
.btn--sm { height: 42px; padding: 0 var(--s-4); font-size: var(--fs-small); min-width: 0; }

/* ---------- Nav ----------
   Layout follows context/assets/Full page structure.webp: logo left, links centred, a plain text link and an
   outlined button on the right, no column dividers. No dropdowns (nothing to drop down), so no chevrons.
   Sticky at every width (founder direction, after review: the spec had it scrolling away on phones). On phones it is kept
   compact (two short rows: logo and button, then the section links) so it takes about 96px of the viewport. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html { scroll-padding-top: var(--nav-h); }
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
}
.nav__logo { display: flex; align-items: center; padding-left: var(--inset); }
.nav__logo img { display: block; height: 28px; width: auto; }
.nav__links ul {
  display: flex; align-items: center; gap: clamp(20px, 3cqw, 44px);
  margin: 0; padding: 0; list-style: none;
}
.nav__links a {
  display: block; padding: var(--s-3) 0;
  color: var(--t-3); font-size: var(--fs-small); text-decoration: none; white-space: nowrap;
}
.nav__links a:hover { color: var(--t-head); }
.nav__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5);
  padding-right: var(--inset);
}
.nav__signin { color: var(--t-3); font-size: var(--fs-small); text-decoration: none; white-space: nowrap; }
.nav__signin:hover { color: var(--t-head); }

/* Disabled Sign in (nav and footer): still visible, with a lock, but dimmed and not clickable. */
.nav__signin[aria-disabled="true"], .ftr__nav a[aria-disabled="true"] {
  display: inline-flex; align-items: center; gap: 6px; color: var(--t-4); cursor: not-allowed;
}
.nav__signin[aria-disabled="true"]:hover, .ftr__nav a[aria-disabled="true"]:hover { color: var(--t-4); }
.lock { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 959.98px) {
  /* Two rows, 56px + 40px. The links row stays one line (four short links); scroll-padding matches the full height. */
  html { scroll-padding-top: 100px; }
  .nav { grid-template-columns: 1fr auto; grid-template-rows: 56px 40px; height: auto; }
  .nav__links { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--border); padding-inline: var(--inset); }
  .nav__links ul { flex-wrap: nowrap; gap: 0 var(--s-5); height: 40px; margin-inline: -12px; padding-inline: 12px; overflow-x: auto; scrollbar-width: none; }
  .nav__links ul::-webkit-scrollbar { display: none; }
  .nav__links a { padding: 0; line-height: 40px; }
}
/* CHOICE: on phones the plain "Sign in" text is dropped; the
   outlined "Get in touch" button stays because it is the site's one call to action. */
@media (max-width: 639.98px) { .nav__signin, .nav__signin[aria-disabled="true"] { display: none; } }

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-6) var(--inset) var(--s-8); }
.hero__art { order: 1; pointer-events: none; }
.hero__art img { display: block; width: 100%; height: auto; }
.hero__copy { order: 2; }

.hero h1 {
  margin: 0;
  color: var(--t-head);
  font-size: var(--fs-display);
  font-weight: 600;          /* CHOICE: semi-bold (spec says 500 medium); founder asked for a bolder title */
  line-height: 0.95;         /* deliberately tight */
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__tag {
  margin: 0 0 var(--s-4);
  font: 400 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3);
}
.hero__sub { margin: var(--s-5) 0 0; max-width: 46ch; color: var(--t-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* The illustration's labels are about 8px at full size, so it cannot shrink much. Below 1200px the hero stacks. */
@media (min-width: 1200px) {
  .hero {
    --art-w: min(62cqw, calc(100cqw - 2 * var(--inset)));   /* CHOICE: spec says ~58%; enlarged now the data cards are gone */
    display: grid; padding: 0;
    min-height: calc(var(--stage) - var(--nav-h));
  }
  .hero > * { grid-area: 1 / 1; order: 0; }

  .hero__art {
    align-self: start;
    width: var(--art-w);
    margin-left: var(--inset);
  }
  /* The copy zone is exactly one stage tall (100vh, min 720, minus the nav), so the buttons stay where the
     viewport is.
     CHOICE: the copy is bottom-anchored in that zone (64px up) instead of "top at 69% of hero height" —
     Ponta's copy is longer than the reference's, so a 69% top edge pushes the buttons below the fold.
     padding-top is the minimum clearance below the illustration's right-hand content
     (Plaiq slab bottom = 66.1% of the SVG height) + 24px. */
  .hero__copy {
    align-self: start;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: calc(var(--stage) - var(--nav-h));
    margin: 0 var(--inset) 0 57.8%;                  /* left edge at 57.8% of container */
    /* --lift raises the text: the same space moves from above it to below it. The clearance above is measured at
       the slab's lowest corner, which sits left of the copy column, so the text can rise past it. */
    --lift: calc(0.07 * var(--art-w));
    padding: calc(0.661 * var(--art-w) * 637 / 982 + var(--s-5) - var(--lift)) 0 calc(var(--s-8) + var(--lift));
  }
}

/* Content sections live in css/sections/*.css (one file per section; section-base.css is shared). */