/* nodeweaver.online — hand-written stylesheet. No framework, no build step.
   Tokens, type and layout follow DESIGN.md (extracted from the live site). */

:root{
  --nw-bg:#0a0a0a;
  --nw-surface:#141414;
  --nw-border:#2a2a2a;
  --nw-border-hover:#3a3a3a;
  --nw-text-primary:#e5e5e5;
  --nw-text-secondary:#888888;
  --nw-text-muted:#555555;
  --nw-accent:#ffffff;
  --nw-success:#22c55e;
  --nw-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:var(--nw-border) var(--nw-bg);
}
body{
  margin:0;
  min-height:100vh;
  background:var(--nw-bg);
  color:var(--nw-text-primary);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(255,255,255,.15);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--nw-bg)}
::-webkit-scrollbar-thumb{background:var(--nw-border)}

h1,h2,h3,p,ul,figure{margin:0}
h1,h2,h3{font-size:inherit;font-weight:inherit}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
svg{display:block}
strong{font-weight:700;color:var(--nw-text-primary)}

:focus{outline:none}
:focus-visible{outline:1px solid var(--nw-accent);outline-offset:2px}

[id]{scroll-margin-top:4.5rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.container{margin-inline:auto;width:100%;max-width:72rem;padding-inline:1.5rem}
@media (min-width:640px){.container{padding-inline:2rem}}

.section{padding-block:6rem;border-top:1px solid var(--nw-border)}
@media (min-width:640px){.section{padding-block:8rem}}

.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
}
.grid-bg-top{
  -webkit-mask-image:radial-gradient(ellipse at top,black,transparent 75%);
  mask-image:radial-gradient(ellipse at top,black,transparent 75%);
}
.grid-bg-topright{
  -webkit-mask-image:radial-gradient(ellipse at top right,black,transparent 70%);
  mask-image:radial-gradient(ellipse at top right,black,transparent 70%);
}

/* ---------- typography ---------- */
.mark{letter-spacing:-.025em;user-select:none;font-size:.875rem;white-space:nowrap}
.mark-dim{font-weight:400;color:var(--nw-text-secondary)}
.mark-bright{font-weight:700;text-transform:uppercase;color:var(--nw-text-primary)}
.mark-sub{font-size:.7rem;letter-spacing:-.025em;white-space:nowrap}

.eyebrow{
  display:inline-flex;align-items:flex-start;gap:.5rem;
  font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--nw-text-secondary);margin-bottom:1.25rem;
}
.eyebrow-dot{display:inline-block;width:6px;height:6px;margin-top:5px;background:var(--nw-success);flex:none}

.h1{
  max-width:56rem;font-weight:700;letter-spacing:-.025em;line-height:1.05;
  font-size:2.25rem;color:var(--nw-text-primary);
}
@media (min-width:640px){.h1{font-size:3.75rem}}
@media (min-width:768px){.h1{font-size:4.25rem}}

.h2{
  max-width:48rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;
  font-size:1.875rem;color:var(--nw-text-primary);
}
@media (min-width:640px){.h2{font-size:3rem;line-height:1}}

.lede{
  margin-top:1.25rem;max-width:42rem;font-size:1rem;line-height:1.625;
  color:var(--nw-text-secondary);
}
@media (min-width:640px){.lede{font-size:1.125rem}}

.h3{font-size:1.25rem;font-weight:700;color:var(--nw-text-primary);line-height:1.75rem}
.h3-caps{
  font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--nw-text-primary);line-height:1.5rem;
}
.h3-caps-lg{font-size:1.125rem;line-height:1.75rem}

