/* ===========================
   NLCB / NL Main Theme CSS
   =========================== */

/* Tokens */
:root {
  --nlcb-bg:#0C0D10;
  --nlcb-panel:#11131A;
  --nlcb-ink:#E9ECF2;
  --nlcb-ink-dim:#A7AEC1;
  --nlcb-brand:#7A3DF0;
  --nlcb-brand-2:#B084FF;
  --nlcb-accent:#22D3EE;
  --nlcb-line:#1C2030;

  --radius:14px;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;

  --fs-900:clamp(2.4rem,3vw+1rem,3.5rem);
  --fs-800:2rem;
  --fs-700:1.5rem;
  --fs-600:1.25rem;
  --fs-500:1rem;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--nlcb-bg);
  color:var(--nlcb-ink);
  line-height:1.6;
  font-size:var(--fs-500);
}
img{max-width:100%;display:block;border-radius:var(--radius)}
a{color:var(--nlcb-accent);text-decoration:none}
a:hover{text-decoration:underline}
ul{padding-left:1.25rem}

/* Typography */
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.2;font-weight:700}
h1{font-size:var(--fs-900);margin-bottom:var(--space-4)}
h2{font-size:var(--fs-800);margin-bottom:var(--space-3)}
h3{font-size:var(--fs-700);margin-bottom:var(--space-2)}
.lead{font-size:var(--fs-600);color:var(--nlcb-ink-dim);margin-bottom:var(--space-4)}

/* Layout */
.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:var(--space-6) 0}

