/* NexVision blog skin — extends the landing's design language.
   Shared by every post in site/blog/. Self-contained, no build. */
:root{
  --ink:#1B1B24; --ink-2:#23232F; --ink-3:#2B2B38;
  --line:rgba(244,241,232,.09); --line-2:rgba(244,241,232,.15);
  --mint:#5FE9A3; --cyan:#7FD8F7; --cream:#F4F1E8; --muted:#9A9AAD;
  --prose:#cfccc2; --nav-bg:rgba(24,24,32,.72);
  --display:'Outfit',sans-serif; --body:'Manrope',sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,.68,.28,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#FBFAF6; --ink-2:#FFFFFF; --ink-3:#F2F0E9;
  --line:rgba(28,28,40,.10); --line-2:rgba(28,28,40,.16);
  --mint:#0FA968; --cyan:#1E90C4; --cream:#20202B; --muted:#63636F;
  --prose:#3a3a45; --nav-bg:rgba(255,255,255,.80);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:var(--mint);color:var(--ink)}
a{color:var(--cyan)}
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}

/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.3)}
.nav-in{max-width:1100px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem);height:66px;
  display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--cream)}
.logo svg{width:30px;height:30px}
.logo b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.logo b small{display:block;font-size:.66rem;font-weight:400;color:var(--muted)}
.nav-cta{font-family:var(--body);font-weight:600;font-size:.85rem;text-decoration:none;
  background:linear-gradient(100deg,var(--mint),var(--cyan));color:var(--ink);
  padding:.6rem 1.2rem;border-radius:999px;transition:.3s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(95,233,163,.5)}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.theme{background:transparent;border:1px solid var(--line-2);color:var(--muted);cursor:pointer;
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;transition:.25s var(--ease);flex:none}
.theme:hover{border-color:var(--mint);color:var(--cream)}
.theme svg{width:15px;height:15px}
.theme .ic-moon{display:none}
:root[data-theme="light"] .theme .ic-sun{display:none}
:root[data-theme="light"] .theme .ic-moon{display:block}

/* article */
article{padding:clamp(2.5rem,6vw,4.5rem) 0 4rem}
.back{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  text-decoration:none;display:inline-flex;gap:.4rem;margin-bottom:1.6rem}
.back:hover{color:var(--mint)}
.pill{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mint);border:1px solid rgba(95,233,163,.3);border-radius:999px;padding:.32rem .75rem;display:inline-block}
h1{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(2rem,5vw,3rem);margin:1rem 0 .8rem}
.byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin-bottom:2rem}
article h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3vw,1.85rem);margin:2.6rem 0 1rem;line-height:1.15}
article h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:1.8rem 0 .5rem}
article p{color:var(--prose);margin-bottom:1.15rem}
article ul{margin:0 0 1.15rem 1.2rem;color:var(--prose)}
body{transition:background .4s var(--ease),color .4s var(--ease)}
article li{margin-bottom:.5rem}
article strong{color:var(--cream)}

.nv-tldr{border:1px solid rgba(95,233,163,.32);background:rgba(95,233,163,.06);
  border-radius:16px;padding:1.3rem 1.5rem;margin:0 0 2.2rem;color:var(--cream);font-size:1rem}
.nv-tldr strong{color:var(--mint);font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}

.nv-pullquote{border-left:2px solid var(--mint);margin:2.2rem 0;padding:.4rem 0 .4rem 1.4rem;
  font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:500;
  line-height:1.3;color:var(--cream);letter-spacing:-.01em}

.nv-prices{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.92rem}
.nv-prices th,.nv-prices td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
.nv-prices th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.nv-prices td b{color:var(--mint);font-family:var(--display)}
.nv-tbl-wrap{overflow-x:auto}

.nv-cta{border:1px solid var(--line-2);border-radius:20px;background:var(--ink-2);
  padding:2rem;margin-top:3rem;text-align:center}
.nv-cta h3{font-family:var(--display);font-size:1.4rem;margin-bottom:.6rem}
.nv-cta p{margin-bottom:1.2rem}
.nv-cta .call{font-family:var(--body);font-weight:600;text-decoration:none;
  background:linear-gradient(100deg,var(--mint),var(--cyan));color:var(--ink);
  padding:.85rem 1.7rem;border-radius:999px;display:inline-block;transition:.3s var(--ease)}
.nv-cta .call:hover{transform:translateY(-2px);box-shadow:0 12px 34px -8px rgba(95,233,163,.55)}

footer{border-top:1px solid var(--line);padding:2.5rem 0}
footer .wrap{max-width:1100px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer p,footer a{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-decoration:none}
footer a:hover{color:var(--mint)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
