/* =============================================================
 * HIVEK — Design tokens · v2 (final)
 * /public/hivek-theme.css — load in Layout.astro after fonts.
 * Fonts: family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500
 *
 * Four rules the whole system reduces to:
 *  1. Surfaces = gradient fill + gradient 1px border (never a flat border).
 *  2. Two control fills: --hv-fill (action) and --hv-ghost (everything else). Radius 6 on controls, 0 on surfaces.
 *  3. Two hairlines: 8 % divides the document, 9 % frames components.
 *  4. Motion: one curve, two durations — 250 ms / lift 1 px (controls), 350 ms / lift 2 px (surfaces).
 * ============================================================= */

:root {
  /* Color */
  --hv-vacio:   #05070D;   /* base background */
  --hv-noche:   #0B1020;   /* alternate section */
  --hv-tinta:   #1C2236;
  --hv-hueso:   #F4F2EE;   /* text */
  --hv-cobalto: #2E5BFF;   /* accent & action — rellenos, bordes, puntos, foco */
  /* El mismo azul como TEXTO da 3.89:1 sobre vacío, por debajo del 4.5 que pide
     el texto pequeño, y casi todo lo que iba en cobalto era texto de 12 px: el
     número de la fila, el sector del caso, el hover de cualquier enlace. Este
     tono sube a 5.8:1 y sigue leyéndose como el mismo azul. */
  --hv-cobalto-txt: #5C82FF;
  --hv-polen:   #FFDA3A;   /* signal only — never a fill */

  --hv-text:   var(--hv-hueso);
  --hv-text-2: rgba(244,242,238,.70);
  --hv-text-3: rgba(244,242,238,.50);   /* piso real: 50 % da 4.86:1 sobre vacío. Por debajo,
                                           el texto de 12 px ya no llega al mínimo AA. */

  /* Hairlines — only two */
  --hv-line:      rgba(244,242,238,.08); /* document */
  --hv-line-c:    rgba(244,242,238,.09); /* component frame */
  --hv-line-3:    rgba(244,242,238,.16); /* section head rule */

  /* Tres nombres que hivek-landing.css ya usaba sin que existieran. Una
     declaración con una variable sin definir se descarta entera, así que las
     reglas del bloque "por qué", la lista de FAQ y la cabecera legal llevaban
     tiempo sin su línea, y el pie legal heredaba el hueso completo en vez del
     tono apagado. Se definen aquí en lugar de reescribir los ocho usos.
     --hv-text-4 va al 55 % y no al 40 %: el pie legal es mono de 11 px y al
     40 % da 3.5:1 sobre vacío, por debajo del mínimo para texto pequeño. */
  --hv-line-2:    rgba(244,242,238,.12);
  --hv-text-4:    rgba(244,242,238,.55);
  --hv-fast:      var(--hv-t-control);

  /* Surfaces (rule 1) */
  --hv-surface:      linear-gradient(180deg,#0F1527 0%,#080C18 100%);
  --hv-surface-edge: linear-gradient(155deg,rgba(46,91,255,.55) 0%,rgba(244,242,238,.13) 38%,rgba(244,242,238,.045) 100%);
  --hv-surface-edge-hover: linear-gradient(155deg,rgba(46,91,255,1) 0%,rgba(46,91,255,.32) 45%,rgba(244,242,238,.08) 100%);
  --hv-surface-hover: linear-gradient(180deg,#131B31 0%,#0A0F1E 100%);
  --hv-band:         linear-gradient(180deg,#0A0F1E 0%,#05070D 100%);

  /* Control fills (rule 2) */
  /* El relleno arrancaba en #3F69FF y con el hueso encima daba 4.02:1 en la
     parte alta del botón: por debajo del mínimo, justo en la llamada a la
     acción. Arranca en el cobalto de marca (4.63:1) y el hover ahonda en vez de
     aclarar, porque cualquier tono más claro que #2E5BFF vuelve a fallar. */
  --hv-fill:        linear-gradient(180deg,#2E5BFF 0%,#2348E6 100%);
  --hv-fill-hover:  linear-gradient(180deg,#2348E6 0%,#1A37B4 100%);
  --hv-fill-edge:   linear-gradient(180deg,rgba(244,242,238,.35) 0%,rgba(46,91,255,0) 60%);
  --hv-fill-edge-hover: linear-gradient(180deg,rgba(244,242,238,.55) 0%,rgba(46,91,255,0) 60%);
  --hv-ghost:       linear-gradient(180deg,#10172B 0%,#080C18 100%);
  --hv-ghost-hover: linear-gradient(180deg,#141C33 0%,#0A0F1E 100%);
  --hv-ghost-edge:  linear-gradient(180deg,rgba(244,242,238,.22) 0%,rgba(244,242,238,.06) 100%);
  --hv-ghost-edge-hover: linear-gradient(180deg,rgba(46,91,255,.9) 0%,rgba(46,91,255,.25) 100%);

  /* Light */
  --hv-foco: radial-gradient(circle at center, rgba(46,91,255,.34) 0%, rgba(46,91,255,.08) 38%, rgba(46,91,255,0) 66%);
  --hv-hero-scrim: linear-gradient(180deg, #05070D 0%, rgba(5,7,13,.86) 30%, rgba(5,7,13,.35) 62%, rgba(5,7,13,.15) 82%, rgba(5,7,13,.7) 100%);

  /* Type — golden-ratio scale (step √φ = 1.272, base 16). Nothing outside it.
     10 · 12 · 16 · 20 · 26 · 33 · 42 · 53 · 68 · 86 · 110 */
  --hv-sans: "Archivo", system-ui, -apple-system, sans-serif;
  --hv-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hv-fs-10: 10px; --hv-fs-12: 12px; --hv-fs-16: 16px; --hv-fs-20: 20px; --hv-fs-26: 26px; --hv-fs-33: 33px;
  --hv-fs-42: 42px; --hv-fs-53: 53px; --hv-fs-68: 68px; --hv-fs-86: 86px; --hv-fs-110: 110px;

  --hv-display: clamp(42px, 7.6vw, 110px);  /* h1 hero      · 700 · lh .94 · ls -.045em */
  --hv-h2:      clamp(42px, 5vw, 68px);     /* section      · 700 · lh 1   · ls -.04em  */
  --hv-h2-alt:  clamp(33px, 4.4vw, 68px);   /* split h2     · 700 · lh 1   · ls -.04em  */
  --hv-h3:      clamp(20px, 2.6vw, 33px);   /* row title    · 500 · lh 1.1 · ls -.03em  */
  --hv-h3-lg:   clamp(26px, 3.2vw, 42px);   /* case title   · 600 */
  --hv-h4:      clamp(20px, 1.8vw, 26px);   /* item title   · 500 · lh 1.2 · ls -.025em */
  --hv-lede:    clamp(16px, 1.4vw, 20px);   /* hero sub only· 400 · lh 1.5 */
  --hv-body:    16px;                       /* 400 · lh 1.6 · text-2 */
  --hv-label:   12px;                       /* mono · uppercase · ls .16em · ALWAYS 12 — it's a label, not a heading */

  /* Layout */
  --hv-container: 1440px;
  --hv-pad: clamp(20px, 4vw, 56px);         /* page margin: 24 / 48 / 80 by breakpoint */
  --hv-gutter: 24px;
  --hv-section: clamp(128px, 15vw, 240px);   /* section on vacío */
  --hv-section-band: clamp(112px, 13vw, 200px); /* section on noche band */
  --hv-radius: 6px;                          /* controls only — surfaces have no radius */

  /* Motion (rule 4) */
  --hv-ease: cubic-bezier(.22,.61,.36,1);
  --hv-t-control: .25s;
  --hv-t-surface: .35s;
  --hv-t-reveal: .7s;
  --hv-slow: 1.1s;
}

/* ---------- Base ---------- */
html, body { background: var(--hv-vacio); color: var(--hv-text); font-family: var(--hv-sans); font-size: var(--hv-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--hv-cobalto); color: var(--hv-hueso); }
a { color: var(--hv-hueso); text-decoration: none; }
a:hover { color: var(--hv-cobalto-txt); }
input::placeholder, textarea::placeholder { color: rgba(244,242,238,.32); }
:focus-visible { outline: 2px solid var(--hv-cobalto); outline-offset: 2px; }

/* ---------- Type ---------- */
.hv-display { font-size: var(--hv-display); font-weight: 700; line-height: .94; letter-spacing: -.045em; margin: 0; }
.hv-h2      { font-size: var(--hv-h2);      font-weight: 700; line-height: 1;   letter-spacing: -.04em; margin: 0; }
.hv-h2--alt { font-size: var(--hv-h2-alt); }
.hv-h3      { font-size: var(--hv-h3);      font-weight: 500; line-height: 1.1; letter-spacing: -.03em; margin: 0; }
.hv-h3--lg  { font-size: var(--hv-h3-lg);   font-weight: 600; }
.hv-h4      { font-size: var(--hv-h4);      font-weight: 500; line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.hv-lede    { font-size: var(--hv-lede); line-height: 1.5; color: rgba(244,242,238,.8); margin: 0; }
.hv-body    { font-size: var(--hv-body); line-height: 1.6; color: var(--hv-text-2); margin: 0; }
.hv-small   { font-size: 13px; line-height: 1.5; color: rgba(244,242,238,.6); }
.hv-label   { font-family: var(--hv-mono); font-size: var(--hv-label); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-text-3); }
.hv-num     { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .1em; color: var(--hv-cobalto-txt); }
.hv-counter { color: var(--hv-polen); }
.hv-text-fade { background: linear-gradient(180deg, #F4F2EE 0%, rgba(244,242,238,.42) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- Layout ---------- */
.hv-container { max-width: var(--hv-container); margin-inline: auto; padding-inline: var(--hv-pad); }
.hv-section { padding-block: var(--hv-section); }
.hv-band { background: var(--hv-band); border-top: 1px solid var(--hv-line); }
.hv-band .hv-section { padding-block: var(--hv-section-band); }
.hv-section-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; }
.hv-section-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hv-line-3); }
.hv-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--hv-gutter); }

/* ---------- Surface (rule 1) — base for every card ---------- */
.hv-surface { background: var(--hv-surface) padding-box, var(--hv-surface-edge) border-box; border: 1px solid transparent; border-radius: 0; transition: transform var(--hv-t-surface) var(--hv-ease); }
.hv-surface--hover:hover, a.hv-surface:hover, button.hv-surface:hover { transform: translateY(-2px); background: var(--hv-surface-hover) padding-box, var(--hv-surface-edge-hover) border-box; }

/* ---------- Buttons (rule 2) ---------- */
.hv-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--hv-radius); font: 600 16px/1 var(--hv-sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; color: var(--hv-hueso); transition: transform var(--hv-t-control) var(--hv-ease); }
.hv-btn:hover { transform: translateY(-1px); color: var(--hv-hueso); }
.hv-btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.hv-btn--primary { background: var(--hv-fill) padding-box, var(--hv-fill-edge) border-box; }
.hv-btn--primary:hover { background: var(--hv-fill-hover) padding-box, var(--hv-fill-edge-hover) border-box; }
.hv-btn--ghost { background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; }
.hv-btn--ghost:hover { background: var(--hv-ghost-hover) padding-box, var(--hv-ghost-edge-hover) border-box; }
.hv-btn[disabled], .hv-btn.is-disabled { background: var(--hv-ghost) padding-box, linear-gradient(180deg,rgba(244,242,238,.16),rgba(244,242,238,.05)) border-box; color: rgba(244,242,238,.4); cursor: not-allowed; transform: none; }
.hv-btn.is-loading { cursor: progress; color: rgba(244,242,238,.8); }
.hv-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(244,242,238,.35); border-top-color: var(--hv-hueso); animation: hvSpin .7s linear infinite; flex: 0 0 auto; }
.hv-spinner--accent { border-color: rgba(244,242,238,.2); border-top-color: var(--hv-cobalto); width: 13px; height: 13px; }
.hv-link { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--hv-sans); color: var(--hv-hueso); border-bottom: 1px solid rgba(244,242,238,.28); padding-bottom: 3px; transition: border-color var(--hv-t-control) ease; }
.hv-link:hover { border-color: var(--hv-cobalto); color: var(--hv-hueso); }

/* ---------- Chips · Segmented · Pager (rule 2, ghost/fill pair) ---------- */
.hv-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--hv-radius); cursor: pointer; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; color: rgba(244,242,238,.75); transition: transform var(--hv-t-control) var(--hv-ease); }
.hv-chip:hover { transform: translateY(-1px); }
.hv-chip.is-on { background: var(--hv-fill) padding-box, var(--hv-fill-edge) border-box; color: var(--hv-hueso); }
.hv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-pager > button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--hv-radius); cursor: pointer; font-family: var(--hv-mono); font-size: 12px; border: 1px solid transparent; background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; color: rgba(244,242,238,.75); transition: transform var(--hv-t-control) var(--hv-ease); }
.hv-pager > button:hover { transform: translateY(-1px); }
.hv-pager > button.is-current { background: var(--hv-fill) padding-box, var(--hv-fill-edge) border-box; color: var(--hv-hueso); }
.hv-seg { display: inline-flex; padding: 3px; border: 1px solid transparent; border-radius: var(--hv-radius); background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; }
.hv-seg > button { border: 0; cursor: pointer; border-radius: 4px; padding: 8px 14px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: rgba(244,242,238,.5); transition: color var(--hv-t-control) ease, background var(--hv-t-control) ease; }
.hv-seg > button.is-active { background: rgba(244,242,238,.10); color: var(--hv-hueso); }
.hv-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hv-crumb a { color: var(--hv-text-3); } .hv-crumb a:hover { color: var(--hv-hueso); }
.hv-crumb .sep { color: rgba(244,242,238,.25); } .hv-crumb .is-current { color: var(--hv-hueso); }

