/* =========================================================================
   Synapse Nexus -- marketing site stylesheet
   Written once, clean, in sections. If this ever needs a visual change,
   edit the relevant section below -- do NOT append a new override block
   at the end. (See outputs/synapse-nexus-multitheme.html for what four
   rounds of "append another override" produces.)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#05070b;
  --bg-raised:#0a0e15;
  --bg-card:#0d121a;
  --line:#1b212c;
  --text:#f3f6fb;
  --muted:#93a0b2;
  --muted-dim:#5c6779;
  /* surface-based rgba() helpers -- lets things like the sticky header's
     translucent blur or a gradient fade adapt to whichever theme is
     active, instead of being hardcoded to the dark palette. */
  --bg-rgb:5,7,11;
  --edge-rgb:255,255,255;       /* neutral border tint on top of a surface */
  --text-soft:#d8dee8;          /* secondary body copy sitting on --bg-card */
  --diagram-bg:#050708;

  /* One accent per capability area -- genuine multi-color, not a single
     theme variable reused everywhere. Same hues in both themes: they're
     saturated enough to read on white or near-black alike. */
  --blue:#3b82f6;      --blue-rgb:59,130,246;
  --violet:#8b5cf6;    --violet-rgb:139,92,246;
  --teal:#14ccb4;      --teal-rgb:20,204,180;
  --amber:#f5a623;     --amber-rgb:245,166,35;
  --rose:#f4436c;      --rose-rgb:244,67,108;
  --green:#22c55e;     --green-rgb:34,197,94;
  --cyan:#22d3ee;      --cyan-rgb:34,211,238;
  --pink:#ec4899;      --pink-rgb:236,72,153;

  --radius:14px;
  --shell:min(1180px,calc(100% - 48px));
}

/* ---------- 1b. Light theme ----------
   Opt-in via [data-theme="light"] on <html> (set by the inline script in
   <head>, before first paint, so there's no flash of the wrong theme) and
   toggled at runtime by .theme-toggle (assets/main.js). No [data-theme]
   attribute at all == the original dark design, unchanged. */
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-raised:#ffffff;
  --bg-card:#ffffff;
  --line:#e3e6ee;
  --text:#10131c;
  --muted:#5b6472;
  --muted-dim:#8791a1;
  --bg-rgb:246,247,251;
  --edge-rgb:15,20,32;
  --text-soft:#333c4a;
  --diagram-bg:#eef1f6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.6 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.shell{width:var(--shell);margin:0 auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(var(--blue-rgb),.35)}

.eyebrow{display:inline-flex;align-items:center;color:var(--accent,var(--blue));font:700 14px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.muted{color:var(--muted)}

/* ---------- 2. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:13px 22px;font:700 13.5px Inter,Arial,sans-serif;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 8px 26px rgba(var(--blue-rgb),.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--blue-rgb),.5)}
.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(var(--edge-rgb),.18)}
.btn-outline:hover{border-color:var(--blue);background:rgba(var(--blue-rgb),.08)}
.btn-sm{padding:9px 16px;font-size:12.5px}

/* ---------- 3. Top banner + nav ---------- */
.announce{background:linear-gradient(90deg,var(--blue),var(--violet));color:#04060a;text-align:center;padding:9px 16px;font:700 12px Inter,Arial,sans-serif}
.announce a{text-decoration:underline}
/* Transparent at the very top of the page -- on .hero pages this is what
   lets the moon/mesh sit fully visible behind the nav bar instead of
   being cut off by an opaque strip. Once the visitor scrolls even a
   little, .scrolled (toggled in main.js) brings back the solid, blurred
   bar so nav text stays readable over ordinary page content. */
header.site{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease}
header.site.scrolled{background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
header.site .bar{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font:800 16px Inter,Arial,sans-serif;letter-spacing:-.02em}
/* The official wordmark PNG already contains the mark + "SYNAPSE NEXUS"
   text as one image (transparent background, confirmed -- not a plain
   text label anymore), so it's sized by height with width:auto to keep
   its own ~3:1 aspect ratio, not the old fixed 30x30 icon-only box. */
.brand img{height:44px;width:auto}
footer.site .brand img{height:50px}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:8px;font-size:13.5px;color:var(--muted)}
.nav-links a{transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--text)}
.bar .btn{margin-left:auto}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;margin-left:auto;border-radius:50%;border:1px solid var(--line);background:var(--bg-card);color:var(--muted);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.theme-toggle:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}
@media(max-width:860px){
  .nav-links{display:none}
  .bar .btn{display:none}
  .nav-toggle{display:block}
  header.site.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;position:absolute;left:0;right:0;top:76px;background:var(--bg-raised);border-bottom:1px solid var(--line);padding:14px var(--shell,24px) 20px}
  header.site.open .nav-links a{padding:10px 4px;width:100%}
}

