/* ==========================================================================
   AI at SpringTech + Huxberry — shared stylesheet
   Aesthetic: "control room / blueprint" — premium-light editorial + technical schematic
   Brand: Huxberry (Inter, coral/sage/neutral). Mono accent for technical micro-labels.
   ========================================================================== */

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

/* ---- Design tokens ---- */
:root {
  /* Coral — interaction */
  --coral: #E16F62;
  --coral-dark: #C45A4E;
  --coral-light: #F5D4CF;

  /* Sage — knowledge / intelligence / nature */
  --sage-900: #2A3C2C;
  --sage-700: #3D5A40;
  --sage-500: #5E7D60;
  --sage-400: #7A9A7C;
  --sage-300: #A3BCA5;
  --sage-100: #D4E2D5;
  --sage-50:  #EFF4EF;

  /* Neutrals */
  --neutral-900: #1A1A1A;
  --neutral-800: #2E2E2E;
  --neutral-600: #555555;
  --neutral-500: #8A898D;
  --neutral-400: #9CA3AF;
  --neutral-300: #CCCCCC;
  --neutral-200: #E5E5E5;
  --neutral-100: #F2F2F2;
  --neutral-50:  #FAFAFA;
  --white: #FFFFFF;

  /* Host colour coding (for diagram chips) */
  --host-mac: #6B7280;
  --host-vps1: #C45A4E;
  --host-vps2: #5E7D60;
  --host-cloud: #4B7BA8;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;

  --maxw: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--neutral-800);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-dark); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { color: var(--neutral-900); margin: 0; }
h1 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-weight: 300; letter-spacing: -0.01em; line-height: 1.15; font-size: clamp(28px, 4vw, 44px); }
h3 { font-weight: 600; font-size: 20px; line-height: 1.3; }
p { margin: 0 0 var(--space-4); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-8); }
.section { padding: var(--space-24) 0; position: relative; }
.section--tight { padding: var(--space-16) 0; }
.section--dark { background: var(--neutral-900); color: var(--neutral-300); }
.section--sage { background: var(--sage-50); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-500);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px; background: var(--sage-400);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--sage-300); }

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--neutral-600); max-width: 62ch; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  transition: all 0.2s var(--ease);
}
.btn--primary { background: var(--coral); color: var(--white); }
.btn--primary:hover { background: var(--coral-dark); color: var(--white); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--neutral-900); border-color: var(--neutral-300); }
.btn--ghost:hover { background: var(--neutral-900); color: var(--white); border-color: var(--neutral-900); }
.section--dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.3); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--neutral-900); }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,250,250,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--neutral-200); background: rgba(255,255,255,0.9); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__brand { display: flex; align-items: center; gap: var(--space-3); }
.nav__brand img { height: 22px; width: auto; }
.nav__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--neutral-400); padding-left: var(--space-3); border-left: 1px solid var(--neutral-200);
}
.nav__links { display: flex; align-items: center; gap: var(--space-8); }
.nav__links a {
  font-size: 13px; font-weight: 500; color: var(--neutral-600); letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--neutral-900); }
.nav__links a.is-cta { color: var(--coral); }
.nav__toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: var(--space-24) 0 var(--space-20); overflow: hidden; }
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(94,125,96,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,125,96,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 78%);
}
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; right: -120px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,111,98,0.10), transparent 62%);
  filter: blur(8px);
}
.hero__inner { position: relative; z-index: 1; max-width: 920px; }
.hero h1 { font-size: clamp(40px, 6.4vw, 78px); margin-bottom: var(--space-6); }
.hero h1 .accent { color: var(--neutral-900); position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.12em;
  background: var(--coral); opacity: 0.85; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; animation: underline 0.9s var(--ease) 0.7s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.hero .lead { margin-bottom: var(--space-8); font-size: clamp(18px, 1.8vw, 22px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__meta {
  margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-family: var(--mono); font-size: 12px; color: var(--neutral-500); letter-spacing: 0.02em;
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-400); }

/* ==========================================================================
   Master diagram — "the whole machine"
   ========================================================================== */
.diagram-section { background: var(--white); border-top: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200); }
.diagram-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-8); }
.diagram-head .lead { margin-bottom: 0; }
.diagram-hint {
  font-family: var(--mono); font-size: 12px; color: var(--neutral-400);
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
}
.diagram-hint kbd {
  font-family: var(--mono); font-size: 11px; background: var(--neutral-100);
  border: 1px solid var(--neutral-200); border-radius: 4px; padding: 1px 6px; color: var(--neutral-600);
}
.diagram-scrollhint {
  display: none; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-family: var(--mono); font-size: 11px; color: var(--neutral-400); letter-spacing: 0.04em;
}