/* ---------- Tabs ---------- */
.hv-tabs { display: flex; gap: 28px; border-bottom: 1px solid rgba(244,242,238,.14); }
.hv-tabs > button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0 14px; cursor: pointer; font: 500 16px var(--hv-sans); letter-spacing: -.01em; color: var(--hv-text-3); transition: color var(--hv-t-control) ease, border-color var(--hv-t-control) ease; }
.hv-tabs > button:hover { color: var(--hv-hueso); }
.hv-tabs > button.is-active { color: var(--hv-hueso); border-bottom-color: var(--hv-cobalto); }

/* ---------- Ledger row (services / why) ---------- */
.hv-row { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid var(--hv-line-c); transition: padding-left var(--hv-t-surface) var(--hv-ease); }
.hv-row:hover { padding-left: 16px; }
.hv-row > .hv-num { flex: 0 0 56px; padding-top: 8px; }
.hv-row > .hv-h3 { flex: 1 1 260px; max-width: 18ch; }
.hv-row > .hv-body { flex: 1.3 1 320px; max-width: 54ch; padding-top: 6px; }
.hv-row--link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: transparent; border: 0; border-bottom: 1px solid rgba(244,242,238,.12); padding: 22px 0; text-align: left; cursor: pointer; color: rgba(244,242,238,.72); font: 500 20px/1.3 var(--hv-sans); letter-spacing: -.02em; transition: color var(--hv-t-control) ease; }
.hv-row--link:hover, .hv-row--link.is-open { color: var(--hv-hueso); }
.hv-row--link .hv-icon { color: var(--hv-cobalto-txt); transition: transform var(--hv-t-surface) var(--hv-ease); }
.hv-row--link.is-open .hv-icon { transform: rotate(90deg); }

