/* ==========================================================================
   Otimiz v2 base: everything every v2 page shares. Fonts, tokens, reset,
   buttons, header (.ncl) + nav dropdowns + language control, mobile sheet
   (.mnav), contour texture (.zp), mono eyebrow (.kick), stars, Upwork badge,
   FAQ rows, footer (.ft), focus rings, reduced motion.
   Split out of home-v2.css on 2026-09-17 (see docs/SITE-V2-2026-09-17.md).
   Load BEFORE home-v2.css (homepage) or site-v2.css (every other page).
   Values come from the captured hyros.com stylesheet where the reference
   gives them (docs/HOME-V2-HYROS-2026-09-16.md).
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font-display: 'Fraunces', 'P22 Mackinac', Georgia, serif;
  --font-body: 'Inter', 'Styrene B', 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ink-900: #1F1E1D;
  --ink-700: #2A2928;
  --ink-600: #55534E;
  --ink-500: #5E5D59;
  --ink-450: #6B6963;
  --ink-430: #7A7873;
  --ink-400: #6B6963; /* was Hyros #8B8984 (3.5:1); lifted to 5.6:1 on white for WCAG AA */

  --paper-page: #FAF9F5;
  --paper-card: #FCFBF8;
  --paper-panel: #F6F5F0;
  --paper-muted: #F3F2ED;
  --white: #FFFFFF;

  --brand-600: #1F58EA; /* Otimiz logo blue, sampled from assets/logo-full.png */
  --brand-300: #A9C0F7;
  --brand-100: #EDF2FD;
  --tan-100: #EDEBE3;

  --border-subtle: rgba(31,30,29,.11);
  --border-strong: rgba(31,30,29,.18);
  --border-panel: rgba(31,30,29,.12);
  --border-brand: rgba(31,88,234,.2);

  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-panel: 14px;
  --radius-card: 12px;
  --radius-sm: 7px;
  --radius-xs: 6px;

  --shadow-card: 0 10px 30px rgba(31,30,29,.05);
  --shadow-win: 0 26px 60px -30px rgba(31,30,29,.4);
  --shadow-panel: 0 30px 60px -36px rgba(31,30,29,.35);
  --shadow-hover: 0 18px 36px -22px rgba(31,30,29,.4);
  --focus-ring: 0 0 0 4px rgba(31,88,234,.28);

  --container: 1180px;
  --gutter: 32px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --fast: .15s;
}
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--paper-page);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
svg { display: inline-block; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only a:focus-visible {
  position: fixed; left: 12px; top: 12px; width: auto; height: auto; margin: 0; clip: auto;
  z-index: 300; padding: 10px 14px; background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 14px;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  padding: 12px 18px; background: var(--ink-900); color: var(--white);
  font-size: 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }
/* ---------- Mono eyebrow ---------- */
.kick {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 400; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-sm);
  border: 0; cursor: pointer; white-space: nowrap;
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.btn--dark { background: var(--brand-600); color: var(--white); } /* logo blue on every CTA (Bastien, 2026-09-16) */
.btn--dark:hover { background: #1A4CCB; }
.btn--soft {
  background: var(--white); color: rgba(31,30,29,.9);
  border: 1px solid var(--border-strong); padding: 12px 22px;
}
.btn--soft:hover { background: var(--brand-100); border-color: var(--border-brand); }
.btn--block { display: flex; width: 100%; padding: 13px 16px; }
.btn--nav { font-size: 13.5px; padding: 10px 14px; }
/* ---------- Header (56px, sticky; Hyros has none, Bastien asked for one 2026-09-16) ---------- */
:root { --header-h: 56px; }
body { padding-top: var(--header-h); }
.ncl {
  height: var(--header-h); position: fixed; inset: 0 0 auto; z-index: 60;
  background: var(--paper-page);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) ease, background-color var(--fast) ease, box-shadow var(--fast) ease;
}
/* Hairline and a touch of depth appear only once the page has moved. */
.ncl.is-stuck {
  border-bottom-color: var(--border-subtle);
  background: rgba(250,249,245,.86);
  box-shadow: 0 1px 12px rgba(31,30,29,.04);
}
@supports (backdrop-filter: blur(10px)) {
  .ncl.is-stuck { backdrop-filter: saturate(180%) blur(10px); }
}
:is(#main) { scroll-margin-top: calc(var(--header-h) + 16px); }
.faq__q, .jump a { scroll-margin-top: calc(var(--header-h) + 16px); }
.ncl__in {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ncl__brand { display: block; flex: 0 0 auto; }
.ncl__logo { height: 52px; width: auto; margin: -12px 0 -12px -8px; }

.nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 400; color: rgba(31,30,29,.78);
  white-space: nowrap; background: none; border: 0; padding: 6px 0; margin: 0;
  cursor: pointer; position: relative;
  transition: color var(--fast) ease;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink-900); transform: scaleX(0); transform-origin: left center;
  transition: transform .2s var(--ease);
}
.nav__link:hover, .nav__item.is-open .nav__link { color: var(--ink-900); }
.nav__link:hover::after, .nav__item.is-open .nav__link::after { transform: scaleX(1); }
.nav__chev { width: 12px; height: 12px; opacity: .6; transition: transform .2s var(--ease); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 232px;
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 8px;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.nav__item.is-open .nav__menu { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.nav__menu-link, .nav__menu-all {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink-600);
  transition: background-color var(--fast) ease, color var(--fast) ease;
}
.nav__menu-link:hover, .nav__menu-all:hover { background: var(--brand-100); color: var(--ink-900); }
.nav__menu-all { margin-top: 4px; border-top: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; padding-top: 12px; color: var(--brand-600); }
.nav__menu-all svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav__menu-all:hover svg { transform: translateX(3px); }

.ncl__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--white);
  padding: 2px; margin-right: 2px;
}
.lang__btn {
  background: none; border: 0; cursor: pointer; padding: 6px 9px; border-radius: 5px;
  font-size: 12.5px; color: var(--ink-600); line-height: 1;
  transition: background-color var(--fast) ease, color var(--fast) ease;
}
.lang__btn:hover { color: var(--ink-900); }
.lang__btn.is-active { background: var(--brand-600); color: var(--white); }
.lang__sep { width: 1px; height: 14px; background: var(--border-subtle); margin: 0 2px; }

