/*
 * The public site's shared sheet: landing, pricing, contact, city pages, the
 * Nepali tools and the API manual. The portal's own look lives inline in
 * templates/base.html; the two share their tokens so a visitor who signs up
 * crosses into the product without the design changing under them.
 *
 * Utility bento: a bright off-white page, stark white tiles defined by a 1px
 * hairline rather than a shadow, charcoal ink, and one accent in the logo's blue kept for
 * what should catch the eye — the primary action, the active link, a result.
 * Figures, counters and code are set in mono.
 *
 * The legacy names (--accent, --ink, --muted, --bg, .btn-grad, .btn-ghost)
 * are kept deliberately: page-level styles written against them pick up the
 * new palette without being rewritten line by line.
 */
:root{
  --accent:#14457a;          /* logo blue — actions, active state, success figures */
  --accent-ink:#14457a;      /* 9.6:1 on white, so text uses the accent as is */
  --accent-hover:#12365c;
  --accent-soft:#eef3f9;
  --accent-ring:rgba(20,69,122,.22);
  --accent2:#14457a;
  --ink:#111827; --ink-2:#374151; --muted:#6b7280; --faint:#9ca3af;
  --bg:#f8f9fa; --surface:#fff; --well:#f3f4f6;
  --line:#e5e7eb; --line-strong:#d1d5db;
  --night:#12365c;          /* the logo's deep navy — brand strips and dark panels */
  --on-night:rgba(255,255,255,.74);  /* body text on navy */ --night-2:#0f172a;
  --radius:12px; --radius-sm:8px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bs-body-font-family:var(--sans);
  --bs-font-monospace:var(--mono);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-code-color:var(--accent-ink);
}