/* ---------- Stepper (process) ---------- */
.hv-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 16px; }
.hv-step { text-align: left; background: transparent; border: 0; border-top: 2px solid var(--hv-line-3); padding: 18px 0 22px; cursor: pointer; color: var(--hv-text-3); font-family: var(--hv-sans); display: flex; flex-direction: column; gap: 10px; transition: color var(--hv-t-control) ease, border-color var(--hv-t-control) ease; }
.hv-step:hover { color: var(--hv-hueso); }
.hv-step.is-active { border-top-color: var(--hv-cobalto); color: var(--hv-hueso); }
.hv-step.is-active .hv-step-num { color: var(--hv-cobalto-txt); }
.hv-step-num { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .12em; color: rgba(244,242,238,.55); }
.hv-step-label { font-size: 16px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }

/* ---------- Accordion (FAQ) ---------- */
.hv-acc { border-bottom: 1px solid rgba(244,242,238,.12); }
.hv-acc-btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: transparent; border: 0; padding: 24px 0; text-align: left; cursor: pointer; color: var(--hv-hueso); font: 500 20px/1.3 var(--hv-sans); letter-spacing: -.02em; transition: color var(--hv-t-control) ease; }
.hv-acc-btn:hover { color: var(--hv-cobalto-txt); }
.hv-acc-sign { font-family: var(--hv-mono); font-size: 20px; color: var(--hv-text-3); }
.hv-acc-body { margin: 0; padding: 0 48px 28px 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: rgba(244,242,238,.68); }

