/* ============================================================================
   Licita Radar — Reset, typography, layout primitives, buttons
   ========================================================================== */

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

* { margin: 0; }

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand-green-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--green-a32); color: #fff; }

/* ---- Typography ---------------------------------------------------------- */

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

h1 { font-size: var(--step-6); letter-spacing: -0.032em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.014em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
  font-weight: 400;
}

.muted { color: var(--text-2); }
.fine  { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent { color: var(--brand-green-bright); }

.tabular { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: 50%; translate: -50% -120%;
  z-index: 200; padding: 0.75rem 1.25rem;
  background: var(--brand-green); color: #04241a; font-weight: 650;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: translate var(--dur) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ---- Layout primitives --------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}

.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--surface); }

/* 1px top hairline that fades at the edges — separates bands without a hard rule */
.section--ruled::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-hairline);
  opacity: 0.5;
}

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; }
.wrap--narrow { max-width: var(--measure-narrow); }

.stack > * + * { margin-top: var(--sp-4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-green-bright);
}
.eyebrow::before {
  content: ""; inline-size: 1.75rem; block-size: 1px;
  background: currentColor; opacity: 0.55;
}

.section-head { max-width: 46ch; margin-bottom: var(--sp-8); }
.section-head > * + * { margin-top: var(--sp-4); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding-inline: 1.5rem;
  font-size: var(--step-0);
  font-weight: 620;
  letter-spacing: -0.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition:
    translate var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:hover { translate: 0 -1px; }
.btn:active { translate: 0 0; }

.btn--primary {
  --btn-bg: var(--brand-green);
  --btn-fg: #042118;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { --btn-bg: var(--brand-green-bright); }

.btn--ghost {
  border: 1px solid var(--border);
  background: var(--white-a04);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--brand-green); background: var(--green-a08); }

.btn--quiet { padding-inline: 0.9rem; color: var(--text-2); }
.btn--quiet:hover { color: var(--text); }

.btn--lg { min-height: 54px; padding-inline: 2rem; font-size: var(--step-1); }

.btn .arw { transition: translate var(--dur) var(--ease-out); }
.btn:hover .arw { translate: 3px 0; }

/* ---- Glass card ---------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              translate var(--dur) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .card { backdrop-filter: blur(12px); }
}

.card:hover { border-color: var(--border); translate: 0 -2px; }

/* ---- Scroll reveal ------------------------------------------------------- */

/* Content is visible by DEFAULT. The hidden starting state only applies once
   main.js has confirmed it can actually animate it in (`.reveal-ready` on
   <html>, set immediately before the observer starts). If the script is
   blocked, throws, or the browser never fires the observer, the page simply
   renders as static content instead of an empty screen. */
.reveal-ready .reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready .reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; translate: none; transition: none; }
}