/* Magnitude Network — shared stylesheet
   Design system: near-black canvas + electric yellow voltage. */

:root{
  --primary:#faff69;
  --primary-active:#e6eb52;
  --primary-disabled:#3a3a1f;
  --ink:#ffffff;
  --body:#cccccc;
  --body-strong:#e6e6e6;
  --muted:#888888;
  --muted-soft:#5a5a5a;
  --hairline:#2a2a2a;
  --hairline-strong:#3a3a3a;
  --canvas:#0a0a0a;
  --surface-soft:#121212;
  --surface-card:#1a1a1a;
  --surface-elevated:#242424;
  --on-primary:#0a0a0a;
  --emerald:#22c55e;
  --rose:#ef4444;
  --blue:#3b82f6;
  --warning:#f59e0b;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:9999px;

  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px;
  --s-xl:32px; --s-xxl:48px; --s-section:96px;

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.55;
}
img{max-width:100%;display:block;}

h1,h2,h3,h4{color:var(--ink);font-weight:700;margin:0 0 var(--s-md);}
h1{font-size:56px;line-height:1.1;letter-spacing:-2px;}
h2{font-size:40px;line-height:1.15;letter-spacing:-1.5px;}
h3{font-size:24px;line-height:1.3;letter-spacing:-0.3px;}
h4{font-size:18px;line-height:1.4;letter-spacing:0;font-weight:600;}
p{margin:0 0 var(--s-md);}
a{color:var(--primary);}
strong{color:var(--body-strong);font-weight:600;}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s-lg);}
.band{padding:var(--s-section) 0;}
.band-tight{padding:var(--s-xxl) 0;}
.band-soft{background:var(--surface-soft);}
.rule{border:0;border-top:1px solid var(--hairline);margin:0;}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:1.5px;line-height:1.4;
  text-transform:uppercase;color:var(--primary);margin:0 0 var(--s-sm);
}
.lede{font-size:18px;font-weight:600;line-height:1.4;color:var(--body-strong);max-width:62ch;}
.muted{color:var(--muted);}
.fine{font-size:13px;color:var(--muted-soft);line-height:1.4;}
.mono{font-family:var(--mono);font-size:14px;}

/* ---------- header ---------- */
.site-header{
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:40;
}
.nav{display:flex;align-items:center;gap:var(--s-lg);min-height:64px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto;}
.brand img{width:28px;height:28px;border-radius:var(--r-sm);}
.brand span{font-weight:700;font-size:16px;letter-spacing:-0.3px;}
.nav-links{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  margin-left:auto;list-style:none;padding:0;
}
.nav-links a{
  display:block;padding:8px 12px;border-radius:var(--r-md);
  font-size:14px;font-weight:500;line-height:1.4;
  color:var(--body);text-decoration:none;
}
.nav-links a.active{background:var(--surface-card);color:var(--ink);}
.nav-cta{
  background:var(--primary);color:var(--on-primary)!important;
  font-weight:600;padding:10px 16px!important;border-radius:var(--r-md);
}

/* ---------- hero ---------- */
.hero{padding:var(--s-xxl) 0 var(--s-xl);}
.hero h1{max-width:18ch;}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-xl);align-items:start;}
.hero-sub{font-size:18px;color:var(--body-strong);max-width:56ch;}

.page-head{padding:var(--s-xxl) 0 var(--s-lg);border-bottom:1px solid var(--hairline);}
.page-head h1{font-size:40px;letter-spacing:-1.5px;line-height:1.15;max-width:22ch;}
.crumb{font-size:13px;color:var(--muted);margin:0 0 var(--s-sm);}
.crumb a{color:var(--muted);text-decoration:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:12px 20px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;line-height:1;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);
}
.btn-primary{background:var(--primary);color:var(--on-primary);}
.btn-primary:active{background:var(--primary-active);}
.btn-secondary{background:var(--surface-card);color:var(--ink);border-color:var(--hairline-strong);}
.btn-onyellow{background:var(--on-primary);color:var(--primary);}
.btn-row{display:flex;gap:var(--s-sm);flex-wrap:wrap;margin-top:var(--s-lg);}

/* ---------- stats ---------- */
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-lg);border-top:1px solid var(--hairline);padding-top:var(--s-lg);
}
.stat-row.three{grid-template-columns:repeat(3,1fr);}
.stat-num{
  color:var(--primary);font-size:56px;font-weight:700;
  line-height:1;letter-spacing:-1.5px;display:block;
}
.stat-num.sm{font-size:40px;letter-spacing:-1px;}
.stat-label{font-size:13px;font-weight:500;color:var(--muted);margin-top:var(--s-xs);display:block;}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--s-lg);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl);
}
.card h3,.card h4{margin-top:0;}
.card p:last-child{margin-bottom:0;}
.card-yellow{
  background:var(--primary);color:var(--on-primary);
  border-radius:var(--r-lg);padding:var(--s-xl);border:1px solid var(--primary);
}
.card-yellow h2,.card-yellow h3,.card-yellow h4{color:var(--on-primary);}
.card-yellow a{color:var(--on-primary);}
.card-tight{padding:var(--s-lg);}
.card-nested{
  background:var(--surface-elevated);border-radius:var(--r-md);
  padding:var(--s-md);border:1px solid var(--hairline-strong);
}

