/* ============================================================================
   Licita Radar — Header, hero, footer
   Content sections (problem → CTA) are appended in later phases.
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Solid-ish only after the user scrolls — the hero stays cinematic at rest */
.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border-subtle);
}

.header__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* ---- Brand lockup --------------------------------------------------------
   The shipped logo asset (assets/images/logo-licita-radar.png) is a square,
   heavily padded, stacked lockup — it reads as a smudge at header size and its
   navy outer ring disappears on a dark background. This rebuilds the same
   marks (target + LICITA / RADAR wordmark) as a horizontal SVG + text lockup:
   crisp at any size, correct optical weight, no image request.              */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.brand__mark { flex: none; width: 38px; height: 38px; }
.brand__mark .ring-out { stroke: var(--text); opacity: 0.28; }
.brand__mark .ring-mid { stroke: var(--brand-teal); }
.brand__mark .dot      { fill: var(--brand-green); }
.brand__mark .needle   { stroke: var(--brand-green-bright); }

.brand__word {
  display: grid;
  gap: 0.18em;
  line-height: 1;
}

.brand__word b {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* compensate trailing tracking so the block optically centers */
  color: var(--brand-green-bright);
}

.brand__word i {
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  color: var(--text-muted);
}

.brand--lg .brand__mark { width: 52px; height: 52px; }
.brand--lg .brand__word b { font-size: 1.4rem; }
.brand--lg .brand__word i { font-size: 0.72rem; }

@media (max-width: 480px) {
  .brand__word b { font-size: 0.92rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .brand__mark { width: 32px; height: 32px; }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.header__link {
  padding: 0.5rem 0.85rem;
  font-size: var(--step--1);
  font-weight: 520;
  color: var(--text-2);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.header__link:hover { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* 1150, not 900: with six section links the row runs out of room well before
   the tablet breakpoint and the primary CTA gets clipped off the right edge. */
@media (max-width: 1150px) {
  .header__nav { display: none; }
  .header__actions { margin-inline-start: auto; }
}

@media (max-width: 480px) {
  .header__actions .btn--primary { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) clamp(4rem, 9vw, 8rem);
  padding-inline: var(--gutter);
  overflow: hidden;
}

/* Layer 1 — aurora mesh. Three offset radial gradients read as one soft light
   source; cheaper and crisper than a background image at any resolution.
   Deliberately no filter: blur() — the gradients are already soft, and blurring
   a viewport-sized layer is one of the most expensive things a page can do. */
.hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(48% 42% at 68% 18%, rgb(46 204 138 / 0.20), transparent 68%),
    radial-gradient(52% 46% at 18% 4%,  rgb(26 100 100 / 0.34), transparent 70%),
    radial-gradient(40% 38% at 88% 72%, rgb(14 45 61 / 0.85), transparent 72%);
  pointer-events: none;
}

/* Layer 2 — technical grid, masked to fade out toward the edges */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--white-a04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--white-a04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(72% 60% at 50% 32%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Layer 3 — bottom fade into the next section */
.hero::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 22%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { justify-items: center; }
  .hero__badge, .hero__cta, .hero__trust { justify-content: center; }
  /* width:100% is load-bearing — `margin-inline:auto` alone makes this grid
     item shrink-to-fit, and .radar's `width:100%` then resolves against an
     indefinite width and collapses the whole visual to 0×0. */
  .hero__visual { order: -1; width: 100%; max-width: 380px; margin-inline: auto; }
}

.hero__copy { display: grid; gap: var(--sp-4); justify-items: start; }
@media (max-width: 940px) { .hero__copy { justify-items: center; } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.6em;
  justify-self: start;
  padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  font-size: var(--step--1);
  font-weight: 560;
  color: var(--text-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--white-a04);
  backdrop-filter: blur(8px);
}
@media (max-width: 940px) { .hero__badge { justify-self: center; } }

.hero__badge b {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #042118;
  background: var(--brand-green);
  border-radius: var(--r-pill);
}

/* Sized against the column, not the viewport: at --step-6 the headline broke
   into four short, ragged lines inside a ~600px column. */
.hero h1 {
  font-size: clamp(2.3rem, 1.1rem + 2.6vw, 4rem);
  max-width: 17ch;
}
@media (max-width: 940px) { .hero h1 { max-width: 18ch; margin-inline: auto; } }

.hero__lead { max-width: 46ch; }
@media (max-width: 940px) { .hero__lead { margin-inline: auto; } }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.hero__trust li { display: flex; align-items: center; gap: 0.5em; list-style: none; }
.hero__trust svg { color: var(--brand-green); flex: none; }
.hero__trust ul { display: contents; }

/* ---- Hero visual: radar ---------------------------------------------------
   Pure SVG + CSS. The sweep is a conic gradient rotated on its own layer, so
   only `rotate` animates (compositor-only, no layout/paint per frame).        */

.radar {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.radar__glow {
  position: absolute; inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--green-a16) 0%, rgb(46 204 138 / 0.06) 44%, transparent 68%);
}

.radar__rings { position: absolute; inset: 0; }
.radar__rings circle { fill: none; stroke: var(--white-a08); }
.radar__rings .ring--lit { stroke: var(--green-a16); }
.radar__rings line { stroke: var(--white-a04); }

.radar__sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgb(46 204 138 / 0.42) 0deg,
    rgb(46 204 138 / 0.10) 26deg,
    transparent 72deg,
    transparent 360deg
  );
  animation: radar-sweep 5.5s linear infinite;
  will-change: rotate;
}