body{ font-family:var(--sans); color:var(--ink); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--display); letter-spacing:-.025em; color:var(--ink); }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ color:var(--ink); }
::selection{ background:var(--accent-ring); }
code,pre,kbd,samp,.font-monospace,.mono,.num{ font-family:var(--mono); }
.mono,.num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.container{ max-width:1180px; }
.text-primary{ color:var(--accent-ink) !important; }
.bg-primary,.text-bg-primary{ background-color:var(--accent) !important; color:#fff !important; }
.text-muted{ color:var(--muted) !important; }

/* ---- Buttons ---------------------------------------------------------- */
.btn{ border-radius:var(--radius-sm); font-weight:600; letter-spacing:-.005em;
  transition:background-color .12s, border-color .12s, color .12s; }
.btn:focus-visible{ box-shadow:0 0 0 .2rem var(--accent-ring) !important; }
.btn-grad,.btn-primary,.btn-kx{ background:var(--accent); border:1px solid var(--accent); color:#fff; box-shadow:none; }
.btn-grad:hover,.btn-grad:focus-visible,.btn-primary:hover,.btn-primary:active,.btn-kx:hover{
  background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; filter:none; }
.btn-ghost{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); font-weight:600; }
.btn-ghost:hover{ background:var(--well); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost.border{ border-color:var(--line-strong) !important; }
.btn-dark,.btn-white{ background:var(--ink); border:1px solid var(--ink); color:#fff; font-weight:600; }
.btn-dark:hover,.btn-white:hover{ background:#000; border-color:#000; color:#fff; }
.btn-outline-secondary,.btn-light{ --bs-btn-color:var(--ink); --bs-btn-border-color:var(--line-strong);
  --bs-btn-bg:var(--surface); --bs-btn-hover-bg:var(--well); --bs-btn-hover-color:var(--ink);
  --bs-btn-hover-border-color:var(--line-strong); --bs-btn-active-bg:var(--well); --bs-btn-active-color:var(--ink); }
.btn-outline-primary{ --bs-btn-color:var(--accent-ink); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--accent-hover); --bs-btn-active-border-color:var(--accent-hover); }

/* ---- Forms ------------------------------------------------------------ */
.form-control,.form-select{ border-radius:var(--radius-sm); border-color:var(--line-strong); }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem var(--accent-ring); }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
.form-check-input:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem var(--accent-ring); }
.form-label{ font-weight:600; font-size:.84rem; color:var(--ink-2); }

/* ---- Announcement strip ---------------------------------------------- */
.promo{ background:var(--night); color:var(--on-night); font-size:.86rem; }
.promo a{ color:#fff; font-weight:600; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#93c5fd; }
.promo a:hover{ color:#fff; text-decoration-color:#fff; }
.promo .amt{ color:#fff; font-family:var(--mono); font-weight:600; }
.promo i{ color:#93c5fd; }

/* ---- Top navigation --------------------------------------------------- */
.nav-wrap{ position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line); }
.nav-wrap .container{ min-height:60px; }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand img{ height:30px; width:auto; display:block; }
.brand.sm img{ height:24px; }
.kp-links{ gap:.15rem; }
.kp-link{ display:inline-flex; align-items:center; gap:.25rem; padding:.45rem .65rem; border-radius:6px;
  color:var(--muted); font-size:.875rem; font-weight:500; background:transparent; border:0; position:relative; }
.kp-link:hover,.kp-link[aria-expanded="true"]{ color:var(--ink); background:var(--well); }
.kp-link.active{ color:var(--ink); font-weight:600; }
.kp-link.active::after{ content:""; position:absolute; left:.65rem; right:.65rem; bottom:-11px; height:2px; background:var(--accent); }
.kp-link.dropdown-toggle::after{ border-top-width:.28em; border-right-width:.28em; border-left-width:.28em; opacity:.6; }
.kp-link.dropdown-toggle.active::after{ position:static; height:auto; background:none; }
.kp-actions .btn{ font-size:.875rem; padding:.42rem .9rem; }
.kp-burger{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-size:1.35rem; }
.kp-burger:hover{ background:var(--well); }

.dropdown-menu{ border:1px solid var(--line); border-radius:10px; padding:.35rem;
  box-shadow:0 12px 32px -12px rgba(17,24,39,.2); font-size:.875rem; }
.dropdown-item{ border-radius:6px; padding:.5rem .65rem; color:var(--ink); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--well); color:var(--ink); }
.dropdown-item.active,.dropdown-item:active{ background:var(--accent-soft); color:var(--accent-ink); }
.kp-menu-item{ display:flex; align-items:flex-start; gap:.7rem; }
.kp-menu-item .t{ display:block; font-weight:600; }
.kp-menu-item .d{ display:block; font-size:.75rem; color:var(--muted); }
.kp-menu-item .k{ font-family:var(--mono); font-size:.7rem; color:var(--muted); border:1px solid var(--line);
  border-radius:4px; padding:.05rem .3rem; margin-top:.1rem; min-width:2.1rem; text-align:center; }

/* Mobile drawer */
.kp-drawer{ max-width:320px; border-left:1px solid var(--line) !important; }
.kp-drawer .offcanvas-header{ border-bottom:1px solid var(--line); min-height:60px; }
.kp-drawer-sect{ font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.kp-drawer-link{ display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:var(--radius-sm);
  color:var(--ink); font-weight:500; font-size:.92rem; border-left:2px solid transparent; }
.kp-drawer-link:hover{ background:var(--well); color:var(--ink); }
.kp-drawer-link.active{ border-left-color:var(--accent); background:var(--bg); font-weight:600; }
.kp-drawer-link small{ display:block; font-size:.74rem; color:var(--muted); font-weight:400; }
.kp-drawer-link i{ color:var(--muted); font-size:1.05rem; }

/* ---- Page furniture --------------------------------------------------- */
section{ padding:5rem 0; }
.sect-alt{ background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow{ font-family:var(--mono); color:var(--accent-ink); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; font-size:.74rem; }
h2.sec{ font-weight:800; font-size:clamp(1.65rem,3vw,2.4rem); letter-spacing:-.035em; line-height:1.12; }
.sec-lead{ color:var(--muted); font-size:1.02rem; max-width:40rem; }
.crumbs{ border-bottom:1px solid var(--line); background:var(--surface); font-size:.8rem; padding:.6rem 0;
  font-family:var(--mono); color:var(--muted); }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ margin:0 .5rem; color:var(--line-strong); }

/* Hero: an engineering-paper grid under the fold, nothing more. */
.hero{ position:relative; padding:4.5rem 0 4rem; background-color:var(--bg);
  background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:22px 22px;
  border-bottom:1px solid var(--line); }
.hero h1{ font-weight:800; font-size:clamp(2.2rem,4.8vw,3.6rem); letter-spacing:-.045em; line-height:1.03; }
.hero h1 .ac{ color:var(--accent); background:none; -webkit-text-fill-color:currentColor; }
.hero p.lead,.hero .lead{ color:var(--muted); font-size:1.1rem; max-width:33rem; }
.pill{ display:inline-flex; align-items:center; gap:.45rem; background:var(--surface); border:1px solid var(--line);
  color:var(--ink-2); font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.02em;
  padding:.32rem .65rem; border-radius:6px; box-shadow:none; }
.pill i{ color:var(--accent); }
.pill.offer{ background:var(--accent-soft); border-color:#c7d6e8; color:var(--accent-ink); }
.trust{ color:var(--muted); font-size:.84rem; }
.trust i{ color:var(--accent) !important; }
.trust .net{ font-weight:600; color:var(--ink); }

/* ---- Bento ------------------------------------------------------------ */
.bento{ display:grid; gap:12px; grid-template-columns:repeat(6,minmax(0,1fr)); }
.tile{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; display:flex; flex-direction:column; min-width:0; transition:border-color .15s; }
a.tile{ color:var(--ink); } a.tile:hover{ border-color:var(--line-strong); color:var(--ink); }
.tile.s2{ grid-column:span 2; } .tile.s3{ grid-column:span 3; } .tile.s4{ grid-column:span 4; } .tile.s6{ grid-column:span 6; }
.tile.dark{ background:var(--night); border-color:var(--night); color:#e5e7eb; }
.tile.dark h3,.tile.dark .tile-title{ color:#fff; }
.tile.dark p{ color:var(--on-night); }
.tile h3,.tile-title{ font-size:1.04rem; font-weight:700; margin:0 0 .35rem; letter-spacing:-.02em; }
.tile p{ color:var(--muted); font-size:.9rem; margin:0; }
.tile-label{ font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tile-viz{ margin-top:auto; padding-top:1.2rem; }
@media (max-width:991.98px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile.s2,.tile.s3{ grid-column:span 1; } .tile.s4,.tile.s6{ grid-column:span 2; }
}
@media (max-width:575.98px){
  .bento{ grid-template-columns:minmax(0,1fr); }
  .tile.s2,.tile.s3,.tile.s4,.tile.s6{ grid-column:auto; }
}

/* Legacy feature card, flattened. */
.feat{ height:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
  transition:border-color .15s; }
.feat:hover{ border-color:var(--line-strong); transform:none; box-shadow:none; }
.feat h3{ font-size:1.04rem; font-weight:700; }
.feat p{ color:var(--muted); font-size:.9rem; margin:0; }
.feat .ico,.ico-sq{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:1.15rem;
  margin-bottom:.9rem; background:var(--bg); border:1px solid var(--line); color:var(--ink); }
.i-blue,.i-green,.i-violet,.i-amber,.i-pink,.i-teal{ background:var(--bg); color:var(--ink); }

/* Stat figures */
.stat .n,.band .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:2.1rem;
  letter-spacing:-.04em; line-height:1.05; color:var(--ink); }
.stat .l,.band .lab{ color:var(--muted); font-size:.82rem; margin-top:.3rem; }
.band{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0; overflow:hidden; color:var(--ink); }
.band .num.ac{ color:var(--accent); background:none; -webkit-text-fill-color:currentColor; }

.step-num{ width:auto; height:auto; border-radius:0; background:none; color:var(--accent-ink); font-family:var(--mono);
  font-weight:600; font-size:.8rem; display:inline-block; }

/* Terminal — request samples, responses, code hooks. */
.term{ background:var(--night-2); color:#e5e7eb; border-radius:10px; border:1px solid #1f2937; overflow:hidden; }
.term-bar{ display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; border-bottom:1px solid #1f2937;
  font-family:var(--mono); font-size:.7rem; color:#94a3b8; }
.term-bar .dots{ display:flex; gap:5px; margin-right:.4rem; }
.term-bar .dots i{ width:8px; height:8px; border-radius:50%; background:#334155; display:block; }
.term-bar .tag{ margin-left:auto; color:#93c5fd; }
.term pre{ margin:0; padding:1rem 1.1rem; font-family:var(--mono); font-size:.78rem; line-height:1.7; color:#e5e7eb;
  overflow-x:auto; white-space:pre; background:transparent; }
.term .c{ color:#64748b; } .term .s{ color:#93c5fd; } .term .k{ color:#cbd5e1; } .term .f{ color:#94a3b8; }
.term .p{ color:#fff; font-weight:600; } .term .ok{ color:#86efac; } .term .n{ color:#7dd3fc; }

/* Call to action */
.cta{ background:var(--night); border-radius:16px; padding:3.25rem 2rem; color:var(--on-night); text-align:center; box-shadow:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:22px 22px; }
.cta h2{ color:#fff; font-weight:800; letter-spacing:-.03em; }
.cta p{ color:var(--on-night); }
/* The accent is the navy's own family, so on the panel the primary action
   inverts to white rather than disappearing into it. */
.cta .btn-white,.cta .btn-grad{ background:#fff; border-color:#fff; color:var(--night); }
.cta .btn-white:hover,.cta .btn-grad:hover{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--night); }

/* Tables and accordions on content pages */
.table{ --bs-table-bg:transparent; font-size:.9rem; }
.table thead th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; }
.accordion{ --bs-accordion-border-color:var(--line); --bs-accordion-border-radius:var(--radius);
  --bs-accordion-inner-border-radius:calc(var(--radius) - 1px); --bs-accordion-active-bg:var(--bg);
  --bs-accordion-active-color:var(--ink); --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem var(--accent-ring); }
.accordion-button{ font-weight:600; }
.badge{ border-radius:6px; font-weight:600; }

/* ---- Footer ----------------------------------------------------------- */
.kp-foot{ border-top:1px solid var(--line); background:var(--bg); color:var(--muted); font-size:.86rem; padding:3rem 0 2rem; }
.kp-foot h4{ font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.kp-foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.kp-foot a{ color:var(--ink-2); } .kp-foot a:hover{ color:var(--accent-ink); }
.kp-foot .blurb{ max-width:22rem; margin:.9rem 0 0; }
.kp-foot .legal{ border-top:1px solid var(--line); margin-top:2.25rem; padding-top:1.2rem; font-size:.78rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; }
.kp-foot .legal .mono{ color:var(--faint); }

@media (max-width:767.98px){
  section{ padding:3.5rem 0; }
  .hero{ padding:3rem 0 2.75rem; }
  .cta{ padding:2.5rem 1.25rem; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }