/* Navi Works shared shell for every non-home page: dark tokens, the same nav, and the fixed liquid background.
   Load AFTER the page's own <style>. The home page has its own (richer) version of all of this. */
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500..900&family=Urbanist:wght@500..800&family=Source+Serif+4:wght@400..700&family=Share+Tech+Mono&display=swap");
:root{
  --navy:#060b14; --navy2:#0a111c; --teal:#0e9c89; --teal-dim:#3fc9b4;
  --gold:#d9a04a; --ink:#eef3fb; --muted:#9aa8c2; --card:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.13);
  --f-title:"Red Hat Display",system-ui,sans-serif; --f-sub:"Urbanist",system-ui,sans-serif; --f-body:"Source Serif 4",Georgia,serif;
  color-scheme:dark;
}
html{background:#060b14}
body{background:transparent!important;color:var(--ink);font-family:var(--f-body)}
h1,h2{font-family:var(--f-title)!important;letter-spacing:-.02em}
h3,h4,.btn,button{font-family:var(--f-sub)}
p,li,h2,h3,td,th,blockquote{text-shadow:0 0 4px rgba(0,0,0,.75)}

/* ---- liquid background (fixed, behind everything) ---- */
.bg-fixed{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#060b14}
.bg-fixed #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-fixed .hero-fallback{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,#2a1d0a,transparent 70%),radial-gradient(70% 60% at 20% 80%,#0b3a36,transparent 70%),#060b14}
.bg-fixed .hero-grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(3,6,12,.55) 100%)}

/* ---- header menu: identical to the home page's (dark glass, Urbanist links, gold pill) ---- */
#nav,#nw-nav{position:sticky!important;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;
  background:rgba(6,11,20,.66)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)!important;color:#fff}
.brand,.nw-brand{font-family:var(--f-title)!important;font-weight:800;font-size:20px;letter-spacing:-.03em;color:#fff!important}
.brand b,.nw-brand b{color:var(--teal)!important}
.nav-links,.nw-links{display:flex;gap:26px;font-family:var(--f-sub)!important;font-weight:700;font-size:14px;letter-spacing:.01em;color:rgba(236,243,255,.78)}
.nav-links a,.nw-links a{color:rgba(236,243,255,.78)!important}
.nav-links a:hover,.nw-links a:hover{color:#4fe0cb!important}
.nav-cta,.nw-cta{font-family:var(--f-sub)!important;font-weight:700;font-size:13px;padding:10px 18px;border-radius:999px;background:var(--gold)!important;color:#2a1c00!important;white-space:nowrap;flex-shrink:0;text-shadow:none}
@media(max-width:960px){.nav-links,.nw-links{display:none}}
@media(max-width:720px){#nav,#nw-nav{padding:12px 16px}.brand,.nw-brand{font-size:17px}.nav-cta,.nw-cta{font-size:12px;padding:12px 15px}}

/* ---- footer ---- */
#nw-foot,footer{color:var(--muted);border-top:1px solid var(--line)!important;background:transparent!important}
.nw-foot-links,.foot-links{font-family:var(--f-sub)!important}
.nw-foot-links a,.foot-links a{color:var(--ink)!important}
.nw-foot-links a:hover,.foot-links a:hover{color:#4fe0cb!important}

/* ---- common content bits that hard-code light colours ---- */
.btn-primary{background:linear-gradient(135deg,var(--teal),#22c3a6)!important;color:#000!important;box-shadow:0 10px 30px rgba(14,156,137,.4);text-shadow:none}
.btn-ghost{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.btn-ghost:hover{border-color:#4fe0cb!important;color:#4fe0cb!important}
h1 em{background:linear-gradient(110deg,#fff 8%,#ffe3a6 50%,#4fe0cb 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none}

/* ---- per-page elements that name the old fonts directly (Syne / IBM Plex) ---- */
.path a,.btn,.ex-links,.soon .s-h,.ex-thumb::after,.card-body h3{font-family:var(--f-sub)!important}
.hero h1,.stat b{font-family:var(--f-title)!important}

/* ---- gradient headlines: start white (not navy) so they read on the dark background, same as the hero ---- */
header.intro h1,.hero h1,.hero h1 .glow,.blog-hero h1,h1 em{background:linear-gradient(105deg,#fff 10%,#ffe3a6 50%,#4fe0cb 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.hero h1 .glow{background:none!important;-webkit-text-fill-color:inherit!important}   /* the inner span inherits the parent's gradient fill */
header.intro,.hero,.blog-hero{background:none!important}

/* ---- Apps page uses its own token names: map them onto the dark set ---- */
:root{--bg:#060b14;--surface:rgba(255,255,255,.045);--border:rgba(255,255,255,.13);--text:var(--ink);--dim:#7f8da8;--head:var(--f-sub);--sans:var(--f-body);--blue:#4fe0cb;--purple:#d9a04a}

/* ---- Examples page ---- */
.ex-card{background:rgba(255,255,255,.04)!important}
.ex-card:hover{box-shadow:0 22px 50px rgba(0,0,0,.45)!important}
.closer{background:none!important}

/* ---- Examples: accents are teal; the per-card colour stays on the type ---- */
.ex-card{border-top:3px solid var(--teal)!important}
.ex-thumb::after{background:var(--teal)!important;color:#000!important}
/* ---- About: logo at the top ---- */
.about-logo{display:block;margin:0 auto 18px;width:min(260px,62%);height:auto;filter:drop-shadow(0 12px 40px rgba(14,156,137,.25))}