.diagram-wrap {
  position: relative; width: 100%; border: 1px solid var(--neutral-200); border-radius: var(--radius);
  background:
    linear-gradient(to right, rgba(26,26,26,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.025) 1px, transparent 1px),
    var(--neutral-50);
  background-size: 32px 32px, 32px 32px, auto;
  overflow: hidden;
}
/* fixed logical canvas that scales down (keeps 1180x760 ratio so % node coords stay valid) */
.diagram-canvas { position: relative; width: 100%; aspect-ratio: 1180 / 760; }
@media (max-width: 760px) {
  /* don't crush the schematic on phones — let it scroll horizontally at a legible width */
  .diagram-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram-canvas { min-width: 880px; }
  .diagram-scrollhint { display: flex !important; }
}

.diagram-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.edge {
  fill: none; stroke: var(--neutral-300); stroke-width: 1.4;
  opacity: 0.55; transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease), stroke-width 0.25s var(--ease);
}
.edge.is-active { stroke: var(--coral); opacity: 1; stroke-width: 2.4; }
.edge.is-dim { opacity: 0.12; }

/* Column band labels */
.band-label {
  position: absolute; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--neutral-400); top: 14px; transform: translateX(-50%);
  pointer-events: none;
}

/* Nodes */
.node {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: 10px;
  padding: 10px 12px; min-width: 116px; text-align: left;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.25s var(--ease);
  display: flex; flex-direction: column; gap: 3px;
}
.node:hover, .node:focus-visible { outline: none; border-color: var(--coral); box-shadow: 0 8px 22px rgba(26,26,26,0.10); transform: translate(-50%,-50%) translateY(-2px); z-index: 5; }
.node.is-active { border-color: var(--coral); box-shadow: 0 8px 22px rgba(26,26,26,0.12); z-index: 5; }
.node.is-dim { opacity: 0.32; }
.node__title { font-size: 13px; font-weight: 600; color: var(--neutral-900); line-height: 1.2; }
.node__sub { font-family: var(--mono); font-size: 10px; color: var(--neutral-500); letter-spacing: 0.01em; }
.node__host {
  position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--white);
}
.node[data-host="mac"]   .node__host { background: var(--host-mac); }
.node[data-host="vps1"]  .node__host { background: var(--host-vps1); }
.node[data-host="vps2"]  .node__host { background: var(--host-vps2); }
.node[data-host="cloud"] .node__host { background: var(--host-cloud); }
.node--accent { background: var(--neutral-900); border-color: var(--neutral-900); }
.node--accent .node__title { color: var(--white); }
.node--accent .node__sub { color: var(--neutral-400); }
.node--core { min-width: 132px; }

/* Cluster halo (subtle group tints) */
.cluster-zone {
  position: absolute; z-index: 0; border-radius: 16px; pointer-events: none;
  border: 1px dashed transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Diagram legend */
.diagram-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-6);
  align-items: center;
}
.legend-group { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--mono); font-size: 11px; color: var(--neutral-600); letter-spacing: 0.02em; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-sep { width: 1px; height: 16px; background: var(--neutral-200); }

/* ==========================================================================
   Value cards
   ========================================================================== */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }

.vcard {
  position: relative; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  scroll-margin-top: 90px;
}
.vcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,26,26,0.07); }
.vcard.is-flash { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-light); }
.vcard__idx {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--neutral-400);
  display: flex; align-items: center; gap: var(--space-2);
}
.vcard__idx .pip { width: 9px; height: 9px; border-radius: 50%; }
.vcard h3 { margin-top: var(--space-1); }
.vcard p { color: var(--neutral-600); font-size: 15px; margin: 0; }
.vcard__link {
  margin-top: auto; padding-top: var(--space-4);
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-2); color: var(--coral);
}
.vcard__link .arrow { transition: transform 0.2s var(--ease); }
.vcard:hover .vcard__link .arrow { transform: translateX(4px); }
.vcard__soon {
  position: absolute; top: var(--space-6); right: var(--space-6);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--neutral-400); background: var(--neutral-100); border: 1px solid var(--neutral-200);
  border-radius: 999px; padding: 2px 8px;
}

/* ==========================================================================
   Stats strip (dark feature band)
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-8) var(--space-6); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__num { font-size: clamp(32px, 4vw, 46px); font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -0.02em; }
.stat__num .unit { color: var(--coral); }
.stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-400); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--neutral-900); color: var(--neutral-400); padding: var(--space-20) 0 var(--space-12); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.footer__brand img { height: 26px; margin-bottom: var(--space-4); }
.footer__brand p { max-width: 38ch; font-size: 14px; color: var(--neutral-500); }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.footer__col h4 { color: var(--white); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-4); }
.footer__col a, .footer__col span { display: block; font-size: 14px; color: var(--neutral-400); margin-bottom: var(--space-3); }
.footer__col a:hover { color: var(--white); }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-family: var(--mono); font-size: 11px; color: var(--neutral-500); letter-spacing: 0.02em;
}
.footer__services { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.footer__services .sq { color: var(--coral); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width: 760px) {
  .container { padding: 0 var(--space-6); }
  .nav__tag { display: none; }
  .nav__inner { gap: var(--space-3); position: relative; }
  /* hamburger toggle */
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; border-radius: 9px; color: var(--neutral-900); transition: background 0.2s var(--ease); }
  .nav__toggle:active { background: var(--neutral-100); }
  .nav__toggle svg { width: 22px; height: 22px; }
  /* links collapse into a full-width dropdown panel */
  .nav__links {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-1) var(--space-6) var(--space-4);
    background: var(--white);
    border-bottom: 1px solid var(--neutral-200); box-shadow: 0 22px 34px -18px rgba(26,26,26,0.22);
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), max-height 0.3s var(--ease);
  }
  .nav.nav--open .nav__links { max-height: 80vh; opacity: 1; pointer-events: auto; transform: none; overflow-y: auto; }
  .nav__links a { font-size: 16px; padding: 14px 2px; border-bottom: 1px solid var(--neutral-100); color: var(--neutral-800); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a.is-cta { color: var(--coral); }
  .nav__links a.is-active { color: var(--neutral-900); font-weight: 600; }
  .nav__links a.is-active::after { display: none; }
  .hero__meta { gap: var(--space-4); }
}

/* ==========================================================================
   Detail-page components
   ========================================================================== */

/* nav active state + wrap room for 6 page links */
.nav__links a.is-active { color: var(--neutral-900); }
.nav__links a.is-active::after {
  content: ""; display: block; height: 2px; background: var(--coral);
  border-radius: 2px; margin-top: 3px;
}
@media (min-width: 761px) and (max-width: 1080px) { .nav__links { gap: var(--space-6); } }

/* Page hero (lighter than landing hero) */
.page-hero { position: relative; padding: var(--space-20) 0 var(--space-12); overflow: hidden; }
.page-hero .hero__grid-bg { mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 20%, transparent 80%); }
.page-hero__inner { position: relative; z-index: 1; max-width: 860px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: var(--space-5, 20px); }
.page-hero .lead { font-size: clamp(17px, 1.7vw, 21px); }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--neutral-400); letter-spacing: 0.04em; margin-bottom: var(--space-6); }
.crumbs a { color: var(--neutral-500); } .crumbs a:hover { color: var(--coral); }

/* Section intro */
.section-intro { max-width: 70ch; margin-bottom: var(--space-12); }
.section-intro h2 { margin-bottom: var(--space-4); }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px;
  background: var(--neutral-100); color: var(--neutral-600); border: 1px solid var(--neutral-200);
  white-space: nowrap;
}
.chip--sage { background: var(--sage-100); color: var(--sage-700); border-color: transparent; }
.chip--coral { background: var(--coral-light); color: var(--coral-dark); border-color: transparent; }
.chip--dark { background: var(--neutral-900); color: var(--white); border-color: transparent; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Generic grids */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Generic panel/card */
.panel {
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius);
  padding: var(--space-8); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.panel--hover:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,26,26,0.07); }
.panel h3 { margin-bottom: var(--space-2); }
.panel h4 { font-size: 15px; margin-bottom: var(--space-2); }
.panel p { color: var(--neutral-600); font-size: 15px; margin: 0; }
.panel__idx { font-family: var(--mono); font-size: 12px; color: var(--neutral-400); letter-spacing: 0.08em; margin-bottom: var(--space-3); display:block; }

/* Flow / pipeline steps */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
.flow__step {
  flex: 1 1 0; min-width: 180px; background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: var(--radius); padding: var(--space-6); position: relative;
}
.flow__arrow { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; color: var(--neutral-300); font-size: 20px; }
.flow__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--coral); margin-bottom: var(--space-2); }
.flow__step h4 { font-size: 15px; margin-bottom: var(--space-2); }
.flow__step p { font-size: 13px; color: var(--neutral-600); margin: 0; }
.flow__tag { margin-top: var(--space-3); }
@media (max-width: 820px) {
  .flow { flex-direction: column; overflow: visible; }
  .flow__arrow { transform: rotate(90deg); height: 28px; }
}

/* Profile cards (Hermes) */
.profile { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius); overflow: hidden; }
.profile__head { padding: var(--space-8); border-bottom: 1px solid var(--neutral-200); background: linear-gradient(180deg, var(--neutral-50), var(--white)); }
.profile__name { font-family: var(--mono); font-size: 13px; color: var(--coral); letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.profile__head h3 { margin-bottom: var(--space-3); }
.profile__head p { color: var(--neutral-600); margin: 0 0 var(--space-4); }
.profile__body { padding: var(--space-8); display: grid; gap: var(--space-6); }
.pblock h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-400); margin-bottom: var(--space-3); }
.tasklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tasklist li { font-size: 14px; color: var(--neutral-700, #404040); padding-left: var(--space-5); position: relative; }
.tasklist li::before { content: "→"; position: absolute; left: 0; color: var(--sage-500); }
.tasklist li .when { font-family: var(--mono); font-size: 11px; color: var(--neutral-400); }

/* ==========================================================================
   Ingestion diagram (GBrain) — directional, arrowed
   ========================================================================== */
.ingest-wrap {
  position: relative; border: 1px solid var(--neutral-200); border-radius: var(--radius);
  background:
    linear-gradient(to right, rgba(94,125,96,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,125,96,0.04) 1px, transparent 1px),
    var(--white);
  background-size: 32px 32px, 32px 32px, auto; overflow: hidden;
}
.ingest-canvas { position: relative; width: 100%; aspect-ratio: 1180 / 860; }
@media (max-width: 820px) { .ingest-wrap { overflow-x: auto; } .ingest-canvas { min-width: 900px; } }
.ingest-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.iedge { fill: none; stroke-width: 1.5; opacity: 0.45; transition: opacity 0.25s var(--ease), stroke-width 0.25s var(--ease); }
.iedge--in  { stroke: var(--sage-400); }
.iedge--out { stroke: var(--coral); }
.iedge.is-active { opacity: 1; stroke-width: 2.6; }
.iedge.is-dim { opacity: 0.1; }
.ihub {
  position: absolute; z-index: 2; transform: translate(-50%,-50%); left: 52.5%; top: 50%;
  width: 210px; background: var(--neutral-900); color: var(--white); border-radius: 14px;
  padding: var(--space-6); text-align: center; box-shadow: 0 14px 40px rgba(26,26,26,0.18);
}
.ihub h3 { color: var(--white); font-size: 22px; margin-bottom: 4px; }
.ihub .ihub__sub { font-family: var(--mono); font-size: 11px; color: var(--neutral-400); letter-spacing: 0.04em; display: block; margin-bottom: var(--space-3); }
.ihub__caps { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.ihub__caps span { font-family: var(--mono); font-size: 10px; color: var(--sage-300); border: 1px solid rgba(163,188,165,0.3); border-radius: 999px; padding: 2px 7px; }
.ihub__dream { margin-top: var(--space-3); font-family: var(--mono); font-size: 10px; color: var(--coral); }
.inode {
  position: absolute; z-index: 2; transform: translate(-50%,-50%);
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: 8px;
  padding: 7px 10px; min-width: 124px; text-align: left; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.25s var(--ease), transform 0.18s var(--ease);
}
.inode:hover, .inode:focus-visible { outline: none; border-color: var(--sage-500); box-shadow: 0 6px 18px rgba(26,26,26,0.10); transform: translate(-50%,-50%) translateY(-1px); z-index: 5; }
.inode.is-dim { opacity: 0.3; }
.inode__title { font-size: 12.5px; font-weight: 600; color: var(--neutral-900); line-height: 1.15; }
.inode__meta { font-family: var(--mono); font-size: 10px; color: var(--neutral-500); }
.inode__count { position: absolute; top: -8px; right: -8px; background: var(--sage-100); color: var(--sage-700); font-family: var(--mono); font-size: 10px; font-weight: 600; border-radius: 999px; padding: 1px 7px; border: 2px solid var(--white); }
.inode--out .inode__count { background: var(--coral-light); color: var(--coral-dark); }
.ingest-label { position: absolute; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-400); transform: translateX(-50%); pointer-events: none; }

/* Source detail table */
.srctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.srctable th, .srctable td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-200); vertical-align: top; }
.srctable th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-400); font-weight: 600; }
.srctable td:first-child { font-weight: 600; color: var(--neutral-900); white-space: nowrap; }
.srctable .num { font-family: var(--mono); color: var(--sage-700); white-space: nowrap; }
.srctable tr:hover td { background: var(--neutral-50); }

/* Host / system / app cards */
.host-card .host-card__where { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--neutral-500); margin-bottom: var(--space-3); }
.host-card__dot { width: 9px; height: 9px; border-radius: 50%; }
.runs { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.runs li { font-size: 13.5px; color: var(--neutral-600); padding-left: var(--space-4); position: relative; }
.runs li::before { content: "·"; position: absolute; left: 4px; color: var(--coral); font-weight: 700; }

/* Callout */
.callout {
  border-left: 3px solid var(--sage-300); background: var(--sage-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-6); font-size: 14px; color: var(--neutral-600);
}
.callout--coral { border-left-color: var(--coral); background: var(--coral-light); color: var(--coral-dark); }
.callout strong { color: var(--neutral-900); }

/* Continue exploring */
.continue { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 760px) { .continue { grid-template-columns: 1fr; } }
.continue a {
  display: flex; flex-direction: column; gap: 4px; padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); color: var(--neutral-300);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.continue a:hover { border-color: var(--coral); background: rgba(255,255,255,0.04); color: var(--white); }
.continue a .c-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--neutral-500); }
.continue a .c-title { font-size: 17px; color: var(--white); }
.continue a .c-arrow { color: var(--coral); font-size: 14px; }

/* ==========================================================================
   Icon system + visual upgrades (icons, richer cards, hero motif)
   ========================================================================== */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }

/* --- diagram node icons (injected by JS from a node→icon map) --- */
.node { grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 1px; }
.node.has-ic { display: grid; }
.node__ic { grid-column: 1; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--neutral-500); }
.node__title, .node.has-ic .node__sub { grid-column: 2; }
.node--accent .node__ic { color: var(--sage-300); }
.node--core .node__ic { color: var(--coral); }
.inode { }
.inode.has-ic { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 1px; }
.inode__ic { grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--sage-500); }
.inode--out .inode__ic { color: var(--coral); }
.inode.has-ic .inode__title, .inode.has-ic .inode__meta { grid-column: 2; }

/* calmer resting edges (clarity comes on hover) */
.edge { opacity: 0.32; }

/* --- richer cards: refined elevation --- */
.panel { box-shadow: 0 1px 2px rgba(26,26,26,0.04); }
.panel--hover:hover { box-shadow: 0 18px 40px -14px rgba(26,26,26,0.18); }
.vcard:hover { box-shadow: 0 18px 40px -14px rgba(26,26,26,0.16); }

/* panel icon chip (systems / apps / concept cards) */
.panel__ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--neutral-100); color: var(--neutral-700, #404040); margin-bottom: var(--space-4);
}
.panel__ic .ic { width: 21px; height: 21px; }
.panel__ic--sage { background: var(--sage-100); color: var(--sage-700); }
.panel__ic--coral { background: var(--coral-light); color: var(--coral-dark); }
.panel__ic--cloud { background: #E4EDF4; color: var(--host-cloud); }

/* --- value cards: 2-up, iconed, cluster-accented --- */
.value-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }
.vcard { border-top: 3px solid var(--neutral-200); }
.vcard__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: var(--space-2); background: var(--neutral-100); color: var(--neutral-700, #404040); }
.vcard__ic .ic { width: 23px; height: 23px; }
.vcard--sage  { border-top-color: var(--sage-400); }
.vcard--sage .vcard__ic  { background: var(--sage-100); color: var(--sage-700); }
.vcard--coral { border-top-color: var(--coral); }
.vcard--coral .vcard__ic { background: var(--coral-light); color: var(--coral-dark); }
.vcard--cloud { border-top-color: var(--host-cloud); }
.vcard--cloud .vcard__ic { background: #E4EDF4; color: var(--host-cloud); }
.vcard h3 { font-size: 21px; }

/* chips with icons */
.chip .ic { width: 13px; height: 13px; margin-right: 1px; }

/* --- hero constellation motif (two-column hero on desktop) --- */
.hero__inner { position: relative; max-width: var(--maxw); display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-12); }
.hero__art { width: 100%; z-index: 1; pointer-events: none; }
@media (max-width: 980px) { .hero__inner { display: block; } .hero__art { display: none; } }
.ha-edge { fill: none; stroke: var(--sage-400); stroke-width: 1.4; opacity: 0.5; stroke-dasharray: 2.5 11; animation: hux-flow 1.5s linear infinite; }
.ha-edge.ha-edge--coral { stroke: var(--coral); }
.ha-node circle { fill: var(--white); stroke: var(--neutral-300); stroke-width: 1.4; }
.ha-node--accent circle { fill: var(--neutral-900); stroke: var(--neutral-900); }
.ha-halo { fill: var(--coral); opacity: 0.12; animation: ha-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ha-halo--sage { fill: var(--sage-500); }
.ha-node text { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--neutral-500); text-transform: uppercase; }
.ha-node--accent text { fill: var(--neutral-900); font-weight: 600; }
@keyframes ha-pulse { 0%,100% { opacity: 0.08; } 50% { opacity: 0.22; } }
@media (max-width: 980px) { .hero__art { display: none; } }

/* dm-node / im-row icons (mobile mirror) */
.dm-node .ic { width: 15px; height: 15px; color: var(--neutral-500); }
.dm-plane--infra .dm-node .ic { color: var(--neutral-400); }
.im-row .ic { width: 14px; height: 14px; color: var(--sage-500); margin-right: 6px; vertical-align: -2px; }
.im-row--out .ic { color: var(--coral); }

/* ==========================================================================
   Mobile diagram mirrors
   The spatial node canvases are desktop-only. On phones we hide them and show a
   readable, stacked vertical layout carrying the same content. Tap a card to drill in.
   ========================================================================== */
.diagram-mobile, .ingest-mobile { display: none; }
.dm-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-400); margin: 0 0 var(--space-3); }
.dm-plane { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius); padding: var(--space-5, 20px); }
.dm-plane--infra { background: var(--neutral-900); border-color: var(--neutral-900); }
.dm-plane--infra .dm-label { color: var(--neutral-500); }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dm-node {
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--neutral-200); border-radius: 9px;
  background: var(--neutral-50); font-size: 13px; font-weight: 600; color: var(--neutral-900); line-height: 1.2;
  transition: border-color 0.2s var(--ease);
}
.dm-node:active { border-color: var(--coral); }
.dm-plane--infra .dm-node { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: var(--white); }
.dm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--neutral-400); }
.dm-dot[data-host="mac"]   { background: var(--host-mac); }
.dm-dot[data-host="vps1"]  { background: var(--host-vps1); }
.dm-dot[data-host="vps2"]  { background: var(--host-vps2); }
.dm-dot[data-host="cloud"] { background: var(--host-cloud); }
.dm-flow { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--coral); padding: 2px 0; }