@keyframes radar-sweep { to { rotate: 360deg; } }

/* Static vignette over the sweep. Doing the fade here instead of as a
   mask-image on .radar__sweep keeps the animated layer mask-free, so the
   rotation stays a pure compositor transform. */
.radar__vignette {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    transparent 42%,
    transparent 72%,
    color-mix(in srgb, var(--bg) 78%, transparent) 100%
  );
  pointer-events: none;
}

/* Blips — each fades up on the beat the sweep passes it, then decays.
   Only opacity and scale are animated: a box-shadow keyframe forces a full
   repaint every frame and was measurably hammering the compositor. */
.radar__blip {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-green-bright);
  box-shadow: 0 0 12px 2px var(--green-a32);
  animation: blip-fade 5.5s var(--ease-out) infinite;
  animation-delay: var(--blip-delay, 0s);
}

/* Expanding ring, drawn as a pseudo-element so the ping is a pure transform */
.radar__blip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--brand-green-bright);
  animation: blip-ping 5.5s var(--ease-out) infinite;
  animation-delay: inherit;
}

@keyframes blip-fade {
  0%, 6% { opacity: 1; }
  100%   { opacity: 0.28; }
}

@keyframes blip-ping {
  0%      { opacity: 0.7; scale: 1; }
  30%,
  100%    { opacity: 0; scale: 3.4; }
}

/* Floating match chips — real product language on top of the radar */
.radar__chip {
  position: absolute;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1.25;
  color: var(--text);
  /* Solid on purpose: these float above an animated layer, and a
     backdrop-filter here would force a blur re-render every frame. */
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: chip-float 7s var(--ease-in-out) infinite;
  animation-delay: var(--chip-delay, 0s);
}

.radar__chip .score {
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem; font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #042118;
  background: var(--brand-green);
  border-radius: var(--r-sm);
}

/* Kept inside the radar box: .hero is overflow:hidden, so a chip hanging past
   the right edge gets clipped at narrow desktop widths. */
.radar__chip--a { top: 10%;   left: -4%; }
.radar__chip--b { top: 45%;   right: 0; }
.radar__chip--c { bottom: 12%; left: 2%; }

@keyframes chip-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* On phones the chips must live fully inside the radar box: .hero is
   overflow:hidden and a nowrap chip is wider than the column. Two chips read
   better than three at this size, so the third is dropped rather than shrunk. */
@media (max-width: 700px) {
  .radar__chip {
    font-size: 0.7rem;
    padding: 0.4rem 0.55rem;
    max-width: 76%;
    white-space: normal;
  }
  .radar__chip--a { top: 4%;  left: 0; right: auto; }
  .radar__chip--b { top: auto; bottom: 8%; right: 0; left: auto; }
  .radar__chip--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .radar__sweep { animation: none; rotate: -18deg; }
  .radar__blip, .radar__blip::after { animation: none; }
  .radar__blip::after { opacity: 0; }
  .radar__chip  { animation: none; }
}

/* ---- Footer -------------------------------------------------------------- */

.footer {
  position: relative;
  padding-block: var(--sp-10) var(--sp-6);
  padding-inline: var(--gutter);
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
}

.footer__inner {
  width: 100%; max-width: var(--measure); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

.footer__brand .brand { margin-bottom: var(--sp-5); }
.footer__brand p { max-width: 34ch; font-size: var(--step--1); color: var(--text-2); }

/* h3, not h4: jumping straight from the last section h2 to an h4 skips a
   heading level for screen-reader navigation. */
.footer__col h3 {
  margin-bottom: var(--sp-4);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}

.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col a {
  font-size: var(--step--1);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--brand-green-bright); }

.footer__bottom {
  width: 100%; max-width: var(--measure); margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.footer__bottom .nube4 {
  display: flex; align-items: center; gap: 0.55rem;
  margin-inline-start: auto;
}
.footer__bottom .nube4 img {
  height: 34px; width: 34px; object-fit: contain;
  border-radius: var(--r-sm);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer__bottom .nube4:hover img { opacity: 1; }

@media (max-width: 560px) {
  .footer__bottom .nube4 { margin-inline-start: 0; }
}