/* Kriyasya Utility — Homepage royal refinement (2026).
 *
 * Scoped to the Utility hub only, loaded after the shared hub engine's own styles. It refines
 * presentation without touching core/hub.php, so other worlds are unaffected.
 *
 * Direction: Apple-grade restraint (calm light canvas, precise type, generous rhythm) with
 * Google-grade legibility (clear hierarchy, honest labels, real focus states).
 */

.lvh2 {
  --u-ink: #171a21;
  --u-ink2: #4b5262;
  --u-ink3: #6d758a;
  --u-line: rgba(23, 26, 33, .10);
  --u-royal: #5b4ad4;
  --u-royal-soft: rgba(91, 74, 212, .10);
  --u-gold: #c39a4e;
  --u-card: #ffffff;
  --u-ease: cubic-bezier(.22, .8, .24, 1);
  background:
    radial-gradient(1200px 560px at 8% -10%, rgba(91, 74, 212, .10), transparent 60%),
    radial-gradient(900px 480px at 96% 0%, rgba(195, 154, 78, .10), transparent 58%),
    linear-gradient(180deg, #fbfbfe 0%, #f6f7fb 100%);
  color: var(--u-ink);
  letter-spacing: -.005em;
}

/* ── Hero: never cramped against an edge ───────────────────────────────── */
.lvh2-wrap { max-width: 1180px; padding-inline: clamp(16px, 3.4vw, 30px); }
.lvh2-hero { padding: clamp(34px, 6vw, 76px) 0 clamp(24px, 3.6vw, 42px); }
.lvh2-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--u-royal-soft);
  border: 1px solid rgba(91, 74, 212, .20);
  color: var(--u-royal);
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.lvh2-title {
  margin: 20px 0 14px;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.042em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--u-ink);
}
.lvh2-lead {
  max-width: 62ch;
  color: var(--u-ink2);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.66;
}

/* ── Search: the primary action on a 100+ tool page ────────────────────── */
.lvh2-search { margin-top: clamp(20px, 3vw, 30px); max-width: 640px; }
.lvh2-search input {
  width: 100%; min-height: 58px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: var(--u-card);
  color: var(--u-ink);
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(23, 26, 33, .07);
  transition: border-color .2s var(--u-ease), box-shadow .2s var(--u-ease);
}
.lvh2-search input::placeholder { color: var(--u-ink3); }
.lvh2-search input:focus {
  outline: none;
  border-color: var(--u-royal);
  box-shadow: 0 0 0 4px var(--u-royal-soft), 0 14px 34px rgba(23, 26, 33, .10);
}

/* ── Stats + trust: quiet proof, not decoration ────────────────────────── */
.lvh2-stats { gap: clamp(14px, 2.4vw, 30px); margin-top: clamp(22px, 3vw, 32px); }
.lvh2-stat { color: var(--u-ink2); }
.lvh2-stat strong, .lvh2-stat b, .lvh2-stat .n {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--u-ink);
}
.lvh2-trust { gap: 8px; margin-top: 22px; }
.lvh2-trust-pill {
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--u-line);
  color: var(--u-ink2);
  font-size: .8rem; font-weight: 600;
  backdrop-filter: blur(8px);
}