/* ---------- console / spec block ---------- */
.console{
  background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-lg);
  font-family:var(--mono);font-size:14px;line-height:1.55;
  color:var(--body);overflow-x:auto;
}
.console .k{color:var(--primary);}
.console .c{color:var(--muted-soft);}
.console .n{color:var(--blue);}
.console .ok{color:var(--emerald);}
.console .warn{color:var(--warning);}
.console-bar{
  display:flex;gap:var(--s-xs);align-items:center;
  border-bottom:1px solid var(--hairline);
  margin:calc(-1 * var(--s-lg)) calc(-1 * var(--s-lg)) var(--s-md);
  padding:var(--s-sm) var(--s-lg);
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
}
.console pre{margin:0;font-family:var(--mono);white-space:pre;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface-card);}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
caption{
  text-align:left;padding:var(--s-md) var(--s-lg);color:var(--muted);
  font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  border-bottom:1px solid var(--hairline);
}
th,td{padding:12px var(--s-lg);text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;}
thead th{
  color:var(--muted);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;background:var(--surface-soft);
  white-space:nowrap;
}
tbody th{color:var(--ink);font-weight:600;}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0;}
td.num,th.num{font-family:var(--mono);color:var(--ink);white-space:nowrap;}
td.hi{color:var(--primary);font-family:var(--mono);font-weight:600;}

/* ---------- lists ---------- */
.spec{list-style:none;padding:0;margin:0;}
.spec li{
  padding:12px 0;border-bottom:1px solid var(--hairline);
  display:flex;gap:var(--s-md);justify-content:space-between;font-size:14px;
}
.spec li:last-child{border-bottom:0;}
.spec .lab{color:var(--muted);}
.spec .val{color:var(--ink);font-family:var(--mono);text-align:right;}

ul.ticks{list-style:none;padding:0;margin:0 0 var(--s-md);}
ul.ticks li{position:relative;padding:0 0 var(--s-sm) 22px;font-size:15px;}
ul.ticks li::before{
  content:"—";position:absolute;left:0;top:0;color:var(--primary);font-weight:700;
}
ol.steps{list-style:none;counter-reset:st;padding:0;margin:0;}
ol.steps li{
  counter-increment:st;position:relative;padding:0 0 var(--s-lg) 52px;
  border-left:1px solid var(--hairline);margin-left:16px;
}
ol.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:-17px;top:0;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-card);border:1px solid var(--hairline-strong);
  border-radius:var(--r-pill);color:var(--primary);
  font-family:var(--mono);font-size:12px;font-weight:600;
}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0;}
ol.steps h4{margin-bottom:6px;}
ol.steps p{margin-bottom:0;font-size:15px;}

/* ---------- badges ---------- */
.badge{
  display:inline-block;background:var(--surface-card);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--r-pill);
  padding:4px 12px;font-size:13px;font-weight:500;
}
.badge-yellow{
  display:inline-block;background:var(--primary);color:var(--on-primary);
  border-radius:var(--r-pill);padding:4px 12px;
  font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
}
.tags{display:flex;flex-wrap:wrap;gap:var(--s-xs);margin:0;padding:0;list-style:none;}

/* ---------- cta band ---------- */
.cta-band{
  background:var(--primary);color:var(--on-primary);
  border-radius:var(--r-lg);padding:64px;
}
.cta-band h2{color:var(--on-primary);max-width:20ch;}
.cta-band p{color:#1c1c0d;max-width:60ch;}

/* ---------- forms ---------- */
form.enquiry{display:grid;gap:var(--s-md);}
.field{display:grid;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--body-strong);}
.field input,.field select,.field textarea{
  background:var(--surface-card);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  padding:10px 14px;font-family:var(--sans);font-size:16px;width:100%;
}
.field input,.field select{height:40px;}
.field textarea{min-height:120px;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);
}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md);}

/* ---------- footer ---------- */
.site-footer{
  background:var(--canvas);border-top:1px solid var(--hairline);
  padding:64px 0 var(--s-xl);color:var(--muted);font-size:14px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-xl);}
.site-footer h4{
  font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink);margin-bottom:var(--s-sm);
}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:var(--s-xs);}
.site-footer a{color:var(--muted);text-decoration:none;}
.site-footer a:hover{color:var(--ink);}
.footer-bottom{
  border-top:1px solid var(--hairline);margin-top:var(--s-xl);
  padding-top:var(--s-md);display:flex;justify-content:space-between;
  gap:var(--s-md);flex-wrap:wrap;font-size:13px;color:var(--muted-soft);
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  h1{font-size:36px;letter-spacing:-1.2px;}
  h2{font-size:28px;letter-spacing:-1px;}
  h3{font-size:20px;}
  .page-head h1{font-size:30px;letter-spacing:-1px;}
  .band{padding:var(--s-xxl) 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stat-row,.stat-row.three{grid-template-columns:1fr 1fr;}
  .stat-num{font-size:36px;letter-spacing:-1px;}
  .stat-num.sm{font-size:30px;}
  .cta-band{padding:var(--s-xl);}
  .card{padding:var(--s-lg);}
  .field-2{grid-template-columns:1fr;}
  .nav{flex-wrap:wrap;padding-bottom:var(--s-xs);}
  .nav-links{margin-left:0;width:100%;gap:0;}
  .nav-links a{padding:8px 10px;}
  .footer-grid{grid-template-columns:1fr;}
}