/* Header */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  position:sticky;top:0;z-index:100;
  background:rgba(12,13,16,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--nlcb-line);
}
.logo{
  font-weight:700;font-size:1.2rem;letter-spacing:.5px;
  background:linear-gradient(90deg,var(--nlcb-brand),var(--nlcb-brand-2));
  -webkit-background-clip:text;color:transparent;
}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{color:var(--nlcb-ink-dim);font-weight:500}
.nav a:hover{color:var(--nlcb-ink)}
.nav .btn{margin-left:.5rem}
.icon-link svg{fill:currentColor}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1rem;border-radius:999px;
  font-weight:600;font-size:.95rem;
  border:1px solid var(--nlcb-line);transition:.2s all;
}
.btn--primary{
  background:linear-gradient(180deg,var(--nlcb-brand),#5F2AD6);
  color:#fff;border:none
}
.btn--ghost{background:transparent;color:var(--nlcb-ink)}
.btn:hover{transform:translateY(-1px)}

/* Hero */
.hero{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:var(--space-6);padding:var(--space-6) 0
}
.hero__copy{max-width:550px}
.hero__cta{display:flex;gap:1rem;margin:var(--space-4) 0}
.hero__media{text-align:center}
.hero__media img{max-width:420px;margin-inline:auto}

/* Cards */
.card{
  background:var(--nlcb-panel);
  border:1px solid var(--nlcb-line);
  border-radius:var(--radius);
  padding:var(--space-5);
}
.card h3{margin-top:0}
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Footer */
.site-footer{
  padding:var(--space-6) var(--space-4);
  background:rgba(12,13,16,.95);
  border-top:1px solid var(--nlcb-line)
}
.footer-grid{
  display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:flex-start;margin-bottom:var(--space-4)
}
.footer-grid nav{display:flex;flex-direction:column;gap:.5rem}
.footer-grid nav a{color:var(--nlcb-ink-dim)}
.footer-grid nav a:hover{color:var(--nlcb-ink)}
.tiny{text-align:center;font-size:.85rem;color:var(--nlcb-ink-dim)}

/* Blog (inherited by /blog/) */
.postlist{list-style:none;padding:0;display:grid;gap:var(--space-5)}
.postcard{
  padding:var(--space-4);
  border:1px solid var(--nlcb-line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02)
}
.postcard__title{margin:.35rem 0}
.postcard__excerpt{color:var(--nlcb-ink-dim);margin:0}
.postcard__meta{color:var(--nlcb-ink-dim);display:flex;gap:.5rem;align-items:center}
.postcard__cover img{border-radius:var(--radius);margin-bottom:.6rem}
.pagination{display:flex;gap:1rem;justify-content:center;align-items:center;padding:var(--space-6) 0}
.searchbar{margin-bottom:var(--space-5)}
.searchbar input{
  width:100%;padding:.7rem .9rem;border-radius:10px;
  border:1px solid var(--nlcb-line);
  background:#0B0C10;color:var(--nlcb-ink)
}
.tag{color:var(--nlcb-accent);text-decoration:none}

/* Utilities */
.badges{display:flex;gap:.5rem;margin-top:var(--space-3);flex-wrap:wrap}
.badges li{
  font-size:.85rem;color:var(--nlcb-ink-dim);
  border:1px solid var(--nlcb-line);
  border-radius:999px;padding:.3rem .6rem;list-style:none
}
.small{font-size:.9rem;color:var(--nlcb-ink-dim)}
.tiny{font-size:.8rem;color:var(--nlcb-ink-dim)}
.section-header { max-width: 800px; margin: 0 auto 2rem; }
.grid.three-cols { max-width: 1100px; margin: 0 auto; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Keep content comfortably centered on wide screens */
.section-header { max-width: 800px; margin: 0 auto 2rem; }
.grid.three-cols { max-width: 1100px; margin: 0 auto; }

/* Rock-solid button centering */
.cta-wrap {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
}
.cta-wrap .btn { text-align: center; min-width: 220px; }

.social-links{
  display:flex;
  gap:1rem;
  margin-top:1rem;
}
.social-links a img{
  width:28px;
  height:28px;
  transition:transform .2s ease, opacity .2s ease;
}
.social-links a:hover img{
  transform:translateY(-2px);
  opacity:.85;
}
/* Desktop socials inside top nav */
.header-socials{
  display:inline-flex;
  gap:.75rem;
  margin-left:.75rem;
  padding-left:.75rem;
  border-left:1px solid var(--nlcb-line);
}
.header-socials a img{
  width:22px; height:22px;
  transition:transform .15s ease, opacity .15s ease;
}
.header-socials a:hover img{ transform:translateY(-1px); opacity:.9 }

/* Mobile drawer socials */
.nav-mobile .mobile-socials{
  display:flex;
  gap:1rem;
  justify-content:center;
  padding:1rem 0 1.25rem;
  margin-top:.5rem;
  border-top:1px solid var(--nlcb-line);
}
.nav-mobile .mobile-socials a img{ width:26px; height:26px }

/* Shared socials */
.social-links{
  display:flex;
  gap:1rem;
  margin-top:1rem; /* good for footer */
}

/* Header override */
.header-socials{
  margin-top:0;     /* keeps icons aligned with nav */
  align-items:center;
}
.header-socials a img{
  width:22px;
  height:22px;
}



/* Optional: align logo/btn/hamburger nicely */
.header-wrap{
  display:flex; align-items:center; justify-content:space-between;
}
.hamburger{ margin-left:auto; }        /* keeps toggle aligned on small screens */
.nav-desktop{ display:flex; align-items:center; gap:1rem }

/* Blog images scale down on smaller screens */
.post-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 14px;
}

.home-blog .card h3{ margin-top:.25rem }
.home-blog .card p{ margin:.25rem 0 }
.home-blog .card .cta-wrap{ margin-top:auto }

/* Stack links on separate lines with a little space */
.cta-wrap--stack {
  display: flex;
  flex-direction: column;
  justify-content: center; /* keep buttons left-aligned */
  gap: 0.5rem;
}
.cta-wrap--stack a { display: block; }

/* TEAM */
.founder-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 700px) {
  .founder-card { grid-template-columns: 1fr; }
}

.founder-media .avatar-wrap {
  position: relative;
  width: 140px; height: 140px;
}

.founder-card .avatar,
.founder-card .pfp,
.persona-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 999px;
}

.founder-card .avatar {
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.founder-card .pfp {
  position: absolute; bottom: -6px; right: -6px;
  width: 52px; height: 52px; border: 3px solid var(--card-bg, #111);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.founder-name {
  margin: 0 0 .25rem 0;
  line-height: 1.2;
}
.founder-name .role {
  display: inline-block;
  margin-left: .5rem;
  font-size: .9rem;
  opacity: .85;
}

.bio { margin: 0 0 .75rem 0; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem 0; padding: 0; list-style: none; }
.chips li {
  padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem; opacity: .95;
}

.persona-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.persona-label { opacity: .7; font-size: .9rem; }
.persona { display: inline-flex; align-items: center; gap: .5rem; }
.persona-img { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.18); }

.links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.links .dot { opacity: .5; }

/* Layout */
.guide.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.guide-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 1rem;
}
@media (max-width: 960px) {
.guide-layout { grid-template-columns: 1fr; }
}