.ncl__burger {
  display: none; width: 40px; height: 40px; margin-right: -9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.ncl__burger i { display: block; width: 22px; height: 1.6px; background: var(--ink-900); border-radius: 2px; }
/* ---------- Mobile menu: a sheet under the sticky header, sized to its content ----------
   Hyros goes full-screen here; Bastien asked for something lighter (2026-09-16). The header
   stays visible with the burger turned into a close cross, the page dims behind the sheet. */
.mnav__backdrop {
  position: fixed; inset: var(--header-h) 0 0; z-index: 58;
  background: rgba(31,30,29,.28); backdrop-filter: blur(2px);
}
.mnav__backdrop[hidden] { display: none; }
.js-motion .mnav__backdrop { animation: mnavFade .22s ease; }
.mnav {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: auto; z-index: 59;
  max-height: calc(100dvh - var(--header-h) - 12px); overflow-y: auto;
  background: var(--paper-page); color: var(--ink-900);
  border-bottom: 1px solid var(--border-subtle); border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 48px -24px rgba(31,30,29,.35);
  display: flex; flex-direction: column; padding: 2px 20px 20px;
}
.mnav[hidden] { display: none; }
.js-motion .mnav { animation: mnavIn .24s var(--ease); transform-origin: top center; }
@keyframes mnavIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes mnavFade { from { opacity: 0; } to { opacity: 1; } }
.mnav__top { display: none; } /* the header above already shows the logo and the close cross */
.mnav__close { width: 40px; height: 40px; margin-right: -9px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-900); }
.mnav__close svg { width: 22px; height: 22px; }
/* Burger to cross */
.ncl__burger i { transition: transform .22s var(--ease), opacity .18s ease; }
.ncl__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.ncl__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.ncl__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__item { border-bottom: 1px solid var(--border-subtle); }
.mnav__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-size: 17px; padding: 19px 0; background: none; border: 0; text-align: left;
  color: var(--ink-900); cursor: pointer; font-weight: 400;
}
.mnav__plus { position: relative; width: 16px; height: 16px; opacity: .55; transition: transform .2s var(--ease); }
.mnav__plus::before, .mnav__plus::after { content: ''; position: absolute; background: var(--ink-900); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.mnav__plus::before { width: 16px; height: 1.4px; }
.mnav__plus::after { width: 1.4px; height: 16px; }
.mnav__row[aria-expanded="true"] .mnav__plus { transform: rotate(45deg); }
/* One grid row holding a single wrapper: sizing the wrapper's row to 0fr collapses the whole
   group. The earlier version put the links straight in the grid, so only the first link's row
   was collapsed and the rest rendered open. */
.mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.mnav__sub > .mnav__sub-in { overflow: hidden; min-height: 0; }
.mnav__item.is-open .mnav__sub { grid-template-rows: 1fr; }
.mnav__sub a { display: block; padding: 10px 0 10px 14px; font-size: 15px; color: var(--ink-600); }
.mnav__sub a:first-child { padding-top: 0; }
.mnav__sub a:last-child { padding-bottom: 18px; }
.mnav__item--lang { padding: 18px 0; }
.mnav__foot { display: none; } /* the header CTA is always visible now, so the sheet does not repeat it */
.mnav__cta {
  display: block; text-align: center; background: var(--brand-600); color: var(--white);
  border-radius: 10px; padding: 17px 18px; font-size: 16px; font-weight: 500; letter-spacing: -0.005em;
}
body.mnav-open { overflow: hidden; }

/* ---------- Contour texture ---------- */
.zp {
  position: absolute; inset: -30%; width: 160%; height: 160%;
  pointer-events: none; z-index: 0;
  transform: rotate(-18deg);
  transform-origin: 50% 50%;
}
.zp--brand { color: rgba(31,88,234,.075); }
.zp--ink { color: rgba(31,30,29,.045); }
.js-motion .zp { animation: zpDrift 34s ease-in-out infinite alternate; }
@keyframes zpDrift {
  from { transform: rotate(-18deg) translate3d(0, 0, 0); }
  to   { transform: rotate(-18deg) translate3d(-2.5%, 1.8%, 0); }
}

/* ---------- Stars, external-link glyph, Upwork badge (shared) ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--brand-600); }
.star { width: 13px; height: 13px; }
.ext { width: 12px; height: 12px; color: rgba(31,30,29,.5); transition: transform .2s var(--ease); }
.upwork-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-900); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  padding: 4px 8px; background: var(--white);
  transition: background-color var(--fast) ease, border-color var(--fast) ease;
}
.upwork-link:hover { background: var(--brand-100); border-color: var(--border-brand); }
.upwork-link__logo { height: 11px; width: auto; }

/* ---------- FAQ rows (shared; the homepage wraps answers in .faq__a-in, subpages do not, see site-v2.css) ---------- */
.faq__list { margin-top: 32px; border-top: 1px solid var(--border-subtle); }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__q {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 19px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 17px; color: var(--ink-900); line-height: 1.35;
  transition: color var(--fast) ease;
}
.faq__q:hover { color: var(--brand-600); }
.faq__q:focus-visible { box-shadow: var(--focus-ring); border-radius: 6px; }
.faq__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--brand-600); flex: 0 0 28px; }
.faq__label { flex: 1; }
.faq__chevron { display: inline-flex; width: 16px; height: 16px; opacity: .55; transition: transform .3s var(--ease); }
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(45deg); }
/* Height is driven by site-v2.js (pixel animation, ends at auto). Without JS every answer is open and readable. */
.faq__a { display: block; overflow: hidden; }
.faq__a-in { display: block; }
.faq__a p { padding: 0 44px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-600); letter-spacing: 0; max-width: 92%; }
.faq__a p { opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s; }
.faq__item.is-open .faq__a p { opacity: 1; transform: none; }