/* ── Category navigation ───────────────────────────────────────────────── */
.lvh2-nav { gap: 8px; padding: 6px 0 4px; }
.lvh2-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255, 255, 255, .78);
  color: var(--u-ink2);
  font-size: .84rem; font-weight: 650;
  text-decoration: none;
  transition: color .18s var(--u-ease), border-color .18s var(--u-ease), background .18s var(--u-ease), transform .18s var(--u-ease);
}
.lvh2-nav a:hover {
  color: var(--u-royal);
  border-color: rgba(91, 74, 212, .34);
  background: #fff;
  transform: translateY(-1px);
}
.lvh2-nav-n { color: var(--u-ink3); font-variant-numeric: tabular-nums; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.lvh2-sec { margin-top: clamp(34px, 5vw, 62px); scroll-margin-top: 84px; }
.lvh2-sec-head { gap: 8px; margin-bottom: clamp(16px, 2vw, 24px); }
.lvh2-sec-title {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  letter-spacing: -.028em; font-weight: 700;
  color: var(--u-ink);
}
.lvh2-sec-desc { color: var(--u-ink2); max-width: 70ch; line-height: 1.6; }

/* ── Tool cards: the heart of the page ─────────────────────────────────── */
.lvtc-grid { gap: clamp(12px, 1.6vw, 18px); }
.lvtc {
  border-radius: 20px !important;
  border: 1px solid var(--u-line) !important;
  background: var(--u-card) !important;
  box-shadow: 0 2px 8px rgba(23, 26, 33, .05) !important;
  transition: transform .2s var(--u-ease), box-shadow .22s var(--u-ease), border-color .2s var(--u-ease) !important;
}
.lvtc:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(91, 74, 212, .30) !important;
  box-shadow: 0 18px 40px rgba(23, 26, 33, .12) !important;
}
.lvtc:focus-visible { outline: 3px solid var(--u-royal); outline-offset: 3px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.lvh2-btn, .u-cta-btn {
  min-height: 52px;
  border-radius: 999px;
  font-weight: 700; letter-spacing: -.01em;
  transition: transform .18s var(--u-ease), box-shadow .22s var(--u-ease);
}
.lvh2-btn-primary, .u-cta-btn {
  background: linear-gradient(135deg, #6b58e8, #4536b4) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(69, 54, 180, .28) !important;
}
.lvh2-btn-primary:hover, .u-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(69, 54, 180, .34) !important; }
.lvh2-btn-ghost {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-ink) !important;
}
.lvh2-btn-ghost:hover { background: #fff !important; border-color: rgba(23, 26, 33, .2) !important; transform: translateY(-1px); }

/* ── Show-more control ─────────────────────────────────────────────────── */
.lvh2-showmore {
  min-height: 46px; border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255, 255, 255, .86);
  color: var(--u-ink2); font-weight: 650;
}
.lvh2-showmore:hover { background: #fff; color: var(--u-royal); border-color: rgba(91, 74, 212, .3); }

/* ── Pass CTA panel ────────────────────────────────────────────────────── */
.u-cta { padding: clamp(30px, 5vw, 64px) 0; }
.u-cta-box {
  max-width: 1180px; margin-inline: auto;
  padding: clamp(24px, 3.6vw, 40px);
  border-radius: 26px;
  border: 1px solid rgba(195, 154, 78, .34);
  background:
    radial-gradient(700px 260px at 92% -20%, rgba(195, 154, 78, .16), transparent 66%),
    linear-gradient(140deg, #fffdf8, #f7f5ff);
  box-shadow: 0 22px 56px rgba(23, 26, 33, .10);
  gap: clamp(18px, 3vw, 34px);
}
.u-cta-box h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -.03em; font-weight: 700;
  color: var(--u-ink); margin-bottom: 8px;
}
.u-cta-box p { color: var(--u-ink2); line-height: 1.62; max-width: 70ch; }

/* ── Language toggle (superseded by unified header; retired on-page) ── */
.u-lang, .lv-lang-toggle { display: none !important; }

/* ── Accessibility + preferences ───────────────────────────────────────── */
.lvh2 a:focus-visible, .lvh2 button:focus-visible {
  outline: 3px solid var(--u-royal);
  outline-offset: 3px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .lvh2 *, .lvh2 *::before, .lvh2 *::after { transition: none !important; animation: none !important; }
  .lvtc:hover, .lvh2-btn:hover, .lvh2-nav a:hover, .u-cta-btn:hover { transform: none !important; }
}
@media (max-width: 560px) {
  .lvh2-title { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .lvh2-search input { min-height: 52px; }
  .u-cta-box { border-radius: 20px; }
}

/* Utility Pass — same compact navy/emerald component used on tool landings. */
.lvh2 .ut-pass { position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 22px;border:1px solid rgba(22,163,120,.25);border-radius:20px;color:#f5f8fc;background:radial-gradient(460px 180px at 86% -20%,rgba(36,201,149,.14),transparent 68%),linear-gradient(135deg,#13233a,#0e1a2d);box-shadow:0 16px 40px rgba(15,23,42,.18),inset 0 1px rgba(255,255,255,.05)}
.lvh2 .ut-pass__mark{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;color:#79e8c3;background:rgba(36,201,149,.11);border:1px solid rgba(36,201,149,.24)}
.lvh2 .ut-pass__mark svg{width:26px;height:26px}.lvh2 .ut-pass__content{min-width:0}.lvh2 .ut-pass__eyebrow{display:block;margin-bottom:3px;color:#70dfbb;font-size:.65rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.lvh2 .ut-pass h2{margin:0;color:#f5f8fc;font-size:clamp(1.1rem,2.2vw,1.48rem);line-height:1.16;letter-spacing:-.025em;text-wrap:balance}.lvh2 .ut-pass p{margin:4px 0 9px;color:#94a3b8;font-size:.78rem}
.lvh2 .ut-pass__metrics{display:flex;flex-wrap:wrap;gap:7px}.lvh2 .ut-pass__metrics>span{padding:4px 8px;border:1px solid rgba(214,225,239,.13);border-radius:999px;color:#94a3b8;font-size:.68rem;background:rgba(255,255,255,.025)}.lvh2 .ut-pass__metrics strong{color:#c6d1df;font-variant-numeric:tabular-nums}
.lvh2 .ut-pass__action{min-width:178px;display:flex;flex-direction:column;gap:6px;text-align:center}.lvh2 .ut-pass__action form{margin:0}.lvh2 .ut-pass__btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 16px;border:0;border-radius:999px;color:#041a13;background:linear-gradient(135deg,#65e7bd,#24c995);box-shadow:0 9px 24px rgba(20,167,118,.22);text-decoration:none;font:750 .78rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}.lvh2 .ut-pass__btn small{color:#194d3c;font-size:.67rem}.lvh2 .ut-pass__note{color:#94a3b8;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase}
@media(max-width:760px){.lvh2 .ut-pass{grid-template-columns:48px 1fr;gap:14px}.lvh2 .ut-pass__action{grid-column:1/-1;min-width:0}}@media(max-width:520px){.lvh2 .ut-pass{grid-template-columns:1fr;padding:18px}.lvh2 .ut-pass__mark{display:none}}