/* ---------- Form ---------- */
.hv-field { display: flex; flex-direction: column; gap: 8px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-text-3); }
.hv-input { font: 400 16px var(--hv-sans); letter-spacing: 0; text-transform: none; color: var(--hv-hueso); background: transparent; border: 0; border-bottom: 1px solid rgba(244,242,238,.24); padding: 10px 0; outline: none; border-radius: 0; transition: border-color var(--hv-t-control) ease; }
.hv-input:focus { border-color: var(--hv-cobalto); }
.hv-field.is-error .hv-input { border-bottom-color: var(--hv-polen); }
.hv-field-error { display: flex; align-items: center; gap: 8px; font: 400 13px var(--hv-sans); letter-spacing: 0; text-transform: none; color: var(--hv-polen); }
.hv-field-error::before { content: "!"; font-family: var(--hv-mono); }
.hv-textarea { font: 400 13px/1.6 var(--hv-mono); color: rgba(244,242,238,.8); background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; border: 1px solid transparent; padding: 14px; outline: none; resize: vertical; border-radius: 0; transition: background var(--hv-t-control) ease; }
.hv-textarea:focus { background: var(--hv-ghost-hover) padding-box, var(--hv-ghost-edge-hover) border-box; }
.hv-option { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; font: 400 16px var(--hv-sans); padding: 16px 0; border: 0; border-bottom: 1px solid var(--hv-line-c); background: transparent; color: var(--hv-text-2); transition: color var(--hv-t-control) ease; }
.hv-option:hover, .hv-option.is-selected { color: var(--hv-hueso); }
.hv-radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(244,242,238,.3); flex: 0 0 auto; transition: background var(--hv-t-control) ease, border-color var(--hv-t-control) ease; }
.hv-option.is-selected .hv-radio { background: var(--hv-cobalto); border-color: var(--hv-cobalto); }
.hv-progress { display: flex; gap: 6px; }
.hv-progress > span { width: 22px; height: 2px; background: var(--hv-line-3); }
.hv-progress > span.is-done { background: var(--hv-cobalto); }
.hv-command { display: flex; align-items: center; gap: 12px; border: 1px solid transparent; background: var(--hv-ghost) padding-box, var(--hv-ghost-edge) border-box; padding: 0 14px; height: 48px; transition: background var(--hv-t-control) ease; }
.hv-command:hover, .hv-command:focus-within { background: var(--hv-ghost-hover) padding-box, var(--hv-ghost-edge-hover) border-box; }
.hv-command input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--hv-hueso); font: 400 16px var(--hv-sans); }
.hv-command kbd { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .08em; color: var(--hv-text-3); border: 1px solid var(--hv-line-3); padding: 3px 7px; }

