/* SYNAPSE
   Layout concept: the inside of a cybernetic limb. Blue-black ground, copper wiring
   traces running behind the page, bioluminescent teal for live signals, chamfered
   panels joined by trace lines and glowing node points. */
html[data-skin="synapse"] {
  --ground: #070b10;
  --panel: #0d141b;
  --panel-2: #121c25;
  --line: #22313c;
  --text: #dfeaf0;
  --muted: #84979f;
  --signal: #3fe0c0;     /* bioluminescent teal: live signal */
  --signal-ink: #03140f;
  --copper: #c9814e;     /* wiring */
  --ok: #3fe0c0;
  --warn: #e0a24f;
  --off: #66757d;
  --display: "Michroma", "Eurostile", "Arial", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, Menlo, monospace;
  --step-3: clamp(1.6rem, 3.4vw, 2.3rem);
  --step-4: clamp(2.2rem, 6.6vw, 4.6rem);
}
html[data-skin="synapse"] body {
  background-color: var(--ground);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c9814e' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h80l20-20h60M40 0v30l20 20v60l-20 20v110M200 240v-50l-20-20v-50l20-20V0M0 180h90l20 20h130'/%3E%3C/g%3E%3Cg fill='%23c9814e' fill-opacity='.35'%3E%3Ccircle cx='80' cy='60' r='2.5'/%3E%3Ccircle cx='160' cy='60' r='2.5'/%3E%3Ccircle cx='60' cy='110' r='2.5'/%3E%3Ccircle cx='180' cy='120' r='2.5'/%3E%3Ccircle cx='110' cy='200' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-attachment: fixed;
}
html[data-skin="synapse"] h1, html[data-skin="synapse"] h2 { font-weight: 400; letter-spacing: .06em; line-height: 1.12; }
html[data-skin="synapse"] h3 { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .08em; line-height: 1.3; }
html[data-skin="synapse"] a { color: var(--signal); }
html[data-skin="synapse"] a:hover { color: #fff; }
html[data-skin="synapse"] .brand { font-family: var(--display); font-weight: 400; letter-spacing: .18em; font-size: .9rem; }
html[data-skin="synapse"] .brand svg g { stroke: var(--signal); filter: drop-shadow(0 0 4px rgba(63,224,192,.6)); }

html[data-skin="synapse"] .preview-bar { background: var(--copper); color: #160b03; }
html[data-skin="synapse"] .site-header { background: rgba(7,11,16,.9); border-bottom: 1px solid var(--line); }
html[data-skin="synapse"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--copper) 70%, transparent); opacity: .7; }
html[data-skin="synapse"] .nav a { font-family: var(--mono); font-weight: 400; letter-spacing: .1em; font-size: 14px; }
html[data-skin="synapse"] .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal); color: #fff; }
html[data-skin="synapse"] .nav .nav-cta { background: transparent; color: var(--signal); border: 1px solid var(--signal); }
html[data-skin="synapse"] .nav .nav-cta:hover { background: var(--signal); color: var(--signal-ink); }

html[data-skin="synapse"] .band { background: rgba(7,11,16,.86); border-top: 1px solid var(--line); }
html[data-skin="synapse"] .band.alt { background: rgba(13,20,27,.9); }
html[data-skin="synapse"] .page-head { background: rgba(7,11,16,.8); }
html[data-skin="synapse"] .readout { font-family: var(--mono); color: var(--copper); letter-spacing: .14em; font-size: 13px; }
html[data-skin="synapse"] .readout::before { width: 30px; height: 7px; background: radial-gradient(circle at 100% 50%, var(--signal) 0 3px, transparent 3.5px), linear-gradient(var(--copper), var(--copper)) 0 50% / calc(100% - 6px) 1px no-repeat; }

/* panels: chamfered, edged with a trace line */
html[data-skin="synapse"] .card,
html[data-skin="synapse"] .tool,
html[data-skin="synapse"] .lanes,
html[data-skin="synapse"] .services,
html[data-skin="synapse"] .features { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
html[data-skin="synapse"] .card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); position: relative; }
html[data-skin="synapse"] .card::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 2px; background: linear-gradient(90deg, var(--signal), transparent); z-index: 1; }
html[data-skin="synapse"] .card:hover { border-color: var(--copper); }
html[data-skin="synapse"] .card h3 a { color: #fff !important; }
html[data-skin="synapse"] .lanes, html[data-skin="synapse"] .services, html[data-skin="synapse"] .features { background: var(--line); }
html[data-skin="synapse"] .lane, html[data-skin="synapse"] .service, html[data-skin="synapse"] .features li { background: var(--panel); }
html[data-skin="synapse"] .lane:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px rgba(63,224,192,.35); }
html[data-skin="synapse"] .lane .idx, html[data-skin="synapse"] .service .code { color: var(--copper); font-family: var(--mono); font-size: 13px; }
html[data-skin="synapse"] .lane .go { color: var(--signal); font-family: var(--mono); font-weight: 400; }
html[data-skin="synapse"] .service.cta { background: linear-gradient(135deg, rgba(63,224,192,.22), rgba(63,224,192,.06)); color: var(--text); box-shadow: inset 0 0 0 1px var(--signal); }
html[data-skin="synapse"] .service.cta p { color: var(--muted); }
html[data-skin="synapse"] .service.cta .code { color: var(--signal); }
html[data-skin="synapse"] .service.cta:hover { background: rgba(63,224,192,.28); }
html[data-skin="synapse"] .features li b { color: var(--signal); font-family: var(--mono); font-weight: 400; letter-spacing: .08em; }
html[data-skin="synapse"] .tool { border: 1px solid var(--line); background: var(--panel); }

/* media: a sensor feed with a slow scan line */
html[data-skin="synapse"] .media { border-color: var(--line); background: #04080c; }
html[data-skin="synapse"] .ph { filter: hue-rotate(140deg) saturate(.7); }
html[data-skin="synapse"] .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 46%, rgba(63,224,192,.12) 50%, transparent 54% 100%); background-size: 100% 300%; animation: syn-scan 6s linear infinite; }
@keyframes syn-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }

html[data-skin="synapse"] .hero { background: var(--ground); }
html[data-skin="synapse"] .hero-media img { opacity: .5; }
html[data-skin="synapse"] .hero-media::after { animation: none; background: linear-gradient(90deg, rgba(7,11,16,.97) 0%, rgba(7,11,16,.75) 45%, rgba(7,11,16,.2) 100%), linear-gradient(0deg, var(--ground) 0%, transparent 40%); }
html[data-skin="synapse"] .hero h1 { color: #fff; text-shadow: 0 0 28px rgba(63,224,192,.25); }
html[data-skin="synapse"] .hero h1 span { color: var(--signal); text-shadow: 0 0 24px rgba(63,224,192,.55); }
html[data-skin="synapse"] .rec { font-family: var(--mono); color: var(--copper); letter-spacing: .2em; }
html[data-skin="synapse"] .rec::before { background: var(--signal); box-shadow: 0 0 10px var(--signal); }
html[data-skin="synapse"] .hero .status { font-family: var(--mono); }
html[data-skin="synapse"] .hud-corners::before, html[data-skin="synapse"] .hud-corners::after { border-color: var(--copper); border-width: 1px; width: 40px; height: 40px; }

html[data-skin="synapse"] .btn { font-family: var(--mono); font-weight: 400; letter-spacing: .14em; border-color: var(--signal); color: var(--signal); }
html[data-skin="synapse"] .btn:hover { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 24px rgba(63,224,192,.45); }
html[data-skin="synapse"] .btn.solid { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 18px rgba(63,224,192,.35); }
html[data-skin="synapse"] .btn.solid:hover { background: #fff; border-color: #fff; }
html[data-skin="synapse"] .btn.ghost { border-color: var(--copper); color: var(--copper); }
html[data-skin="synapse"] .btn.ghost:hover { background: var(--copper); color: #160b03; box-shadow: none; }

html[data-skin="synapse"] .badge { font-family: var(--mono); font-weight: 400; }
html[data-skin="synapse"] .badge::before { border-radius: 50%; box-shadow: 0 0 6px currentColor; }
html[data-skin="synapse"] .toolset li { font-family: var(--mono); font-weight: 400; letter-spacing: .08em; background: var(--panel); }
html[data-skin="synapse"] .toolset li:hover { border-color: var(--copper); color: var(--copper); }
html[data-skin="synapse"] .social { font-family: var(--mono); font-weight: 400; }
html[data-skin="synapse"] .social:hover { border-color: var(--signal); color: var(--signal); }
html[data-skin="synapse"] .specs dt { color: var(--copper); }
html[data-skin="synapse"] .roadmap { border-left-color: var(--copper); }
html[data-skin="synapse"] .roadmap li::before { border-radius: 50%; border-color: var(--copper); }
html[data-skin="synapse"] .roadmap li.now::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 12px var(--signal); }
html[data-skin="synapse"] .tool { border-style: solid; }

html[data-skin="synapse"] .site-footer { background: #05080c; border-top: 1px solid var(--copper); }
html[data-skin="synapse"] .foot-grid h4 { color: var(--copper); }
html[data-skin="synapse"] .foot-tag { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .06em; line-height: 1.4; }