/* ToolNepal — Premium SaaS UI (Vanilla CSS) */
:root{--red-500:#d32f2f;--red-700:#b71c1c;--red-600:#c62828;--bg:#fff;--panel:#fff;--surface:rgba(255,255,255,.86);--border:rgba(17,24,39,.12);--text:#0b1220;--muted:rgba(11,18,32,.66);--radius-sm:12px;--radius:18px;--radius-lg:26px;--shadow-sm:0 10px 18px rgba(15,23,42,.06);--shadow:0 18px 40px rgba(15,23,42,.10);--shadow-lg:0 26px 70px rgba(15,23,42,.18);--ring:0 0 0 3px rgba(211,47,47,.24);--t:.2s cubic-bezier(.2,.7,.2,1);--container:1160px;--s3:1rem;--s4:1.25rem;--s5:1.6rem;--s6:2rem;--s7:2.6rem;--grad:radial-gradient(1200px 700px at 20% 0%, rgba(211,47,47,.20), rgba(211,47,47,0) 55%),radial-gradient(900px 520px at 80% 10%, rgba(17,24,39,.10), rgba(17,24,39,0) 60%),linear-gradient(180deg,#fff,#f7f8fb)}
html[data-theme="dark"]{--bg:#0b0f17;--panel:#0f1521;--surface:rgba(16,22,34,.78);--border:rgba(231,236,246,.12);--text:#eef3ff;--muted:rgba(238,243,255,.70);--shadow-sm:0 10px 18px rgba(0,0,0,.25);--shadow:0 18px 40px rgba(0,0,0,.32);--shadow-lg:0 26px 70px rgba(0,0,0,.46);--ring:0 0 0 3px rgba(211,47,47,.32);--grad:radial-gradient(1200px 700px at 20% 0%, rgba(211,47,47,.26), rgba(211,47,47,0) 55%),radial-gradient(900px 520px at 80% 10%, rgba(238,243,255,.08), rgba(238,243,255,0) 60%),linear-gradient(180deg,#0b0f17,#0b0f17)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--s5);top:var(--s5);width:auto;height:auto;padding:.7rem 1rem;background:var(--panel);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);z-index:9999}
.site-header{position:sticky;top:0;z-index:120;background:var(--surface);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.site-footer{position:sticky;bottom:0;z-index:80;background:var(--surface);backdrop-filter:blur(14px);border-top:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem}.brand img{height:34px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.12))}
.nav-links{display:flex;align-items:center;gap:.35rem;padding:.35rem;border-radius:999px;background:rgba(17,24,39,.04);border:1px solid var(--border)}
html[data-theme="dark"] .nav-links{background:rgba(238,243,255,.06)}
.nav-links a{padding:.55rem .85rem;border-radius:999px;color:var(--muted);font-weight:800;transition:var(--t)}
.nav-links a:hover{background:rgba(211,47,47,.12);color:var(--text)}
.nav-links a[aria-current="page"]{background:rgba(211,47,47,.16);color:var(--text)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1.05rem;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:900;transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t),color var(--t)}
.btn:focus{outline:none;box-shadow:var(--ring)}.btn:active{transform:translateY(1px)}
.btn-primary{color:#fff;background:linear-gradient(180deg,var(--red-500),var(--red-700));box-shadow:0 14px 30px rgba(211,47,47,.22)}
.btn-primary:hover{box-shadow:0 18px 45px rgba(211,47,47,.30)}
.btn-secondary{background:rgba(17,24,39,.05);border-color:var(--border)}
html[data-theme="dark"] .btn-secondary{background:rgba(238,243,255,.08)}
.btn-ghost{background:transparent;border-color:var(--border)}
.icon-btn{width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.55);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t)}
html[data-theme="dark"] .icon-btn{background:rgba(238,243,255,.06)}
.main{padding:var(--s7) 0;min-height:calc(100vh - 150px);background:var(--grad)}
h1{font-size:clamp(1.85rem,2.6vw + 1rem,3.1rem);letter-spacing:-.02em;margin:0 0 var(--s3)}h2{margin:0 0 var(--s3)}h3{margin:0 0 .5rem}
.help{color:var(--muted);font-weight:700}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow)}
.card:hover{box-shadow:var(--shadow-lg)}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:999px;font-size:.82rem;font-weight:900;color:var(--red-700);background:rgba(211,47,47,.11);border:1px solid rgba(211,47,47,.25)}
/* Native-looking ad blocks */
.ad{
  position: relative;
  border-radius:var(--radius);
  padding:var(--s4) var(--s5);
  text-align:center;
  background: linear-gradient(135deg, rgba(211,47,47,.04), transparent);
  border:1px solid rgba(211,47,47,.15);
  color:var(--text);
  overflow:hidden;
  transition:var(--t);
  cursor:pointer;
}
.ad:hover {
  background: rgba(211,47,47,.08);
  border-color: rgba(211,47,47,.3);
}
.ad::before {
  content: "TOOLS PLACEMENT";
  position: absolute;
  top: 0; left: 0;
  background: var(--red-600);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.2rem 0.6rem;
  border-bottom-right-radius: var(--radius-sm);
}
html[data-theme="dark"] .ad{
  background: linear-gradient(135deg, rgba(238,243,255,.04), transparent);
  border-color:rgba(238,243,255,.1);
}
html[data-theme="dark"] .ad:hover {
  background: rgba(238,243,255,.06);
}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:1rem}
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:1.6rem}
@media(max-width:980px){.hero{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;gap:.5rem;padding:var(--s5);border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(900px 400px at 10% 0%, rgba(211,47,47,.10), rgba(211,47,47,0) 58%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));box-shadow:var(--shadow);transition:var(--t)}
html[data-theme="dark"] .tool-card{background:radial-gradient(900px 400px at 10% 0%, rgba(211,47,47,.14), rgba(211,47,47,0) 58%),linear-gradient(180deg,rgba(16,22,34,.92),rgba(16,22,34,.72))}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.grid{display:grid;gap:1rem}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:980px){.grid-3{grid-template-columns:1fr 1fr}}@media(max-width:620px){.grid-3{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 340px;gap:1.6rem;align-items:start}@media(max-width:980px){.split{grid-template-columns:1fr}}
.sidebar{position:sticky;top:92px;display:flex;flex-direction:column;gap:1rem}@media(max-width:980px){.sidebar{position:static}}
.field{display:flex;flex-direction:column;gap:.4rem}label{font-weight:900;color:rgba(11,18,32,.72)}html[data-theme="dark"] label{color:rgba(238,243,255,.78)}
.input{width:100%;padding:.82rem .95rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(255,255,255,.78);color:var(--text);transition:var(--t)}
html[data-theme="dark"] .input{background:rgba(16,22,34,.78)}.input:focus{outline:none;box-shadow:var(--ring);border-color:rgba(211,47,47,.45)}
.result{border-radius:var(--radius);border:1px solid rgba(211,47,47,.22);background:radial-gradient(800px 260px at 20% 0%, rgba(211,47,47,.16), rgba(211,47,47,0) 60%),rgba(255,255,255,.65);padding:var(--s5)}
html[data-theme="dark"] .result{background:radial-gradient(800px 260px at 20% 0%, rgba(211,47,47,.20), rgba(211,47,47,0) 60%),rgba(16,22,34,.72)}
.toast{position:fixed;right:16px;bottom:92px;z-index:9999;display:none;background:rgba(11,18,32,.92);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.86rem 1.05rem;box-shadow:var(--shadow-lg);max-width:min(460px, calc(100vw - 32px))}
.toast .hint{opacity:.85;font-weight:800;margin-left:.5rem}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);display:none;z-index:9998;align-items:center;justify-content:center;padding:var(--s5)}
.modal{width:min(600px,100%);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--s6)}
.modal .actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0;color:var(--muted);font-weight:800}
/* ================================
   ToolNepal — SaaS Polish Layer
   (Drop-in Enhancement)
================================ */