/* ---------- Header ---------- */
.hv-header { position: sticky; top: 0; z-index: 60; background: rgba(5,7,13,.78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hv-line); }
.hv-header-inner { height: 64px; display: flex; align-items: center; gap: 24px; }
.hv-nav a { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,242,238,.62); }
.hv-nav a:hover { color: var(--hv-hueso); }
.hv-progress-bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg,var(--hv-cobalto) 0%,var(--hv-cobalto) 70%,rgba(46,91,255,0) 100%); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- Hero ---------- */
.hv-hero { position: relative; min-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hv-hero-img { position: absolute; inset: 0; background: url('/hero-horizon.webp') center 72% / cover no-repeat; z-index: 0; animation: hvHeroBg 1.6s var(--hv-ease) both; }
.hv-hero-scrim { position: absolute; inset: 0; background: var(--hv-hero-scrim); z-index: 1; }
.hv-hero-facts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hv-hero-facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hv-line-3); transform-origin: left; animation: hvRule 1.1s var(--hv-ease) .7s both; }
.hv-hero-fact { padding: 20px 24px 28px 0; display: flex; flex-direction: column; gap: 6px; animation: hvHeroUp .8s var(--hv-ease) both; animation-delay: calc(.85s + var(--i, 0) * .1s); }
.hv-hero-up { animation: hvHeroUp .9s var(--hv-ease) both; animation-delay: var(--d, 0s); }
.hv-hint { display: inline-block; animation: hvHint 2.2s var(--hv-ease) 1.6s infinite; }
.hv-dot-polen { width: 7px; height: 7px; border-radius: 50%; background: var(--hv-polen); display: inline-block; }