/* ingestion mobile */
.im-group { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius); padding: var(--space-5, 20px); }
.im-rows { display: grid; gap: 6px; }
.im-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 9px 12px; border: 1px solid var(--neutral-200); border-radius: 8px;
  background: var(--neutral-50); font-size: 13px;
}
.im-row .im-name { font-weight: 600; color: var(--neutral-900); }
.im-count { font-family: var(--mono); font-size: 11px; color: var(--sage-700); background: var(--sage-100); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.im-row--out .im-count { color: var(--coral-dark); background: var(--coral-light); }
.im-hub { background: var(--neutral-900); color: var(--white); border-radius: var(--radius); padding: var(--space-6); text-align: center; }
.im-hub strong { font-size: 22px; display: block; margin-bottom: 2px; }
.im-hub span { font-family: var(--mono); font-size: 11px; color: var(--neutral-400); line-height: 1.5; }

@media (max-width: 760px) {
  /* keep the INTERACTIVE schematic on phones — pan to explore, tap a node to trace.
     (the stacked mirror stays in the markup but hidden, as a fallback to flip back to.) */
  .diagram-mobile, .ingest-mobile { display: none; }
  .diagram-hint { display: none; }                 /* hover hint is irrelevant on touch */
  .diagram-scrollhint { display: flex !important; } /* "swipe to explore" affordance */
  .ingest-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ingest-canvas { min-width: 880px; }
  /* tighter vertical rhythm on phones */
  .section { padding: var(--space-16) 0; }
  .section--tight { padding: var(--space-12) 0; }
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .page-hero { padding: var(--space-12) 0 var(--space-8); }
  .diagram-head { margin-bottom: var(--space-6); }
}

/* ==========================================================================
   Motion — assemble-on-view + data-flow pulses
   CSS-only, iOS-safe: only opacity + stroke animate (GPU-composited, no layout
   thrash, no scroll-pinning). Resting state is always visible — the entrance is
   an `animation` (not a persistent opacity:0), so if JS never fires or motion is
   reduced, nodes/edges simply show normally. Triggered by JS adding .is-live /
   .is-flowing when a schematic scrolls into view; .is-flowing is removed when it
   leaves view so flow pulses pause off-screen (battery).
   ========================================================================== */
@keyframes hux-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hux-node-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes hux-flow { to { stroke-dashoffset: -16; } }

/* edge layer fades in as the diagram assembles */
#diagram.is-live .diagram-svg,
#ingest.is-live .ingest-svg { animation: hux-layer-in 0.7s var(--ease) backwards; }

/* nodes stagger in — only while assembling; resting transform/opacity untouched so hover still works */
#diagram.is-live .node,
#ingest.is-live .inode,
#ingest.is-live .ihub {
  animation: hux-node-in 0.5s var(--ease) backwards;
  animation-delay: calc(150ms + var(--i, 0) * 32ms);
}

/* ingestion diagram: ambient data-flow along every arrow (paused off-screen) */
#ingest.is-flowing .iedge { stroke-dasharray: 2.5 13.5; animation: hux-flow 1.05s linear infinite; }
/* master diagram: flow only along the path you're tracing (hover-active) — purposeful, not busy */
#diagram .edge.is-active { stroke-dasharray: 3 10; animation: hux-flow 0.9s linear infinite; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .accent::after { transform: scaleX(1); }
  /* keep edges solid (no leftover dashes) for reduced-motion users */
  #ingest .iedge, #diagram .edge { stroke-dasharray: none !important; }
}