/* Boxes / Cards */
.box {
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.box + .box { margin-top: 1rem; }
.box__header { margin-bottom: .4rem; }
.box__title { margin: 0 0 .25rem 0; font-size: 1.25rem; line-height: 1.2; }

/* Sidebar */
.guide__sidebar {
position: sticky; top: 88px;
height: fit-content;
}
.toc ol { margin: .25rem 0 0 1.1rem; padding: 0; }
.toc li { margin: .35rem 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Header */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; opacity: .7; margin: 0; }
.lede { font-size: 1.05rem; opacity: .92; margin: .4rem 0 1rem; }

/* Callouts */
.callout {
border-left: 4px solid #4a72ff;
padding: .75rem 1rem;
border-radius: 10px;
background: rgba(74,114,255,.06);
}
.callout--tip { border-left-color: #19a974; background: rgba(25,169,116,.06); }

/* Lists / Glossary */
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0 0 .6rem 0; opacity: .9; }

/* Checklist */
.checklist ul { list-style: none; padding-left: 0; }
.checklist li { margin: .5rem 0; }
.checklist input { margin-right: .5rem; }
.fineprint { font-size: .85rem; opacity: .7; margin-top: .5rem; }
/* ---------- Wallet Safety Guide Theming ---------- */
/* Base tokens used by all themes (scoped to this guide only) */
.guide--wallet-safety {
  --bg: #0f0a1f;              /* page background */
  --bg2: #0a0814;             /* gradient end */
  --card: #15102b;            /* card background */
  --card-text: #edeaf6;       /* text inside cards */
  --border: rgba(255,255,255,.10);
  --muted: #bdb5d9;
  --link: #a9b7ff;
  --accent: #7c4dff;
  color: var(--card-text);
  background:
    radial-gradient(1200px 800px at 10% -20%, rgba(124,77,255,.20), transparent),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* Layout bits from earlier, but theme-aware now */
.guide--wallet-safety .guide-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 1rem;
}
@media (max-width: 960px){ .guide--wallet-safety .guide-layout { grid-template-columns: 1fr; } }
.guide--wallet-safety.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }

.guide--wallet-safety .box {
  background: var(--card);
  color: var(--card-text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.guide--wallet-safety .box + .box { margin-top: 1rem; }

.guide--wallet-safety .guide__sidebar { position: sticky; top: 88px; height: fit-content; }
.guide--wallet-safety .toc a { color: var(--link); text-decoration: none; }
.guide--wallet-safety .toc a:hover { text-decoration: underline; }

.guide--wallet-safety .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; opacity: .8; margin: 0; }
.guide--wallet-safety .lede { font-size: 1.05rem; opacity: .95; margin: .4rem 0 1rem; }

.guide--wallet-safety .callout {
  border-left: 4px solid var(--accent);
  padding: .75rem 1rem; border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.guide--wallet-safety .callout--tip {
  --accent: #19a974;
}

.guide--wallet-safety .glossary dt { font-weight: 600; }
.guide--wallet-safety .glossary dd { margin: 0 0 .6rem 0; opacity: .95; }

.guide--wallet-safety .checklist ul { list-style: none; padding-left: 0; }
.guide--wallet-safety .checklist li { margin: .5rem 0; }
.guide--wallet-safety .checklist input { margin-right: .5rem; }
.guide--wallet-safety .fineprint { font-size: .85rem; opacity: .75; margin-top: .5rem; }

.guide--wallet-safety .cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-top: .5rem; }
@media (max-width: 560px){ .guide--wallet-safety .cta-grid { grid-template-columns: 1fr; } }
.guide--wallet-safety .btn {
  display: inline-block; text-align: center; padding: .85rem 1rem;
  border-radius: 10px; border: 1px solid var(--border); text-decoration: none; color: var(--card-text);
}
.guide--wallet-safety .btn--ghost { background: transparent; }

/* Optional: force heading/body contrast even if global site uses white text */
.guide--wallet-safety h1, .guide--wallet-safety h2, .guide--wallet-safety h3,
.guide--wallet-safety p, .guide--wallet-safety li, .guide--wallet-safety dd, .guide--wallet-safety dt {
  color: var(--card-text);
}

/* ---------- Theme Variants (pick one on the <section>) ---------- */

/* 1) Dark Purple — brandy, rich, high-contrast */
.theme-safety-indigo.guide--wallet-safety{
  --bg:#0f0a1f; --bg2:#0a0814;
  --card:#181233; --card-text:#f0ecff;
  --border:rgba(160,140,255,.18);
  --muted:#c9c2e6; --link:#b6c4ff; --accent:#7c4dff;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(182,141,255,.18), transparent),
    radial-gradient(900px 600px at -10% 120%, rgba(44,173,255,.10), transparent),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* 2) Dark Slate — neutral, works with any brand accent */
.theme-safety-slate.guide--wallet-safety{
  --bg:#0c1118; --bg2:#0a0f15;
  --card:#161b22; --card-text:#e8eef8;
  --border:rgba(200,215,235,.14);
  --muted:#b9c7d8; --link:#a8c5ff; --accent:#4aa3ff;
  background:
    radial-gradient(900px 600px at 15% -20%, rgba(74,163,255,.10), transparent),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* 3) Soft Light — off-white with gentle lavender tint */
.theme-safety-soft.guide--wallet-safety{
  --bg:#f7f6fb; --bg2:#f2f1f8;
  --card:#ffffff; --card-text:#1a1625;
  --border:rgba(0,0,0,.10);
  --muted:#564f6b; --link:#4a60ff; --accent:#7c4dff;
  color: var(--card-text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* Optional modifier: light cards on dark themes */
.cards-light.guide--wallet-safety{
  --card:#ffffff;
  --card-text:#17171b;
  --border:rgba(0,0,0,.12);
}
.safetyBox {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: #000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
/* Make callouts readable on light cards */
.cards-light.guide--wallet-safety .callout {
  background: color-mix(in oklab, var(--accent) 10%, #fff);
}
.membership-contracts .addr-row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.membership-contracts code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95rem; padding:.45rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:var(--card); color:var(--card-text);
  word-break: break-all;
}
.membership-contracts .btn-copy{ white-space:nowrap; }
.membership-contracts .fine-list{ margin:.6rem 0 0 1.1rem; opacity:.9; }
.membership-contracts .fine-list li{ margin:.2rem 0; }

/* --- First Transaction Guide (namespaced) --- */
.guide-first-tx__hero { margin-bottom: 1rem; }
.guide-first-tx .lead { max-width: 68ch; }

.guide-first-tx__cta{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border: 4px solid var(--brand, #143C78);
  background: var(--bg-soft, #435776);
  padding: 1rem 1.25rem; border-radius: 14px; margin: .5rem 0 1.25rem;
}
.guide-first-tx__cta-eyebrow{ font-weight: 700; color: var(--brand, #e2ecfb); margin-bottom:.25rem; }

.guide-first-tx__grid{
  display:grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: .5rem;
}
@media (min-width: 900px){
  .guide-first-tx__grid{ grid-template-columns: 1fr 1fr; }
}

.guide-first-tx__card{
  background: #000;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 24px rgba(20,60,120,.06);
}

.guide-first-tx .steps { padding-left: 1.25rem; }
.guide-first-tx .steps li { margin: .55rem 0; }
.guide-first-tx .list { padding-left: 1.1rem; }
.guide-first-tx .sep { border:0; height:4px; background: var(--rule, #E6EEF9); margin: .75rem 0; }

.guide-first-tx__callout{
  margin-top: .85rem;
  border-left: 6px solid var(--brand, #143C78);
  background: #e56d6d;
  padding: .75rem .9rem;
  border-radius: 10px;
}

.guide-first-tx__footer{ margin-top: 1.25rem; }
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.breadcrumbs li+li::before{content:"/";opacity:.5;margin:0 .25rem}
.breadcrumbs a{text-decoration:none}


/* Buttons */
.cta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: .75rem;
margin-top: .5rem;
}
@media (max-width: 560px) {
.cta-grid { grid-template-columns: 1fr; }
}
.btn {
display: inline-block;
text-align: center;
padding: .85rem 1rem;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.1);
text-decoration: none;
}
.btn--ghost { background: transparent; }

/* Details */
details.pro { margin-top: .6rem; }
details.pro > summary { cursor: pointer; font-weight: 600; }
 

/* Optional: cap very wide images on large screens */
@media (min-width: 1100px){
  .post-body img{
    max-width: 960px; /* or 840px */
  }
}


@media (max-width: 900px){
  .nav-desktop{ display:none }          /* your script opens .nav-mobile */
}


/* A11y helper */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Keep desktop as-is */
.nav-desktop { display:flex; gap:1rem; align-items:center; }
.nav-menu { display:none; }           /* hide the mobile toggler on desktop */

/* Mobile menu styles */
@media (max-width:900px){
  .nav-desktop { display:none; }      /* hide desktop nav on mobile */
  .nav-menu { display:block; }        /* show the toggler on mobile */

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    height:38px; padding:0 .9rem; border:1px solid var(--nlcb-line);
    border-radius:10px; background:transparent; color:var(--nlcb-ink);
    list-style:none; cursor:pointer;
  }
  .nav-toggle::-webkit-details-marker{ display:none; } /* remove default marker */

  .nav-toggle .bars{ display:inline-flex; flex-direction:column; gap:4px; margin-left:6px; }
  .nav-toggle .bars i{ display:block; width:18px; height:2px; background:var(--nlcb-ink); }

  /* The dropdown panel sits in normal flow, not full-width overlay */
  .nav-menu[open] .nav{
    margin-top:.75rem;
    background:rgba(12,13,16,.98);
    border:1px solid var(--nlcb-line);
    border-radius:12px;
    padding:.65rem;
  }

  .nav { display:flex; flex-direction:column; gap:.25rem; }
  .nav a { padding:.6rem .6rem; border-radius:8px; color:var(--nlcb-ink-dim); }
  .nav a:hover { background:var(--nlcb-panel); color:var(--nlcb-ink); }
  .nav .btn { width:100%; justify-content:center; margin-top:.25rem; }

  /* Stack hero and tighten spacing on mobile (unchanged desktop) */
  .hero { grid-template-columns:1fr; text-align:center; }
  .hero__cta { justify-content:center; flex-wrap:wrap; }
  .card { padding: var(--space-4); }
  .section { padding: var(--space-5) 0; }
  .footer-grid { grid-template-columns: 1fr; }
}
/* Hide default summary markers in all browsers */
.nav-toggle::-webkit-details-marker{ display:none; }
.nav-toggle::marker{ content: ""; }

/* Hamburger icon */
.nav-toggle .bars{ display:inline-flex; flex-direction:column; gap:4px; }
.nav-toggle .bars i{ display:block; width:18px; height:2px; background:var(--nlcb-ink); }

@media (max-width:900px){
  .nav-desktop { display:none; }
  .nav-menu { display:block; }

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    height:38px; padding:0 .9rem; border:1px solid var(--nlcb-line);
    border-radius:10px; background:transparent; color:var(--nlcb-ink);
    cursor:pointer;
  }

  .nav-menu[open] .nav{
    margin-top:.75rem;
    background:rgba(12,13,16,.98);
    border:1px solid var(--nlcb-line);
    border-radius:12px;
    padding:.65rem;
  }
  .nav { display:flex; flex-direction:column; gap:.25rem; }
  .nav a { padding:.6rem .6rem; border-radius:8px; color:var(--nlcb-ink-dim); }
  .nav a:hover { background:var(--nlcb-panel); color:var(--nlcb-ink); }
  .nav .btn { width:100%; justify-content:center; margin-top:.25rem; }

  /* Stack hero etc. (you already have these; keep as-is) */
}
/* Prevent sideways scroll on mobile */
html, body { overflow-x: hidden; }

/* Hamburger */
.hamburger{ display:none; width:42px; height:23px; border:1px solid var(--nlcb-line);
  border-radius:10px; background:transparent; cursor:pointer; }
.hamburger span{ display:block; width:20px; height:2px; background:var(--nlcb-ink); margin:5px auto; transition:.2s; }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile{ display:none; flex-direction:column; gap:.25rem; padding:.65rem 1rem 1rem;
  background:rgba(12,13,16,.98); border-bottom:1px solid var(--nlcb-line); }
.nav-mobile a{ padding:.6rem .4rem; border-radius:8px; color:var(--nlcb-ink-dim); }
.nav-mobile a:hover{ background:var(--nlcb-panel); color:var(--nlcb-ink); }
.nav-mobile .btn{ width:100%; justify-content:center; margin-top:.25rem; }
.nav-mobile.open{ display:flex; }

/* Mobile breakpoint: hide desktop nav, show hamburger, tighten layout */
@media (max-width:900px){
  .nav-desktop{ display:none; }
  .hamburger{ display:inline-block; }
  .header-wrap{ gap:.75rem; }
  .hero{ grid-template-columns:1fr; text-align:center; padding: var(--space-5) 0; }
  .hero__cta{ justify-content:center; flex-wrap:wrap; }
  .card{ padding: var(--space-4); }
  .section{ padding: var(--space-5) 0; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* Make the orb behave on phones and small tablets */
@media (max-width:900px){
  .hero__media img{
    width: min(68vw, 360px);
    max-height: 38vh;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
  }
}
/* Also cap the orb on mid-size laptops if needed */
@media (min-width:901px) and (max-width:1200px){
  .hero__media img{ max-width: 380px; height:auto; }
}

/* Center card content on smaller screens */
@media (max-width: 700px){
  .card-grid .card{
    text-align:center;
  }
  .card-grid .card img{
    margin-inline:auto;
  }
  .card-grid .card .hero__cta{
    justify-content:center;
  }
}