/* ---------- Case spread ---------- */
.hv-case { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: stretch; }
.hv-case:nth-child(even) { flex-direction: row-reverse; }
.hv-case-img { flex: 1.15 1 380px; position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--hv-vacio); border: 1px solid var(--hv-line-c); }
.hv-case-img > div { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--hv-slow) var(--hv-ease); }
.hv-case:hover .hv-case-img > div { transform: scale(1.04); }
.hv-case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; border-top: 1px solid rgba(244,242,238,.14); padding-top: 20px; margin: 0; }

/* ---------- Cards (all extend .hv-surface) ---------- */
.hv-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.hv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-text-3); }
.hv-info { padding: 24px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; color: var(--hv-hueso); }
.hv-info .hv-icon { stroke: var(--hv-cobalto); }
.hv-info-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.hv-info-body { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(244,242,238,.62); }
.hv-info-tag { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.45); }
.hv-kpi-value { font-size: clamp(33px,3vw,42px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.hv-kpi-delta { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.45); }
.hv-kpi-delta.is-polen { color: var(--hv-polen); }
.hv-info--list dl { margin: 0; display: flex; flex-direction: column; }
.hv-info--list dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hv-line); }
.hv-info--list dt { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,242,238,.45); }
.hv-info--list dd { margin: 0; font-size: 16px; color: rgba(244,242,238,.9); text-align: right; }
.hv-info--link { cursor: pointer; text-decoration: none; }
.hv-info--link .hv-info-arrow { font-family: var(--hv-mono); font-size: 20px; color: var(--hv-cobalto-txt); }
.hv-card--media { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--hv-line-c); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 0; }
.hv-card--media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #05070D 0%, rgba(5,7,13,.6) 45%, rgba(5,7,13,0) 100%); }
.hv-card--media > * { position: relative; padding: 22px; }
.hv-stack-item { padding: 16px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Bento · Spotlight ---------- */
.hv-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hv-bento > .is-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .hv-bento { grid-template-columns: repeat(6, minmax(0,1fr)); } .hv-bento > * { grid-column: span 2; } .hv-bento > .is-wide { grid-column: span 6; } .hv-bento > .is-half { grid-column: span 3; } }
/* Spotlight: JS sets --mx/--my on pointermove (README). The glow is an overlay, the surface stays .hv-surface. */
.hv-spot { --mx: -1000px; --my: -1000px; position: relative; overflow: hidden; cursor: pointer; }
.hv-spot::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--hv-t-control) ease; background: radial-gradient(210px circle at var(--mx) var(--my), rgba(46,91,255,.32), rgba(46,91,255,0) 100%); }
.hv-spot:hover::before { opacity: 1; }
.hv-spot > * { position: relative; }

