/* ===== Forms, modal, and sub-pages (contact / careers / about) — Navvo landing =====
   Reuses landing-v2.css design tokens so everything adapts to light/dark + RTL. */

/* ---- form fields ---- */
.nv-field { display: flex; flex-direction: column; gap: 6px; }
.nv-field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nv-field .req { color: var(--blue); }
.nv-input,
.nv-textarea,
.nv-select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.nv-textarea { min-height: 120px; resize: vertical; }
.nv-input:focus, .nv-textarea:focus, .nv-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--accent-soft); }
.nv-input::placeholder, .nv-textarea::placeholder { color: var(--ink-3); }
.nv-form { display: flex; flex-direction: column; gap: 14px; }
.nv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .nv-form-row { grid-template-columns: 1fr; } }
.nv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nv-note { border-radius: 14px; padding: 12px 14px; font-size: 14px; display: none; line-height: 1.5; }
.nv-note.ok  { display: block; background: rgba(34,197,94,.12);  color: #15803d; border: 1px solid rgba(34,197,94,.32); }
.nv-note.err { display: block; background: rgba(239,68,68,.12);  color: #b91c1c; border: 1px solid rgba(239,68,68,.32); }
html[data-theme="dark"] .nv-note.ok  { color: #6ee7a8; }
html[data-theme="dark"] .nv-note.err { color: #fca5a5; }
.nv-form .btn[disabled] { opacity: .6; pointer-events: none; }

/* ---- modal ---- */
.nv-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.nv-modal.open { display: flex; }
.nv-modal-backdrop { position: absolute; inset: 0; background: rgba(8,12,22,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nv-modal-card {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
  border-radius: 26px; padding: 28px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(8,12,22,.45); animation: nvPop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nvPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.nv-modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
}
.nv-modal-close:hover { color: var(--ink); }
.nv-modal-eyebrow { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.nv-modal-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 8px 0 6px; color: var(--ink); }
.nv-modal-sub { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; line-height: 1.55; }

/* ---- sub-page layout ---- */
.nv-page { padding: 132px 0 84px; min-height: 72vh; }
.nv-page .container { max-width: 1000px; }
.nv-page-narrow .container { max-width: 760px; }
.nv-page-head { text-align: center; margin-bottom: 40px; }
.nv-page-head .section-label { display: inline-flex; margin-bottom: 14px; }
.nv-page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; color: var(--ink); margin: 0 0 12px; }
.nv-page-head h1 em { font-style: normal; background: linear-gradient(120deg, var(--blue), var(--accent-2, #2FA8F2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-page-head p { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 620px; margin: 0 auto; }
.nv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .nv-grid-2 { grid-template-columns: 1fr; } }
.nv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card, 24px); padding: 26px; box-shadow: var(--shadow-low, 0 8px 18px rgba(10,15,28,.06)); }

/* ---- careers ---- */
.nv-jobs { display: flex; flex-direction: column; gap: 14px; }
.nv-job { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s; }
.nv-job:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 14px 32px rgba(56,107,255,.14); }
.nv-job h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.nv-job p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; }
.nv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-tag { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.nv-empty { text-align: center; color: var(--ink-2); padding: 48px 20px; font-size: 15.5px; }

/* ---- about ---- */
.nv-about-section { margin-top: 36px; }
.nv-about-section h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.nv-about-section p { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0 0 12px; white-space: pre-wrap; }
.nv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 28px; }
.nv-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-align: center; }
.nv-stat b { display: block; font-family: var(--font-display); font-size: 30px; color: var(--ink); }
.nv-stat span { color: var(--ink-2); font-size: 13.5px; }
.nv-loading { text-align: center; color: var(--ink-3); padding: 40px; }

/* ===== Redesigned sub-pages (about / careers / contact) — 2026-06-14 ===== */
.nv-page-wide .container { max-width: 1060px; }
.nv-lead-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

/* section blocks within a page */
.nv-section { margin-top: 60px; }
.nv-section-head { text-align: center; max-width: 660px; margin: 0 auto 28px; }
.nv-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 10px; }
.nv-section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.nv-section-head p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* icon cards (contact methods, careers perks, about values) */
.nv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; }
.nv-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px; text-decoration: none; display: block; color: inherit;
  box-shadow: var(--shadow-low);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s;
}
a.nv-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 36px rgba(56,107,255,.16); }
.nv-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--blue); margin-bottom: 15px; }
.nv-ic svg { width: 23px; height: 23px; display: block; }
.nv-card h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.nv-card p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
.nv-card-val { color: var(--blue); font-size: 15px; font-weight: 500; margin-top: 10px; display: block; }

/* about: mission / feature cards */
.nv-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.nv-about-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-low); }
.nv-about-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.nv-about-card p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 0; white-space: pre-wrap; }

/* careers: job card head + apply */
.nv-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nv-job .nv-apply { white-space: nowrap; flex-shrink: 0; }

/* contact: form panel header + (kept) reach rows */
.nv-panel-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin: 0 0 5px; }
.nv-panel-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; line-height: 1.55; }

/* closing CTA band */
.nv-cta {
  margin-top: 64px; text-align: center; border-radius: var(--r-card); padding: 46px 28px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent2-soft));
  border: 1px solid var(--line);
}
.nv-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); color: var(--ink); margin: 0 0 10px; }
.nv-cta p { color: var(--ink-2); font-size: 15.5px; margin: 0 auto 22px; max-width: 540px; line-height: 1.6; }
.nv-cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 820px) { .nv-cta { padding: 36px 20px; } }

/* ===== entrance animations + micro-interactions — 2026-06-14 ===== */
@media (prefers-reduced-motion: no-preference) {
  /* hero load entrance (one-shot; ends visible → safe without JS) */
  .nv-page-head { animation: nvRise .85s cubic-bezier(.2,.6,.2,1) both; }
  /* animated gradient on the hero accent word */
  .nv-page-head h1 em { background-size: 220% auto; animation: nvGrad 7s linear infinite; }

  /* MODERN: scroll-SCRUBBED entrances — each element animates in proportion to
     its own scroll position through the viewport. Staggered via per-child range. */
  @supports (animation-timeline: view()) {
    html.nv-anim .nv-reveal { animation: nvUp3d linear both; animation-timeline: view(); animation-range: entry 2% entry 42%; }
    html.nv-anim .nv-reveal[data-d="1"] { animation-range: entry 10% entry 50%; }
    html.nv-anim .nv-reveal[data-d="2"] { animation-range: entry 18% entry 58%; }
    html.nv-anim .nv-stagger > * { animation: nvUp3d linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
    html.nv-anim .nv-stagger > *:nth-child(2) { animation-range: entry 8% entry 52%; }
    html.nv-anim .nv-stagger > *:nth-child(3) { animation-range: entry 13% entry 57%; }
    html.nv-anim .nv-stagger > *:nth-child(4) { animation-range: entry 18% entry 62%; }
    html.nv-anim .nv-stagger > *:nth-child(5) { animation-range: entry 22% entry 66%; }
    html.nv-anim .nv-stagger > *:nth-child(6) { animation-range: entry 26% entry 70%; }
    html.nv-anim .nv-stagger > *:nth-child(7) { animation-range: entry 30% entry 74%; }
    html.nv-anim .nv-stagger > *:nth-child(8) { animation-range: entry 34% entry 78%; }
  }
  /* FALLBACK: one-shot IO reveal (landing-anim.js adds .in) */
  @supports not (animation-timeline: view()) {
    html.nv-anim .nv-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
    html.nv-anim .nv-reveal.in { opacity: 1; transform: none; }
    html.nv-anim .nv-reveal[data-d="1"] { transition-delay: .08s; }
    html.nv-anim .nv-reveal[data-d="2"] { transition-delay: .16s; }
    html.nv-anim .nv-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
    html.nv-anim .nv-stagger.in > * { opacity: 1; transform: none; }
    html.nv-anim .nv-stagger.in > *:nth-child(2) { transition-delay: .07s; }
    html.nv-anim .nv-stagger.in > *:nth-child(3) { transition-delay: .14s; }
    html.nv-anim .nv-stagger.in > *:nth-child(4) { transition-delay: .21s; }
    html.nv-anim .nv-stagger.in > *:nth-child(5) { transition-delay: .28s; }
    html.nv-anim .nv-stagger.in > *:nth-child(6) { transition-delay: .35s; }
    html.nv-anim .nv-stagger.in > *:nth-child(7) { transition-delay: .42s; }
    html.nv-anim .nv-stagger.in > *:nth-child(8) { transition-delay: .49s; }
  }
}
@keyframes nvRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nvGrad { to { background-position: 220% center; } }
@keyframes nvUp3d { from { opacity: 0; transform: perspective(1000px) translateY(46px) rotateX(7deg) scale(.965); } to { opacity: 1; transform: none; } }

/* icon pop on card hover */
.nv-ic { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s; }
.nv-card:hover .nv-ic { transform: scale(1.1) rotate(-5deg); }
/* growing top-accent bar on hover */
.nv-card { overflow: hidden; }
.nv-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
a.nv-card:hover::before { transform: scaleX(1); }
/* stat cards lift slightly on hover */
.nv-stat { transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s; }
.nv-stat:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 14px 30px rgba(56,107,255,.12); }
/* about mission cards lift */
.nv-about-card { transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s; }
.nv-about-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 34px rgba(56,107,255,.12); }
/* CTA buttons subtle */
.nv-cta { position: relative; overflow: hidden; }
.nv-cta::after {
  content: ""; position: absolute; inset: -40% -10% auto; height: 200px;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity: .5; pointer-events: none;
}

/* ===== creative flourishes drawn from the old pages — 2026-06-14 ===== */
/* live pulsing dot before page/section eyebrows */
.nv-page-head .section-label, .nv-eyebrow, .beta-step .eyebrow { position: relative; }
.nv-page-head .section-label::before, .nv-eyebrow::before, .beta-step .eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); margin-inline-end: 9px; vertical-align: middle;
  box-shadow: 0 0 0 4px var(--accent2-soft), 0 0 12px var(--accent-2);
}
@media (prefers-reduced-motion: no-preference) {
  .nv-page-head .section-label::before, .nv-eyebrow::before, .beta-step .eyebrow::before { animation: nvPulse 2s ease-in-out infinite; }
}
@keyframes nvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.78); } }

/* animated scan line sweeping across glass panels (from the old contact page) */
@media (prefers-reduced-motion: no-preference) {
  .nv-panel::after {
    content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    pointer-events: none; animation: nvScan 5s ease-in-out infinite;
  }
}
@keyframes nvScan { 0%, 100% { opacity: .12; transform: translateX(-7%); } 50% { opacity: .65; transform: translateX(7%); } }

/* cursor-follow spotlight: cards tagged .spot use the landing's --mx/--my glow */
.nv-card.spot::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 70%); }

/* beta: glass terminal readout with blinking cursor (from the old private-beta page) */
.beta-term {
  margin: 16px 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.95;
  color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden;
}
.beta-term .k { color: var(--blue); margin-inline-end: 6px; }
.beta-term .ok { color: #2db36b; }
.beta-term .v { color: var(--ink); }
.beta-term .cur { display: inline-block; width: 6px; height: 12px; background: var(--blue); vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .beta-term .cur { animation: nvBlink 1s steps(2) infinite; }
  .beta-term::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: nvScan 4s ease-in-out infinite; }
}
@keyframes nvBlink { 50% { opacity: 0; } }

/* ===================================================================
   Legal / policy pages (/privacy, /terms, /legal)
   Long-form bilingual documents. EN + AR are both present in the HTML;
   the block for the inactive language is hidden purely via the
   html[data-lang] attribute that i18n.js already toggles — so the
   footer/nav language switch drives these with zero extra JS, and if
   scripting fails the English copy still renders.
   =================================================================== */
[data-legal-lang="ar"] { display: none; }
html[data-lang="ar"] [data-legal-lang="ar"] { display: block; }
html[data-lang="ar"] [data-legal-lang="en"] { display: none; }

.nv-legal { max-width: 840px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); }
.nv-legal-meta {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3); margin: 0 0 24px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.nv-legal-lede { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; margin: 0 0 8px; }
.nv-legal h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(19px, 2.4vw, 23px); color: var(--ink); margin: 34px 0 12px;
}
.nv-legal > h2:first-of-type { margin-top: 4px; }
.nv-legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 22px 0 8px; }
.nv-legal p { color: var(--ink-2); font-size: 15.5px; line-height: 1.78; margin: 0 0 14px; }
.nv-legal ul { margin: 0 0 16px; padding-inline-start: 22px; list-style: none; }
.nv-legal ul li { position: relative; color: var(--ink-2); font-size: 15.5px; line-height: 1.72; margin: 0 0 9px; }
.nv-legal ul li::before {
  content: ""; position: absolute; inset-inline-start: -18px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
  transform: rotate(45deg);
}
.nv-legal strong, .nv-legal b { color: var(--ink); font-weight: 600; }
.nv-legal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.nv-legal a:hover { border-bottom-color: var(--blue); }
.nv-legal-note {
  margin-top: 26px; padding: 16px 18px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.7;
}
.nv-legal-note strong { color: var(--ink); }
/* jump-links / hub cards inherit .nv-cards + .nv-card; nothing extra needed */