.body-sm{font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}
.note{font-size:.875rem;line-height:1.625;color:var(--nw-text-muted);max-width:42rem}
.caption{font-size:.75rem;line-height:1.6;color:var(--nw-text-muted)}
.mt-3{margin-top:.75rem}
.mt-5{margin-top:1.25rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-14{margin-top:3.5rem}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;height:2.75rem;align-items:center;justify-content:center;gap:.5rem;
  padding:0 1.25rem;font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;
  white-space:nowrap;text-decoration:none;
  transition:color .15s var(--nw-ease),background-color .15s var(--nw-ease),border-color .15s var(--nw-ease);
}
.btn-primary{border-color:var(--nw-accent);color:var(--nw-accent)}
.btn-primary:hover{background:var(--nw-accent);color:var(--nw-bg)}
.btn-secondary{border-color:var(--nw-border);color:var(--nw-text-primary)}
.btn-secondary:hover{border-color:var(--nw-border-hover);color:#fff}
.btn-sm{height:2.25rem;padding:0 1rem;font-size:.75rem}
.btn:disabled{opacity:.6;cursor:default}
.btn-primary:disabled:hover{background:transparent;color:var(--nw-accent)}

input[type=text],input[type=email],textarea{
  background:var(--nw-bg);border:1px solid var(--nw-border);color:var(--nw-text-primary);
  font-size:.875rem;padding:0 1rem;height:2.75rem;width:100%;
  -webkit-appearance:none;appearance:none;
}
textarea{padding:.75rem 1rem;height:auto;resize:vertical;line-height:1.5}
input[type=text]:focus,input[type=email]:focus,textarea:focus{border-color:var(--nw-accent);outline:none}
::placeholder{color:var(--nw-text-muted);opacity:1}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:50;
  border-bottom:1px solid transparent;background:transparent;
  transition:background-color .15s var(--nw-ease),border-color .15s var(--nw-ease);
}
.site-header.is-scrolled{
  background:rgba(10,10,10,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--nw-border);
}
.header-inner{display:flex;height:3.5rem;align-items:center;justify-content:space-between;gap:1rem}
.nav{display:none;align-items:center;gap:1.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--nw-text-secondary)}
.nav a{transition:color .15s var(--nw-ease);white-space:nowrap}
.nav a:hover{color:var(--nw-text-primary)}
@media (min-width:768px){.nav{display:flex}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-hairline{
  position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(to right,transparent,var(--nw-border),transparent);
}
.hero-inner{position:relative;padding-top:9rem;padding-bottom:6rem}
@media (min-width:640px){.hero-inner{padding-top:11rem;padding-bottom:8rem}}
.hero .eyebrow{margin-bottom:1.75rem}
.hero .lede{margin-top:2rem}
.hero-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem}

.strip{margin-top:4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--nw-border)}
.strip-cell{padding-block:1.25rem;padding-right:1rem;border-bottom:1px solid var(--nw-border)}
.strip-label{font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:-.025em;color:var(--nw-text-primary)}
.strip-cap{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--nw-text-muted)}
@media (max-width:359px){.strip{grid-template-columns:minmax(0,1fr)}}
@media (min-width:640px){
  .strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .strip-cell{border-bottom:0;border-right:1px solid var(--nw-border)}
  .strip-cell:last-child{border-right:0}
}

/* ---------- card grids (gap-px) ---------- */
.grid-px{
  display:grid;gap:1px;background:var(--nw-border);border:1px solid var(--nw-border);
  grid-template-columns:minmax(0,1fr);
}
.grid-px>*{background:var(--nw-bg);min-width:0}
@media (min-width:640px){.grid-2-sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.grid-2-md{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .grid-3-lg{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.card{
  height:100%;display:flex;flex-direction:column;
  background:var(--nw-surface);border:1px solid var(--nw-border);padding:1.5rem;
  transition:border-color .15s var(--nw-ease);
}
@media (min-width:640px){.card{padding:1.75rem}}
.card:hover{border-color:var(--nw-border-hover)}

.card-top{display:flex;align-items:flex-start;justify-content:space-between}
.icon-box{
  width:42px;height:42px;padding:.625rem;border:1px solid var(--nw-border);
  color:var(--nw-text-primary);transition:border-color .15s var(--nw-ease);flex:none;
}
.icon-box svg{width:20px;height:20px}
.card:hover .icon-box{border-color:var(--nw-border-hover)}
.index{font-size:.75rem;color:var(--nw-text-muted);line-height:1rem}
.card .mark-sub{margin-top:1.5rem}
.card .h3{margin-top:.25rem}
.card .h3-caps{margin-top:.25rem}
.card-desc{margin-top:.5rem;font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}

.bullets{margin-top:1.25rem;display:flex;flex-direction:column;gap:.625rem;font-size:.875rem;line-height:1.25rem;color:var(--nw-text-secondary)}
.bullets li{display:flex;align-items:flex-start;gap:.625rem}
.bullets li::before{
  content:"";flex:none;display:inline-block;width:4px;height:4px;margin-top:.5rem;
  background:var(--nw-text-muted);
}

/* step cards */
.step{height:100%;background:var(--nw-surface);padding:1.75rem}
.step-head{display:flex;align-items:center;gap:.75rem;color:var(--nw-text-muted)}
.step-num{font-size:1.5rem;font-weight:700;color:var(--nw-text-primary);line-height:2rem}
.step-rule{flex:1;border-top:1px solid var(--nw-border)}
.step .h3-caps{margin-top:1.25rem}
.step p{margin-top:.75rem;font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}

/* shift (before / after) cards */
.shift-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--nw-text-secondary)}
.shift .h3{margin-top:1rem}
.shift .card-desc{margin-top:.75rem}

/* two-path cards */
.path{height:100%;display:flex;flex-direction:column;background:var(--nw-surface);border:1px solid var(--nw-border);padding:1.75rem;transition:border-color .15s var(--nw-ease)}
.path:hover{border-color:var(--nw-border-hover)}
.path .mark-sub{margin-top:1.75rem}
.path .h3{margin-top:.25rem}
.path-meta{margin-top:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--nw-text-secondary)}
.path .card-desc{margin-top:1rem}
.path .bullets{margin-top:1.5rem}