/* ---------- Motion System ---------- */
@media (prefers-reduced-motion: no-preference) {
  .animate-fade {
    animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(10px) scale(.98); }
    to   { opacity:1; transform:none; }
  }
}

/* ---------- Glass Effect ---------- */
.glass {
  background: linear-gradient(
      180deg,
      rgba(255,255,255,.75),
      rgba(255,255,255,.55)
  );
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.35);
}
html[data-theme="dark"] .glass {
  background: linear-gradient(
      180deg,
      rgba(16,22,34,.75),
      rgba(16,22,34,.55)
  );
  border-color: rgba(255,255,255,.08);
}

/* ---------- Tool Cards (More Product-like) ---------- */
.tool-card {
  position: relative;
  overflow: hidden;
}
.tool-card::after {
  content:"";
  position:absolute;
  inset:auto -40% -60% -40%;
  height:120%;
  background: radial-gradient(
    60% 60% at 50% 100%,
    rgba(211,47,47,.18),
    transparent 70%
  );
  opacity:.0;
  transition: opacity var(--t);
}
.tool-card:hover::after { opacity:1; }

.tool-card h3 {
  font-size:1.15rem;
  letter-spacing:-.01em;
}
.tool-card p {
  font-size:.95rem;
  line-height:1.5;
}

/* ---------- Result Blocks (WOW factor) ---------- */
.result,
.card.result,
#ageOut,
#emiOut,
#p2Out {
  position:relative;
  overflow:hidden;
}
.result::before,
.card.result::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,.25),
      transparent 70%);
  opacity:.0;
}
.result:hover::before { opacity:.35 }

/* ---------- Inputs: Modern Feel ---------- */
.input {
  font-weight:700;
}
.input::placeholder {
  color: rgba(11,18,32,.45);
}
html[data-theme="dark"] .input::placeholder {
  color: rgba(238,243,255,.45);
}

/* ---------- Buttons: Subtle Glow ---------- */
.btn-primary {
  position:relative;
  overflow:hidden;
}
.btn-primary::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,.35),
      transparent 70%);
  opacity:0;
  transition:opacity var(--t);
}
.btn-primary:hover::after { opacity:.35 }

/* ---------- Tables (EMI, future reports) ---------- */
table {
  font-size:.92rem;
  background:var(--panel);
  border-radius:var(--radius);
  overflow:hidden;
}
thead th {
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--muted);
}
tbody tr:hover {
  background: rgba(211,47,47,.06);
}

/* ---------- Sidebar Cards ---------- */
.sidebar .card {
  background:
    radial-gradient(600px 200px at 20% 0%,
      rgba(211,47,47,.10),
      transparent 60%),
    var(--panel);
}

/* ---------- Skeleton Loader (Future Use) ---------- */
.skeleton {
  position:relative;
  overflow:hidden;
  background: rgba(17,24,39,.08);
  border-radius:12px;
}
.skeleton::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );
  animation: skeleton 1.4s infinite;
}
@keyframes skeleton {
  from { transform:translateX(-100%); }
  to   { transform:translateX(100%); }
}

/* ---------- Mobile Polish ---------- */
@media(max-width:620px){
  h1 { font-size:1.9rem; }
  .card { padding:1.25rem; }
  .btn { width:100%; justify-content:center; }
  .row { gap:.75rem; }
}

/* ---------- Footer Enhancement ---------- */
.site-footer {
  background:
    linear-gradient(180deg,
      transparent,
      rgba(211,47,47,.06)),
    var(--surface);
}