/* ---------- Table · Notice · Toast · Status ---------- */
.hv-table { width: 100%; border-collapse: collapse; }
.hv-table th { text-align: left; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-text-3); font-weight: 400; padding: 12px 24px 12px 0; border-bottom: 1px solid var(--hv-line-3); white-space: nowrap; }
.hv-table td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--hv-line-c); font-size: 16px; line-height: 1.5; color: rgba(244,242,238,.85); vertical-align: top; }
.hv-notice { border-left: 2px solid var(--hv-cobalto); padding: 14px 18px; font-size: 16px; line-height: 1.55; color: rgba(244,242,238,.85); background: var(--hv-surface); }
.hv-notice--polen { border-left-color: var(--hv-polen); }
.hv-toast { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; max-width: 360px; border: 1px solid transparent; background: var(--hv-surface) padding-box, linear-gradient(155deg,rgba(46,91,255,.7) 0%,rgba(244,242,238,.1) 60%) border-box; }
.hv-toast--err { background: var(--hv-surface) padding-box, linear-gradient(155deg,rgba(255,218,58,.7) 0%,rgba(244,242,238,.1) 60%) border-box; }
.hv-toast--fixed { position: fixed; right: 24px; bottom: 24px; z-index: 80; animation: hvToastIn .32s var(--hv-ease) both; }
.hv-toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hv-cobalto); margin-top: 6px; flex: 0 0 auto; }
.hv-toast--err .hv-toast-dot { background: var(--hv-polen); }
.hv-toast strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.hv-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.75); }
.hv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(244,242,238,.4); }
.hv-status--live::before { background: var(--hv-polen); border-color: var(--hv-polen); }
.hv-status--build::before { background: var(--hv-cobalto); border-color: var(--hv-cobalto); }
.hv-live { display: inline-flex; align-items: center; gap: 12px; font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.8); }
.hv-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-polen); animation: hvPulse 2.4s ease-out infinite; }
.hv-tag { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(244,242,238,.2); color: rgba(244,242,238,.85); }
.hv-quote { margin: 0; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.hv-quote::before { content: "\201C"; font-family: var(--hv-mono); font-size: 42px; line-height: .8; color: var(--hv-cobalto); flex: 0 0 auto; }
.hv-quote p { margin: 0; font-size: clamp(20px,1.8vw,26px); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; max-width: 40ch; }

/* ---------- Skeleton · Empty ---------- */
.hv-skeleton { background: linear-gradient(90deg,rgba(244,242,238,.05) 0%,rgba(244,242,238,.14) 50%,rgba(244,242,238,.05) 100%); background-size: 220% 100%; animation: hvShimmer 1.4s linear infinite; }
.hv-empty { border: 1px dashed rgba(244,242,238,.18); padding: 40px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: linear-gradient(180deg,rgba(46,91,255,.06) 0%,rgba(8,12,24,0) 100%); }

/* ---------- Marquee · Grain · Beam · Terminal ---------- */
.hv-marquee { overflow: hidden; border-top: 1px solid var(--hv-line-c); border-bottom: 1px solid var(--hv-line-c); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hv-marquee-track { display: flex; gap: 56px; width: max-content; animation: hvMarquee 40s linear infinite; }
.hv-marquee:hover .hv-marquee-track { animation-play-state: paused; }
.hv-marquee-track > * { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.6); white-space: nowrap; }
.hv-grain { position: relative; isolation: isolate; }
.hv-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .9; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E'); }
.hv-beam { height: 1px; background: linear-gradient(90deg, rgba(46,91,255,0) 0%, var(--hv-cobalto) 50%, rgba(46,91,255,0) 100%); }
.hv-terminal { border: 1px solid var(--hv-line-c); background: var(--hv-vacio); }
.hv-terminal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hv-line); font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.45); }
.hv-terminal-body { padding: 14px; font-family: var(--hv-mono); font-size: 12px; line-height: 1.75; color: rgba(244,242,238,.78); }
.hv-terminal-body .ln { color: rgba(244,242,238,.3); display: inline-block; width: 18px; text-align: right; margin-right: 14px; }

/* ---------- Icons (Lucide) · Logo ---------- */
.hv-icon, .lucide { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; flex: 0 0 auto; }
.hv-icon--sm { width: 16px; height: 16px; } .hv-icon--lg { width: 24px; height: 24px; }
.hv-icon--accent { color: var(--hv-cobalto); } .hv-icon--muted { color: var(--hv-text-3); }
.hv-logo { height: 24px; width: auto; display: block; } .hv-logo--lg { height: 36px; }

/* ---------- Scroll reveal (see README · hivek-motion.js) ---------- */
[data-rv] { opacity: 0; transform: translateY(22px); transition: opacity var(--hv-t-reveal) var(--hv-ease), transform var(--hv-t-reveal) var(--hv-ease); transition-delay: var(--d, 0ms); }
[data-rv="rule"] { transform: scaleX(0); transform-origin: left; opacity: 1; transition: transform .9s var(--hv-ease); }
[data-rv].is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes hvMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes hvPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,218,58,.55) } 70% { box-shadow: 0 0 0 8px rgba(255,218,58,0) } }
@keyframes hvToastIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes hvHeroUp { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: translateY(0) } }
@keyframes hvHeroBg { from { opacity: 0; transform: scale(1.06) } to { opacity: 1; transform: scale(1) } }
@keyframes hvRule { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes hvHint { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(6px); opacity: 1 } }
@keyframes hvShimmer { from { background-position: -160% 0 } to { background-position: 260% 0 } }
@keyframes hvSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}