/* why list */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:2.5rem;row-gap:2.5rem}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.why-item{border-top:1px solid var(--nw-border);padding-top:1.25rem}
.why-item p{margin-top:.75rem;font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}

/* callout band */
.callout{
  border:1px solid var(--nw-border);background:var(--nw-surface);padding:1.5rem 1.75rem;
  display:flex;flex-direction:column;gap:1rem;
}
.callout p{flex:1;font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}
.callout .btn{flex:none;align-self:flex-start}
@media (min-width:640px){
  .callout{flex-direction:row;align-items:center;gap:2rem}
  .callout .btn{align-self:auto}
}

/* FAQ */
.faq-list{margin-top:3rem;border-top:1px solid var(--nw-border)}
.faq{border-bottom:1px solid var(--nw-border);padding-block:1.5rem}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font-size:1rem;font-weight:500;color:var(--nw-text-primary);line-height:1.5}
@media (min-width:640px){.faq-q{font-size:1.125rem}}
.faq-plus{
  flex:none;margin-top:.125rem;font-size:1.5rem;line-height:1;color:var(--nw-text-muted);
  transition:transform .15s var(--nw-ease);
}
.faq[open] .faq-plus{transform:rotate(45deg)}
.faq-a{margin-top:.75rem;max-width:65ch;font-size:.875rem;line-height:1.625;color:var(--nw-text-secondary)}

/* contact */
.contact-panel{position:relative;border:1px solid var(--nw-border);background:var(--nw-surface);padding:2.5rem;overflow:hidden}
@media (min-width:640px){.contact-panel{padding:4rem}}
.contact-body{position:relative}
.contact-panel .eyebrow{margin-bottom:1.5rem}
.form{position:relative;margin-top:2.5rem;max-width:36rem;display:flex;flex-direction:column;gap:.75rem}
.form[hidden]{display:none}
.form-row{display:flex;flex-direction:column;gap:.75rem}
.form-row>input{min-width:0}
.form-row .btn{flex:none}
@media (min-width:640px){
  .form-row{flex-direction:row}
  .form-row>input{flex:1}
}
.form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;padding:0;border:0;overflow:hidden;opacity:0}
.form-status{margin-top:1rem;font-size:.875rem;line-height:1.625;color:var(--nw-text-primary);max-width:36rem}
.form-status:empty{margin-top:0}
.form-status.is-error{color:var(--nw-text-secondary);border-left:1px solid var(--nw-text-primary);padding-left:1rem}
.form-status.is-ok{font-weight:500}
.form-foot{margin-top:1rem;font-size:.75rem;color:var(--nw-text-muted)}

/* footer */
.site-footer{border-top:1px solid var(--nw-border);padding-block:3rem;font-size:.875rem;color:var(--nw-text-secondary)}
.footer-inner{display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){.footer-inner{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.footer-blurb{max-width:24rem}
.footer-blurb p{margin-top:.75rem;font-size:.75rem;line-height:1.625;color:var(--nw-text-muted)}
.footer-links{display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em}
.footer-links a{transition:color .15s var(--nw-ease)}
.footer-links a:hover{color:var(--nw-text-primary)}
.footer-copy{margin-top:2.5rem;font-size:.75rem;line-height:1rem;color:var(--nw-text-muted)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--nw-ease),transform .7s var(--nw-ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .faq-plus,.btn,.card,.icon-box,.nav a,.site-header{transition:none}
}