/* ════════════════════════════════════════════════════════════════
   fixnet.css — shared design system for the [fix]net site
   Green pivot · DM Mono + Syne · dark node-graph aesthetic
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0f14;
  --surface: rgba(20,20,28,0.55);
  --surface-solid: #16161d;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.46);
  --faint: rgba(255,255,255,0.30);
  --net: #4ecb71;            /* primary — green pivot */
  --net-hi: #6fe88a;
  --net-dim: rgba(78,203,113,0.14);
  --mono: 'DM Mono', ui-monospace, monospace;
  --sans: 'Syne', sans-serif;
  --maxw: 1180px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* ── Background field ─────────────────────────────── */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.field-tint {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 42%, rgba(15,15,20,0.62) 100%),
    radial-gradient(60% 46% at 50% 18%, rgba(78,203,113,0.06), transparent 70%);
}

/* ── Animated logo (shared with fixnet-logo.js) ───── */
.fixlogo { display: inline-flex; align-items: baseline; position: relative; user-select: none; line-height: 1; font-size: 22px; }
.fixlogo-grp {
  display: inline-flex; align-items: baseline;
  background:
    radial-gradient(ellipse 95% 140% at var(--p1x,20%) var(--p1y,30%), var(--c1,#4ecb71) 0%, transparent 60%),
    radial-gradient(ellipse 105% 125% at var(--p2x,70%) var(--p2y,60%), var(--c2,#80e8c0) 0%, transparent 60%),
    radial-gradient(ellipse 90% 150% at var(--p3x,40%) var(--p3y,80%), var(--c3,#3fd6e0) 0%, transparent 60%),
    radial-gradient(ellipse 115% 105% at var(--p4x,80%) var(--p4y,20%), var(--c4,#6fe88a) 0%, transparent 60%),
    radial-gradient(ellipse 80% 160% at var(--p5x,10%) var(--p5y,70%), var(--c5,#a0e85a) 0%, transparent 60%),
    radial-gradient(ellipse 125% 95% at var(--p6x,55%) var(--p6y,50%), var(--c6,#34d399) 0%, transparent 60%),
    linear-gradient(135deg, #4ecb7155, #80e8c055, #3fd6e055, #6fe88a55);
  -webkit-background-clip: text; background-clip: text; color: transparent; will-change: background;
}
.fl-bk  { font-family: var(--mono); font-weight: 300; font-size: 1.3em; opacity: 0.7; line-height: 1; }
.fl-fx  { font-family: var(--mono); font-weight: 400; font-size: 1em; letter-spacing: 0.11em; padding: 0 0.05em 0 0.12em; line-height: 1; position: relative; top: -0.04em; }
.fl-svc { font-family: var(--sans); font-weight: 700; font-size: 0.92em; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); margin-left: 0.2em; line-height: 1; position: relative; top: -0.05em; }
.fixlogo-glow {
  position: absolute; top: 50%; left: 42%; transform: translate(-50%,-50%);
  width: 150%; height: 280%; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--glow-color,#4ecb7133) 0%, transparent 70%);
  pointer-events: none; z-index: -1; filter: blur(26px); opacity: 0.7;
}

/* static-mono inline wordmark (used where animation is overkill) */
.mark { display: inline-flex; align-items: baseline; user-select: none; line-height: 1; }
.mark .mk-bk  { color: var(--net); font-weight: 300; font-size: 1.18em; opacity: 0.65; }
.mark .mk-fx  { color: var(--net); font-weight: 400; font-size: 1em; letter-spacing: 0.04em; padding: 0 2px; }
.mark .mk-svc { font-family: var(--sans); font-weight: 700; font-size: 0.92em; letter-spacing: 0.04em; margin-left: 0.32em; color: var(--text); }

/* ── Top bar ──────────────────────────────────────── */
.topbar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px;
  background: rgba(13,13,18,0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-logo { text-decoration: none; display: inline-flex; }
.topbar-logo .fixlogo { font-size: 17px; }
.topbar-nav { display: flex; gap: 4px; }
.topbar-nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
  text-decoration: none; padding: 8px 13px; border-radius: 7px; transition: color 0.15s, background 0.15s;
}
.topbar-nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.topbar-nav a.current { color: var(--net); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: 8px; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn.primary { background: var(--net); color: #07140c; border-color: var(--net); font-weight: 500; }
.btn.primary:hover { background: var(--net-hi); border-color: var(--net-hi); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn.ghost:hover { border-color: rgba(255,255,255,0.42); }
.btn.sm { padding: 7px 13px; font-size: 11px; }

@media (max-width: 880px) { .topbar-nav { display: none; } }

/* ── Page scaffold ────────────────────────────────── */
.page-main { position: relative; z-index: 2; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }

.page-hero { position: relative; z-index: 2; padding: 168px 30px 70px; max-width: var(--maxw); margin: 0 auto; }
.page-hero.center { text-align: center; }
.page-hero.center .lede { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--net); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--net); box-shadow: 0 0 10px var(--net); }
.page-hero.center .eyebrow { justify-content: center; }

h1.title {
  font-family: var(--sans); font-weight: 800; font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance;
}
.page-hero.center h1.title { margin-left: auto; margin-right: auto; }
h1.title em { font-style: normal; color: var(--net); }

.lede {
  font-family: var(--mono); font-weight: 300; font-size: clamp(14px, 1.4vw, 17px);
  color: var(--muted); line-height: 1.7; max-width: 56ch; margin-top: 22px; text-wrap: pretty;
}

.section { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 60px 30px; }
.section.tight { padding: 36px 30px; }
h2.h {
  font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: -0.02em; line-height: 1.06; max-width: 20ch; text-wrap: balance;
}
h3.sub { font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.section-head { margin-bottom: 40px; }
.section-head .lede { margin-top: 16px; }

.divider { height: 1px; background: var(--border); max-width: var(--maxw); margin: 0 auto; }

/* ── Surfaces / cards ─────────────────────────────── */
.card {
  border: 1px solid var(--border); border-radius: 16px; padding: 26px;
  background: var(--surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 12px; transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card .num { font-family: var(--mono); font-size: 12px; color: var(--net); letter-spacing: 0.12em; }
.card p { font-family: var(--mono); font-weight: 300; font-size: 13.5px; color: var(--muted); line-height: 1.65; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* glyph tile used on feature cards */
.glyph {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03);
  font-family: var(--mono); font-size: 17px; color: var(--net);
}

/* chips / tags */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
  background: var(--surface); display: inline-flex; align-items: center; gap: 8px;
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--net); }
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim);
  padding: 4px 9px; border-radius: 6px; display: inline-block;
}

/* image placeholder */
.ph {
  border: 1px solid var(--border); border-radius: 14px; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px),
    var(--surface-solid);
  display: grid; place-items: center; color: var(--faint);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── Footer ───────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 2; border-top: 1px solid var(--border);
  background: rgba(11,11,16,0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-top: 60px;
}
.footer-news {
  max-width: var(--maxw); margin: 0 auto; padding: 54px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.footer-news h3 { font-family: var(--sans); font-weight: 800; font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.02em; }
.footer-news p { font-family: var(--mono); font-weight: 300; font-size: 13px; color: var(--muted); margin-top: 8px; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input {
  font-family: var(--mono); font-size: 13px; color: var(--text); background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 11px 15px; min-width: 240px; outline: none;
}
.news-form input:focus { border-color: var(--net); }
.news-form input::placeholder { color: var(--faint); }
.news-note { font-family: var(--mono); font-size: 11px; color: var(--net); margin-top: 10px; min-height: 14px; }

.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 30px 30px;
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px;
}
.footer-brand .blurb { font-family: var(--mono); font-weight: 300; font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 16px; max-width: 32ch; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col a { display: block; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; padding: 5px 0; transition: color 0.15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 20px 30px 44px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.35); border-top: 1px solid var(--border);
}
.status-dot { display: inline-flex; align-items: center; gap: 8px; }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--net); box-shadow: 0 0 8px var(--net); }

/* ── reveal on scroll ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── responsive ───────────────────────────────────── */
@media (max-width: 980px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .page-hero { padding-top: 130px; }
  .footer-news { flex-direction: column; align-items: flex-start; }
}