/* ---------- 4. Hero ----------
   Deliberately NOT theme-aware: the moon/stars/amber-lead treatment below
   is designed for a dark backdrop. Re-pinning the surface tokens locally
   (not just `color`) means every nested component that reads var(--text),
   var(--muted), var(--edge-rgb) etc. -- outline buttons included -- also
   resolves to the dark-hero values in both themes, instead of only the
   top-level text. A bold, high-impact band at the top of an otherwise
   light-themeable page, same pattern as most light-mode marketing sites
   that keep a dark hero banner. Every other section (.page-hero included)
   still follows the page theme normally. */
.hero{
  --bg:#05070b; --bg-rgb:5,7,11; --text:#f3f6fb; --muted:#93a0b2; --muted-dim:#5c6779;
  --edge-rgb:255,255,255; --line:#1b212c; --bg-card:#0d121a;
  position:relative;overflow:hidden;padding:110px 0 90px;text-align:center;background:var(--bg);color:var(--text);
}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.32}
.hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),.35),var(--bg) 92%)}
.hero-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero>.shell{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,5.4vw,64px);max-width:900px;margin:18px auto 20px}
.hero h1 .grad{background:linear-gradient(100deg,var(--blue),var(--violet) 60%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:640px;margin:0 auto 30px;color:#f2c674;font-size:17px;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hero p.lead .grad{background:linear-gradient(100deg,#ffd166,var(--amber) 55%,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.hero .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.page-hero{padding:80px 0 60px;text-align:left}
.page-hero h1{margin:16px 0 16px;font-size:clamp(32px,4.4vw,48px)}
.page-hero p.lead{max-width:640px;margin:0 0 24px;color:var(--muted);font-size:15.5px}

/* ---------- 5. Stat strip ---------- */
.stats{position:relative;overflow:hidden;padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4}
.stats-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(var(--bg-rgb),.55) 40%,var(--bg))}
.stats>.shell{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats .num{font:800 34px/1 Inter,Arial,sans-serif;letter-spacing:-.03em;background:linear-gradient(100deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .label{margin-top:8px;color:var(--muted);font-size:12.5px}
@media(max-width:760px){.stats>.shell{grid-template-columns:repeat(2,1fr)}}

/* ---------- 6. Section scaffolding ---------- */
.section{padding:96px 0}
.section-head{max-width:640px;margin:0 0 48px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 12px}
.section-head p{color:var(--muted);font-size:15px}
.section-alt{background:var(--bg-raised)}

/* ---------- 7. Capability / feature cards ---------- */
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{--accent:var(--blue);--accent-rgb:var(--blue-rgb);position:relative;display:block;padding:26px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(165deg,rgba(var(--accent-rgb),.14),var(--bg-card) 60%);box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 0 1px rgba(var(--accent-rgb),.12)}
.card .ic{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.14);color:var(--accent);margin-bottom:16px}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:16.5px;margin-bottom:8px}
.card p{color:var(--muted);font-size:13.5px;line-height:1.55}
.card .pts{margin-top:14px;display:grid;gap:7px}
.card .pts li{display:flex;gap:8px;align-items:flex-start;color:var(--text-soft);font-size:12.5px}
.card .pts li:before{content:'✓';color:var(--accent);font-weight:800;flex:0 0 auto}

/* shared accent-rotation classes -- used by cards and tags alike */
.c-blue{--accent:var(--blue);--accent-rgb:var(--blue-rgb)}
.c-violet{--accent:var(--violet);--accent-rgb:var(--violet-rgb)}
.c-teal{--accent:var(--teal);--accent-rgb:var(--teal-rgb)}
.c-amber{--accent:var(--amber);--accent-rgb:var(--amber-rgb)}
.c-rose{--accent:var(--rose);--accent-rgb:var(--rose-rgb)}
.c-green{--accent:var(--green);--accent-rgb:var(--green-rgb)}
.c-cyan{--accent:var(--cyan);--accent-rgb:var(--cyan-rgb)}
.c-pink{--accent:var(--pink);--accent-rgb:var(--pink-rgb)}

/* ---------- 8. Split editorial (copy + visual) ---------- */
.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:center}
.split.reverse{direction:rtl}
.split.reverse>*{direction:ltr}
.split h2{font-size:clamp(26px,3.2vw,38px);margin:14px 0 14px}
.split p{color:var(--muted);font-size:15px;margin-bottom:18px}
.split .pts{display:grid;gap:12px;margin-bottom:22px}
.split .pts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-soft)}
.split .pts li b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(var(--blue-rgb),.18);color:var(--blue);display:grid;place-items:center;font-size:11px}
.split .visual{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-card);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.split .visual img{width:100%;height:auto;transition:transform .35s ease;cursor:zoom-in}
.split .visual:hover img{transform:scale(1.06)}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(3,4,7,.9);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:90vw;max-height:90vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);cursor:zoom-out}
.split.solo{grid-template-columns:1fr}
.split.solo>div{max-width:640px}
@media(max-width:860px){.split,.split.reverse{grid-template-columns:1fr;direction:ltr}}

/* ---------- 8b. Control/data-plane diagram (architecture.html) ----------
   The original synapse-topology-v2.png artwork stays exactly as designed;
   this only overlays animated dots on top of its own drawn lines (pixel
   coordinates measured directly from the 1672x941 source image) to show
   data actually moving along the paths it already depicts. */
.plane-diagram-frame{position:relative;aspect-ratio:1672/941;border-radius:var(--radius);overflow:hidden}
.visual.plane-diagram-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plane-diagram-frame .plane-overlay{position:absolute;inset:0;width:100%;height:100%}
.plane-overlay .data-dot{fill:var(--amber);filter:drop-shadow(0 0 10px rgba(var(--amber-rgb),.9))}
.plane-overlay .coord-dot{fill:var(--amber);opacity:.75;filter:drop-shadow(0 0 6px rgba(var(--amber-rgb),.7))}

/* ---------- 9. Pricing ---------- */
.pricing-grid{grid-template-columns:repeat(4,1fr)}
.plan{display:flex;flex-direction:column;padding:28px 24px}
.plan.featured{border-color:rgba(var(--violet-rgb),.6);box-shadow:0 0 0 1px rgba(var(--violet-rgb),.3),0 24px 60px rgba(var(--violet-rgb),.15)}
.plan-tag{font:800 10.5px 'DM Mono',monospace;letter-spacing:.12em;color:var(--violet);margin-bottom:10px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:2px 0 18px}
.plan-price .amt{font-size:36px;font-weight:800;letter-spacing:-.03em}
.plan-price .unit{color:var(--muted);font-size:12px}
.plan-limits{display:grid;gap:8px;margin-bottom:18px;font-size:13px;color:var(--text-soft)}
.plan .btn{width:100%;justify-content:center;margin-bottom:20px}
.plan-includes{font:700 12px Inter,Arial,sans-serif;color:var(--muted);margin-bottom:10px}
.plan ul{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:9px}
.plan li{display:flex;gap:8px;font-size:13px;color:var(--text-soft)}
.plan li:before{content:'✓';color:var(--teal);font-weight:800}
.plan-addon{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
@media(max-width:960px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pricing-grid{grid-template-columns:1fr}}

/* ---------- 10. Closing CTA ---------- */
.closing{position:relative;overflow:hidden;padding:100px 0;text-align:center;border-top:1px solid var(--line)}
.closing:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(var(--blue-rgb),.22),transparent 70%)}
.closing>*{position:relative;z-index:1}
.closing h2{font-size:clamp(28px,4vw,46px);max-width:720px;margin:14px auto 26px}

/* ---------- 11. Footer ---------- */
footer.site{padding:50px 0 34px;border-top:1px solid var(--line);color:var(--muted-dim)}
footer.site .top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px}
footer.site .brand{color:var(--text)}
footer.site .cols{display:flex;gap:56px;flex-wrap:wrap}
footer.site .col h4{color:var(--text);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
footer.site .col a{display:block;color:var(--muted-dim);font-size:13px;padding:5px 0;transition:color .15s}
footer.site .col a:hover{color:var(--text)}
footer.site .bottom{border-top:1px solid var(--line);padding-top:22px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- 12. Utility ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{border:1px solid rgba(var(--accent-rgb),.6);border-radius:99px;padding:8px 14px;font:700 11.5px 'DM Mono',monospace;color:#080a10;background:var(--accent);box-shadow:0 4px 16px rgba(var(--accent-rgb),.4);transition:filter .15s ease,box-shadow .15s ease}
.tag:hover{filter:brightness(1.12);box-shadow:0 6px 22px rgba(var(--accent-rgb),.6)}
.mono{font-family:'DM Mono',monospace}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;background:rgba(var(--blue-rgb),.16);color:var(--blue);font:700 10.5px 'DM Mono',monospace;letter-spacing:.06em}
.diagram-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--diagram-bg);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.diagram-frame img{width:100%;height:auto;display:block}
/* Below ~700px the diagrams' baked-in labels shrink past legibility if
   forced to 100% width -- let the frame scroll horizontally instead of
   squashing the image, same pattern as a wide table on mobile. */
@media(max-width:700px){
  .diagram-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram-frame img{width:auto;max-width:none;min-width:640px}
}
.diagram-caption{margin-top:12px;font-size:12.5px;color:var(--muted-dim);text-align:center}

/* ---------- 13. Ambient mesh background ----------
   A fixed full-viewport canvas (assets/mesh-bg.js draws it), masked so
   it's visible at the page's left/right edges and fades out behind the
   readable content column in the middle -- frames the page, never
   competes with reading it. z-index:0 + every real top-level element
   below explicitly set to z-index:1 is what keeps it behind content;
   see the z-index note on header.site/main/footer.site.
*/
#mesh-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 30%,transparent 70%,#000 88%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 30%,transparent 70%,#000 88%,#000 100%);
}
header.site,main,footer.site{position:relative;z-index:1}

/* ---------- 14. Hero moon (ported as-is from outputs/synapse-nexus-multitheme.html's
   moon-orbit-sunset animation, user's explicit choice among that file's four
   stacked variants -- same keyframe values, unmodified) ---------- */
.hero-moon{position:absolute;left:0;top:0;width:min(46vw,520px);pointer-events:none;z-index:0;transform-origin:50% 50%;animation:moon-orbit-sunset 30s linear infinite}
.hero-moon img{width:100%;height:auto;display:block;mix-blend-mode:screen}
@keyframes moon-orbit-sunset{
  0%{transform:translate3d(-72px,-280px,0) rotate(-18deg);opacity:0}
  10%{transform:translate3d(0,-220px,0) rotate(18deg);opacity:.84}
  30%{transform:translate3d(220px,-135px,0) rotate(95deg);opacity:.84}
  52%{transform:translate3d(430px,-45px,0) rotate(175deg);opacity:.84}
  74%{transform:translate3d(625px,55px,0) rotate(255deg);opacity:.82}
  90%{transform:translate3d(770px,135px,0) rotate(315deg);opacity:.55}
  100%{transform:translate3d(875px,230px,0) rotate(365deg);opacity:0}
}
@media(max-width:700px){
  .hero-moon{animation:moon-orbit-sunset-mobile 25s linear infinite}
  @keyframes moon-orbit-sunset-mobile{
    0%{transform:translate3d(-40px,-235px,0) rotate(-15deg);opacity:0}
    10%{transform:translate3d(0,-180px,0) rotate(16deg);opacity:.66}
    30%{transform:translate3d(110px,-105px,0) rotate(82deg);opacity:.66}
    52%{transform:translate3d(220px,-35px,0) rotate(158deg);opacity:.66}
    74%{transform:translate3d(310px,40px,0) rotate(230deg);opacity:.64}
    90%{transform:translate3d(375px,105px,0) rotate(290deg);opacity:.42}
    100%{transform:translate3d(420px,175px,0) rotate(350deg);opacity:0}
  }
}