/* ---------- Footer (.ft) ---------- */
.ft { margin-top: 96px; }
.ft__in {
  max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 36px;
  border-top: 1px solid var(--border-subtle);
}
.ft__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.ft__logo { height: 52px; width: auto; margin: -14px 0 0 -8px; }
.ft__col { font-size: 13px; color: var(--ink-600); line-height: 2; }
.ft__col a { display: block; color: var(--ink-600); transition: color var(--fast) ease; }
.ft__col a:hover { color: var(--ink-900); }
.ft__bot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--ink-600);
}
.ft__bot a { color: var(--ink-600); transition: color var(--fast) ease; }
.ft__bot a:hover { color: var(--ink-900); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .ncl__actions .lang { display: none; }
  /* The CTA stays in the header on every width (Bastien, 2026-09-16); compact so logo + CTA + burger fit at 320px. */
  .ncl__in { gap: 10px; }
  .ncl__actions { gap: 6px; }
  .btn--nav { font-size: 12.5px; padding: 9px 11px; white-space: nowrap; }
  .ncl__logo { height: 44px; margin: -8px 0 -8px -6px; }
  .ncl__burger { display: flex; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 14.5px; }
  .faq__q { font-size: 16px; padding: 17px 0; gap: 12px; }
  .faq__a p { padding: 0 28px 20px 40px; max-width: none; }
  .btn { white-space: normal; }
  .ft { margin-top: 56px; }
  .ft__in { padding: 32px var(--gutter) 28px; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .ft__grid > div:first-child { grid-column: 1 / -1; }
  .ft__col { font-size: 13.5px; line-height: 1.95; }
  .ft__bot { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
}
@media (max-width: 400px) {
  .faq__a p { padding-left: 40px; padding-right: 8px; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }