/* ==========================================================================
   home-v2.css — NavoAsset homepage v2 (v17.4.5, 29 Sep 2026)
   Scope: only app/Views/user/index.php loads this file. styles.css stays the
   shared stylesheet (header, modals, forms, footer). Every rule here is
   prefixed .hv- or scoped under body.hv so nothing leaks into other pages.
   Design: proof and mechanism — one accent (teal), ink-and-paper canvas,
   content visible at rest (no reveal-on-scroll), one primary CTA per viewport.
   ========================================================================== */
body.hv {
  --hv-paper: #f7f9f8;
  --hv-surface: #ffffff;
  --hv-surface-2: #eef3f1;
  --hv-ink: #0f1c2e;
  --hv-ink-2: #3b4757;
  --hv-muted: #6f7c8b;
  --hv-line: #d8e0dc;
  --hv-line-2: #c4cfca;
  --hv-teal: #0c9488;
  --hv-teal-ink: #0a6f66;
  --hv-teal-soft: #dcf2ee;
  --hv-navy: #0f1c2e;
  --hv-navy-2: #182a42;
  --hv-on-navy: #e9f0ee;
  --hv-on-navy-2: #a9b8c6;
  --hv-radius: 12px;
  --hv-shadow: 0 1px 2px rgba(15,28,46,.06), 0 16px 40px -24px rgba(15,28,46,.35);
  background: var(--hv-paper);
  color: var(--hv-ink);
}
body.hv { padding-top: 64px; }                      /* fixed header height */
body.hv .header { padding: 0; }
body.hv .header .container { height: 64px; }
body.hv .header-logo img, body.hv .header.scrolled .header-logo img { height: 34px; width: auto; }
body.hv .header-nav a { font-size: .9rem; }
body.hv .hv-nav-cta { margin-left: 8px; }
body.hv .btn-login { background: transparent; color: var(--hv-ink); box-shadow: none; border: 1.5px solid var(--hv-line-2); }
body.hv .btn-login:hover { border-color: var(--hv-teal); color: var(--hv-teal-ink); transform: none; box-shadow: none; }
body.hv .hv-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 10px; background: var(--hv-teal); color: #fff; font-weight: 600; text-decoration: none; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: var(--font-body); line-height: 1.2; }
body.hv .hv-cta:hover { background: var(--hv-teal-ink); color: #fff; }
body.hv .hv-cta:focus-visible { outline: 2px solid var(--hv-ink); outline-offset: 2px; }
body.hv .hv-cta.hv-ghost { background: transparent; color: var(--hv-ink); border-color: var(--hv-line-2); }
body.hv .hv-cta.hv-ghost:hover { background: var(--hv-surface-2); color: var(--hv-ink); }
body.hv .hv-cta.hv-sm { padding: 9px 14px; font-size: 14px; }

.hv-wrap { width: min(1120px, 100%); margin: 0 auto; padding-inline: 20px; }
.hv-section { padding-block: clamp(48px, 7vw, 84px); }
.hv-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-teal-ink); font-weight: 600; }
.hv-h1, .hv-h2, .hv-h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; font-weight: 700; text-wrap: balance; color: inherit; }
.hv-h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.01em; margin-top: 12px; }
.hv-h2 { font-size: clamp(26px, 3.2vw, 38px); margin-top: 8px; }
.hv-h3 { font-size: 19px; font-weight: 600; }
.hv-sub { color: var(--hv-ink-2); max-width: 62ch; margin: 10px 0 0; font-size: 17px; line-height: 1.6; }
.hv-ph { border-bottom: 2px dotted #fab219; cursor: help; }

/* ---- hero ---- */
.hv-hero { padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 64px); }
.hv-hero .hv-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hv-h1 span { color: var(--hv-teal); }
.hv-lead { font-size: 18px; color: var(--hv-ink-2); margin-top: 16px; max-width: 52ch; line-height: 1.6; }
.hv-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.hv-ctas small { color: var(--hv-muted); font-size: 13px; flex-basis: 100%; }
.hv-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-top: 22px; font-size: 13px; color: var(--hv-ink-2); line-height: 1.3; }
.hv-proof b { font-family: var(--font-display); font-size: 20px; color: var(--hv-ink); font-weight: 700; display: block; line-height: 1.1; }
.hv-frame { background: var(--hv-navy); color: var(--hv-on-navy); border-radius: 16px; padding: 18px; box-shadow: var(--hv-shadow); min-width: 0; }
.hv-frame .hv-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--hv-on-navy-2); margin-bottom: 12px; }
.hv-frame .hv-bar b { color: var(--hv-on-navy); font-weight: 600; font-family: var(--font-display); font-size: 14px; }
.hv-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hv-kpi { background: var(--hv-navy-2); border-radius: 10px; padding: 12px 14px; }
.hv-kpi small { display: block; color: var(--hv-on-navy-2); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.hv-kpi b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.hv-kpi span { font-size: 12px; color: #7fd8cc; }
.hv-ledger { margin-top: 12px; background: var(--hv-navy-2); border-radius: 10px; overflow: hidden; }
.hv-ledger .hv-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 14px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.06); align-items: center; }
.hv-ledger .hv-row:first-child { border-top: 0; color: var(--hv-on-navy-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.hv-ledger .hv-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.hv-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(34,184,170,.18); color: #8fe3d8; font-weight: 600; white-space: nowrap; }
.hv-tag.hv-due { background: rgba(250,178,25,.18); color: #ffd57a; }
.hv-frame .hv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--hv-on-navy-2); }
.hv-frame .hv-foot b { color: var(--hv-on-navy); }
.hv-spark { height: 34px; width: 120px; flex: none; }

/* ---- recognition strip ---- */
.hv-strip { border-block: 1px solid var(--hv-line); background: var(--hv-surface); }
.hv-strip .hv-wrap { display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: center; justify-content: center; font-size: 13.5px; color: var(--hv-ink-2); padding-block: 16px; }
.hv-strip b { color: var(--hv-ink); font-weight: 600; }
.hv-strip .hv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hv-teal); display: inline-block; margin-right: 8px; vertical-align: middle; }

/* ---- services ---- */
.hv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hv-card { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 22px; box-shadow: var(--hv-shadow); min-width: 0; }
.hv-card .hv-mech { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--hv-teal-ink); line-height: 1.15; margin: 12px 0 6px; }
.hv-card p { color: var(--hv-ink-2); font-size: 15px; margin: 0; line-height: 1.6; }
.hv-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--hv-ink-2); font-size: 14.5px; list-style: disc; }
.hv-card li { margin: 3px 0; }

/* ---- money flow ---- */
.hv-money { background: var(--hv-navy); color: var(--hv-on-navy); }
.hv-money .hv-eyebrow { color: #7fd8cc; }
.hv-money .hv-sub { color: var(--hv-on-navy-2); }
.hv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; counter-reset: hvs; }
.hv-step { background: var(--hv-navy-2); border-radius: var(--hv-radius); padding: 20px; min-width: 0; }
.hv-step::before { counter-increment: hvs; content: counter(hvs); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hv-teal); color: #fff; font-family: var(--font-display); font-weight: 700; margin-bottom: 10px; }
.hv-step .hv-h3 { color: var(--hv-on-navy); font-size: 17px; }
.hv-step p { color: var(--hv-on-navy-2); font-size: 14.5px; margin: 6px 0 0; line-height: 1.55; }
.hv-assure { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-size: 13.5px; color: var(--hv-on-navy-2); }

/* ---- product tour ---- */
.hv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.hv-tabs button { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--hv-line-2); font-size: 14px; font-weight: 500; color: var(--hv-ink-2); background: var(--hv-surface); font-family: var(--font-body); }
.hv-tabs button[aria-selected="true"] { background: var(--hv-ink); color: var(--hv-paper); border-color: var(--hv-ink); }
.hv-tabs button:focus-visible { outline: 2px solid var(--hv-teal); outline-offset: 2px; }
.hv-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: center; margin-top: 22px; }
.hv-tour ul { margin: 12px 0 0; padding-left: 18px; color: var(--hv-ink-2); list-style: disc; }
.hv-tour li { margin: 6px 0; }
.hv-screen { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: 14px; box-shadow: var(--hv-shadow); padding: 16px; min-width: 0; }
.hv-screen .hv-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--hv-muted); margin-bottom: 10px; }
.hv-screen .hv-hd b { color: var(--hv-ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.hv-list { display: flex; flex-direction: column; gap: 8px; }
.hv-li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--hv-surface-2); border-radius: 10px; font-size: 14px; }
.hv-li .hv-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--hv-teal-soft); display: grid; place-items: center; color: var(--hv-teal-ink); font-weight: 700; font-family: var(--font-display); }
.hv-li small { display: block; color: var(--hv-muted); font-size: 12px; }
.hv-li .hv-st { font-size: 12px; font-weight: 600; color: var(--hv-teal-ink); text-align: right; }
.hv-li .hv-st.hv-warn { color: #b47a00; }
.hv-paybtn { margin-top: 10px; display: flex; gap: 8px; }
.hv-paybtn span { flex: 1; text-align: center; padding: 10px; border-radius: 9px; background: var(--hv-teal); color: #fff; font-weight: 600; font-size: 14px; }
.hv-paybtn span.hv-ghost { background: transparent; border: 1px solid var(--hv-line-2); color: var(--hv-ink); }
.hv-tour [hidden], .hv-screen [hidden] { display: none !important; }

/* ---- pricing ---- */
.hv-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; margin-top: 26px; align-items: start; }
.hv-pricecard { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 26px; box-shadow: var(--hv-shadow); }
.hv-pricecard .hv-big { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.2; margin: 8px 0 6px; }
.hv-pricecard p { color: var(--hv-ink-2); margin: 0; line-height: 1.6; }
.hv-pricecard ul { margin: 14px 0 0; padding-left: 18px; color: var(--hv-ink-2); list-style: disc; }
.hv-pricecard li { margin: 5px 0; }
.hv-cmpwrap { overflow-x: auto; }
.hv-cmp { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; }
.hv-cmp th, .hv-cmp td { padding: 10px 12px; border-bottom: 1px solid var(--hv-line); text-align: left; vertical-align: top; }
.hv-cmp th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-muted); background: var(--hv-surface-2); }
.hv-cmp td:first-child { color: var(--hv-ink-2); }

/* ---- NRI ---- */
.hv-nri { background: var(--hv-surface); border-block: 1px solid var(--hv-line); }
.hv-nri .hv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hv-checks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hv-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--hv-ink-2); font-size: 15px; line-height: 1.5; }
.hv-checks li::before { content: "\2713"; color: var(--hv-teal-ink); font-weight: 700; }

/* ---- stories ---- */
.hv-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.hv-story { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 22px; box-shadow: var(--hv-shadow); min-width: 0; }
.hv-story .hv-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.hv-story .hv-q { font-size: 15.5px; color: var(--hv-ink); line-height: 1.55; margin: 0; }
.hv-story .hv-who { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 13.5px; color: var(--hv-muted); }
.hv-story .hv-av { width: 38px; height: 38px; border-radius: 50%; background: var(--hv-teal-soft); color: var(--hv-teal-ink); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); flex: none; background-size: cover; background-position: center; }
.hv-story .hv-who b { display: block; color: var(--hv-ink); font-weight: 600; }

/* ---- insights ---- */
.hv-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.hv-post { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; box-shadow: var(--hv-shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; min-width: 0; }
.hv-post img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; background: var(--hv-surface-2); }
.hv-post .hv-b { padding: 14px 16px 16px; }
.hv-post .hv-cat { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hv-teal-ink); font-weight: 600; }
.hv-post .hv-h3 { font-size: 16.5px; margin-top: 6px; }
.hv-post p { color: var(--hv-ink-2); font-size: 14px; margin: 6px 0 0; line-height: 1.55; }
.hv-post time { display: block; color: var(--hv-muted); font-size: 12.5px; margin-top: 10px; }
.hv-post:hover .hv-h3 { color: var(--hv-teal-ink); }

/* ---- faq ---- */
.hv-faq { max-width: 760px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 8px; }
.hv-faq details { background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: 10px; padding: 0 18px; }
.hv-faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--hv-ink); }
.hv-faq summary::-webkit-details-marker { display: none; }
.hv-faq summary::after { content: "+"; color: var(--hv-teal-ink); font-weight: 700; font-size: 20px; line-height: 1; flex: none; }
.hv-faq details[open] summary::after { content: "\2013"; }
.hv-faq details p { padding: 0 0 16px; color: var(--hv-ink-2); font-size: 15px; margin: 0; line-height: 1.6; }

/* ---- final CTA ---- */
.hv-final { background: var(--hv-navy); color: var(--hv-on-navy); }
.hv-final .hv-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hv-final .hv-h2 { color: var(--hv-on-navy); }
.hv-final p { color: var(--hv-on-navy-2); }
.hv-final .hv-eyebrow { color: #7fd8cc; }
.hv-contactcard { background: var(--hv-surface); color: var(--hv-ink); border-radius: var(--hv-radius); padding: 22px; display: grid; gap: 12px; }
.hv-contactcard p { color: var(--hv-ink-2); margin: 0; font-size: 15px; }
.hv-contactcard .hv-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; background: var(--hv-surface-2); border-radius: 9px; font-size: 14px; }
.hv-contactcard .hv-line a { color: var(--hv-ink); text-decoration: none; font-weight: 600; }

/* ---- footer tweak (shared markup) ---- */
body.hv .footer .footer-brand img { max-height: 40px !important; width: auto; }

/* ---- mobile bar + WhatsApp ---- */
body.hv .whatsapp-float { bottom: 24px; }
.hv-mbar { display: none; }
@media (max-width: 900px) {
  .hv-hero .hv-wrap, .hv-tour, .hv-price, .hv-nri .hv-wrap, .hv-final .hv-wrap { grid-template-columns: 1fr; }
  .hv-cards, .hv-stories, .hv-posts { grid-template-columns: 1fr; }
  .hv-steps { grid-template-columns: 1fr 1fr; }
  .hv-hero .hv-ctas .hv-ghost { display: none; }
  body.hv .hv-nav-cta { display: none; }
}
@media (max-width: 768px) {
  body.hv .whatsapp-float { display: none !important; }
  body.hv { padding-bottom: 74px; }
  .hv-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--hv-line); box-shadow: 0 -4px 16px rgba(15,23,42,.08); }
  .hv-mbar .hv-cta { flex: 1; padding: 12px 10px; font-size: 14.5px; }
  .hv-mbar .hv-ico { flex: 0 0 48px; width: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
  body.hv .hv-mbar .hv-call { background: var(--hv-surface-2); color: var(--hv-ink); border: 1px solid var(--hv-line-2); }
  body.hv .hv-mbar .hv-wa { background: #25d366; color: #fff; }
  body.hv .hv-mbar .hv-ico svg { width: 22px; height: 22px; display: block; flex: none; }
}
@media (max-width: 560px) { .hv-steps { grid-template-columns: 1fr; } .hv-proof { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { body.hv * { transition: none !important; } }