/* =========================================================
   IAI FLOW
   LAYOUT SYSTEM
   Version: platform-grade unified
========================================================= */

.site-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-main{
  flex:1 1 auto;
  width:100%;
}

.container,
.shell{
  width:min(100%, var(--max, 1280px));
  margin-inline:auto;
  padding-inline:20px;
}

/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  width:100%;
}

.header-inner,
.site-header-inner{
  position:relative;
  min-height:var(--header-h, 76px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.nav-group{
  display:flex;
  align-items:center;
  gap:18px;
}

/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  padding:56px 0 24px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(320px,.76fr);
  gap:22px;
  align-items:stretch;
}

.hero-main{
  position:relative;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}

.hero-main > *{
  position:relative;
  z-index:1;
}

.hero-main::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(127,211,255,.08), transparent 26%),
    radial-gradient(circle at bottom right, rgba(110,231,200,.06), transparent 24%);
}

.hero-title{
  max-width:940px;
  margin-top:18px;
  font-size:clamp(40px, 7vw, 76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.hero-desc,
.home-hero-sub{
  max-width:780px;
  margin-top:0;
  font-size:18px;
  line-height:1.72;
  color:var(--muted);
}

.hero-side{
  display:grid;
  gap:14px;
  align-content:start;
}

.side-card{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.side-card h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.03em;
}

.side-card p{
  margin:0;
}

.side-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  line-height:1;
}

/* =========================================================
   SECTION SYSTEM
========================================================= */

.section{
  position:relative;
  padding:0;
}

.section > .container,
.section > .shell{
  position:relative;
}

.section + .section{
  margin-top:24px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:18px;
}

.section-head > div{
  min-width:0;
}

.section-head h2{
  max-width:900px;
}

.section-head p,
.section-desc{
  max-width:780px;
}

.section-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   GRID SYSTEMS
========================================================= */

.grid{
  display:grid;
  gap:18px;
  align-items:stretch;
}

.grid.grid-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.grid.grid-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.grid.grid-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.grid.grid-2 > *,
.grid.grid-3 > *,
.grid.grid-4 > *{
  min-width:0;
}

.grid-equal > *{
  height:100%;
}

.compare{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.faq{
  display:grid;
  gap:12px;
}

.faq-item{
  padding:18px 20px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.faq-item h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.03em;
}

.faq-item p{
  margin:0;
}

/* =========================================================
   HOME PAGE BLOCKS
========================================================= */

.home-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(320px,.76fr);
  gap:22px;
  align-items:stretch;
}

.home-hero-main{
  min-height:600px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}

.home-hero-title{
  max-width:920px;
  font-size:clamp(40px, 7vw, 76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.home-kpi-grid,
.hero-kpis,
.app-kpi,
.dash-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}

.home-side-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
  height:100%;
}

.home-section-grid,
.docs-grid,
.dev-grid,
.nodes-grid,
.app-grid,
.dash-grid,
.wf-grid,
.agent-grid,
.monitor-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.home-card,
.docs-card,
.dev-card,
.node-card,
.app-card,
.dash-card,
.wf-card,
.agent-card,
.monitor-card{
  height:100%;
}

.home-banner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
  align-items:stretch;
}

.home-banner-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-banner-side{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.home-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:24px;
}

.home-footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* =========================================================
   DIAGRAM / VISUAL FLOW (legacy + homepage)
========================================================= */

.diagram{
  overflow:hidden;
}

.diagram-flow{
  display:grid;
  grid-template-columns:repeat(9, minmax(0,1fr));
  gap:12px;
  align-items:center;
}

.diagram-step{
  min-height:96px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-weight:700;
  line-height:1.4;
}

.diagram-arrow{
  display:grid;
  place-items:center;
  color:var(--accent);
  text-align:center;
  font-size:28px;
  font-weight:900;
  line-height:1;
}

/* =========================================================
   CTA BAND
========================================================= */

.cta-band{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}

.cta-band > div{
  min-width:0;
}

.cta-band h2{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 42px);
  letter-spacing:-.045em;
}

.cta-band p{
  max-width:760px;
}

/* =========================================================
   APP SHELL PAGES
========================================================= */

.app-shell,
.runtime-shell,
.builder-shell{
  width:100%;
}

.app-grid .app-card,
.dash-grid .dash-card,
.wf-grid .wf-card,
.agent-grid .agent-card{
  min-height:240px;
}

.runtime-shell{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.runtime-panel,
.runtime-results{
  min-width:0;
}

.runtime-stack{
  display:grid;
  gap:18px;
}

.builder-shell{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 320px;
  gap:18px;
  min-height:calc(100vh - 220px);
  align-items:start;
}

.builder-panel,
.builder-canvas-wrap{
  min-width:0;
}

.builder-canvas-wrap{
  min-height:700px;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer,
.footer{
  width:100%;
  padding:48px 0 32px;
  border-top:1px solid var(--line);
  margin-top:80px;
}

.footer-inner{
  width:100%;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3, minmax(0, 1fr));
  gap:32px;
  align-items:start;
}

.footer-grid h3{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links a{
  font-size:14px;
  color:var(--muted);
  transition:color .18s ease;
}

.footer-links a:hover{
  color:var(--text);
}

.footer-links a{
  position:relative;
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:rgba(127,211,255,.45);
  transition:width .18s ease;
}

.footer-links a:hover::after{
  width:100%;
}

/* =========================================================
   STATES
========================================================= */

.is-muted{
  color:var(--muted);
}

.is-success{
  color:var(--success);
}

.is-warning{
  color:var(--warning);
}

.is-danger{
  color:var(--danger);
}

/* =========================================================
   HOME DIAGRAM BLOCK
========================================================= */

.home-diagram{
  margin-top:8px;
}

.diagram-head{
  align-items:start;
  margin-bottom:16px;
}

.diagram-title{
  margin:0 0 6px;
  font-size:24px !important;
  letter-spacing:-.04em;
}

.diagram-sub{
  max-width:760px;
}

.diagram-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.diagram-controls .btn.is-active{
  background:rgba(127,211,255,.12);
  border-color:rgba(127,211,255,.34);
}

.diagram-stage{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:16px;
  align-items:stretch;
}

.diagram-canvas{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.diagram-canvas::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,255,.18), transparent);
  transform:translateY(-50%);
  pointer-events:none;
}

.diagram-node{
  position:relative;
  min-height:180px;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    opacity .24s ease;
  z-index:1;
}

.diagram-node:hover{
  transform:translateY(-2px);
  border-color:rgba(127,211,255,.25);
}

.diagram-node.is-active{
  border-color:rgba(127,211,255,.48);
  background:
    radial-gradient(circle at top left, rgba(127,211,255,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 18px 44px rgba(127,211,255,.14);
}

.diagram-node.is-done{
  border-color:rgba(110,231,200,.34);
}

.diagram-node.is-idle{
  opacity:.9;
}

.diagram-node-head{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:10px;
  margin-bottom:12px;
}

.diagram-node-head strong{
  display:block;
  font-size:18px;
  line-height:1.2;
}

.diagram-node-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.diagram-node-copy{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  min-height:68px;
}

.diagram-node-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  text-transform:capitalize;
}

.diagram-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:none;
  transition:background .24s ease, box-shadow .24s ease;
}

.diagram-node.is-active .diagram-dot{
  background:var(--accent);
  box-shadow:0 0 18px rgba(127,211,255,.48);
}

.diagram-node.is-done .diagram-dot{
  background:var(--accent-3);
  box-shadow:0 0 18px rgba(110,231,200,.35);
}

.diagram-edges{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.diagram-edge{
  position:absolute;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(127,211,255,.10), rgba(127,211,255,.30), rgba(127,211,255,.10));
  opacity:.45;
  transition:opacity .24s ease, background .24s ease;
}

.diagram-edge.is-active{
  opacity:1;
  background:linear-gradient(90deg, rgba(127,211,255,.25), rgba(127,211,255,.85), rgba(110,231,200,.35));
}

.edge-goal-planner{
  left:17%;
  width:12%;
}

.edge-planner-nodes{
  left:37%;
  width:12%;
}

.edge-nodes-runtime{
  left:57%;
  width:12%;
}

.edge-runtime-logs{
  left:77%;
  width:10%;
}

.diagram-console{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.diagram-console-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.diagram-console-top strong{
  font-size:16px;
  letter-spacing:-.03em;
}

.diagram-console-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--accent);
  font-size:12px;
  text-transform:uppercase;
}

.diagram-console-output{
  flex:1 1 auto;
  min-height:240px;
  max-height:320px;
  overflow:auto;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

.diagram-console-line{
  display:block;
  margin:0 0 8px;
  line-height:1.55;
  word-break:break-word;
}

.diagram-console-line:last-child{
  margin-bottom:0;
}

.diagram-console-line.is-muted{
  opacity:.82;
}

.diagram-console-line.is-success{
  color:#bdf5e6;
}

.diagram-console-line.is-active{
  color:#bfe9ff;
}

.diagram-console-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.diagram-console-stat{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.diagram-console-stat .label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
}

.diagram-console-stat strong{
  display:block;
  font-size:15px;
  letter-spacing:-.02em;
  text-transform:capitalize;
}

/* =========================================================
   IAI FLOW INTERACTIVE WORKFLOW SYSTEM
   Unified with interactive-workflow.js
========================================================= */

.iflow{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.iflow-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.iflow-preset-meta{
  max-width:560px;
}

.iflow-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(127,211,255,.22);
  background:rgba(127,211,255,.08);
  color:var(--accent);
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.iflow-title{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:-.04em;
}

.iflow-description{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.iflow-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.iflow-preset,
.iflow-run{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.iflow-preset:hover,
.iflow-run:hover{
  border-color:rgba(127,211,255,.28);
  background:rgba(255,255,255,.06);
}

.iflow-preset.is-active{
  background:rgba(127,211,255,.12);
  border-color:rgba(127,211,255,.34);
  color:var(--text);
}

.iflow-run:hover{
  transform:translateY(-1px);
}

.iflow-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:30px;
  align-items:stretch;
}

.iflow-graph{
  position:relative;
  display:flex;
  gap:14px;
  padding:30px 10px;
  align-items:stretch;
}

.iflow-rail{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateY(-50%);
  pointer-events:none;
}

.iflow-edge{
  position:absolute;
  top:50%;
  height:2px;
  background:linear-gradient(90deg, rgba(127,211,255,.15), rgba(127,211,255,.45), rgba(127,211,255,.15));
  opacity:.26;
  transform:translateY(-50%);
  transition:opacity .32s ease, background .32s ease;
}

.iflow-edge.is-active{
  opacity:1;
  background:linear-gradient(90deg, rgba(127,211,255,.25), rgba(127,211,255,.9), rgba(110,231,200,.30));
}

.iflow-edge-1{left:11%; width:18%}
.iflow-edge-2{left:31%; width:18%}
.iflow-edge-3{left:51%; width:18%}
.iflow-edge-4{left:71%; width:18%}

.iflow-node{
  position:relative;
  z-index:2;
  flex:1;
  min-width:160px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    opacity .28s ease;
}

.iflow-node:hover{
  transform:translateY(-2px);
  border-color:rgba(127,211,255,.24);
}

.iflow-node-head{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:10px;
}

.iflow-node-title{
  font-size:14px;
  line-height:1.35;
}

.iflow-node-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.iflow-node-copy{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  min-height:56px;
}

.iflow-node-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  text-transform:capitalize;
  color:var(--muted);
}

.iflow-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .26s ease, box-shadow .26s ease, transform .26s ease;
}

.iflow-node.is-idle{
  opacity:.58;
}

.iflow-node.is-active{
  border-color:rgba(127,211,255,.42);
  background:
    radial-gradient(circle at top left, rgba(127,211,255,.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 18px 40px rgba(127,211,255,.12);
  transform:translateY(-4px);
}

.iflow-node.is-active .iflow-dot{
  background:var(--accent);
  box-shadow:0 0 18px rgba(127,211,255,.46);
  animation:iflowPulse 1.3s infinite;
}

.iflow-node.is-done{
  border-color:rgba(110,231,200,.34);
}

.iflow-node.is-done .iflow-dot{
  background:#3fd1a5;
  box-shadow:0 0 18px rgba(63,209,165,.28);
}

.iflow-console{
  display:flex;
  flex-direction:column;
  min-height:100%;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
}

.iflow-console-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

.iflow-console-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:11px;
  text-transform:uppercase;
}

.iflow-console-output{
  flex:1;
  overflow:auto;
  padding:14px 16px;
  font-family:var(--mono);
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:rgba(0,0,0,.14);
}

.iflow-console-line{
  opacity:.88;
  line-height:1.55;
  word-break:break-word;
}

.iflow-console-line.is-active{
  color:#bfe9ff;
}

.iflow-console-line.is-success{
  color:#bdf5e6;
}

.iflow-console-line.is-muted{
  opacity:.52;
}

.iflow-console-meta{
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:10px 14px;
  font-size:12px;
}

.iflow-console-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.iflow-console-meta-item .label{
  color:var(--muted);
  font-size:11px;
}

@keyframes iflowPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1260px){
  .builder-shell{
    grid-template-columns:1fr;
  }

  .builder-canvas-wrap{
    order:1;
  }

  .hero-grid,
  .home-hero-grid,
  .home-banner,
  .cta-band{
    grid-template-columns:1fr;
  }

  .home-footer-grid{
    grid-template-columns:1fr;
  }

  .diagram-stage,
  .iflow-stage{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px){
  .grid.grid-4{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .footer-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .grid.grid-3,
  .grid.grid-2,
  .compare,
  .home-section-grid,
  .docs-grid,
  .dev-grid,
  .nodes-grid,
  .app-grid,
  .dash-grid,
  .wf-grid,
  .agent-grid,
  .monitor-grid{
    grid-template-columns:1fr;
  }

  .hero-kpis,
  .home-kpi-grid,
  .app-kpi,
  .dash-kpis{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .diagram-flow{
    grid-template-columns:1fr;
  }

  .diagram-arrow{
    display:none;
  }

  .runtime-shell{
    grid-template-columns:1fr;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .diagram-canvas{
    grid-template-columns:1fr;
  }

  .diagram-canvas::before,
  .diagram-edges{
    display:none;
  }

  .diagram-node{
    min-height:auto;
  }

  .diagram-node-copy{
    min-height:auto;
  }

  .iflow-graph{
    flex-direction:column;
    padding:0;
  }

  .iflow-rail,
  .iflow-edge{
    display:none;
  }

  .iflow-node{
    min-width:0;
  }

  .iflow-node-copy{
    min-height:auto;
  }
}

/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 900px){
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .site-nav[data-nav],
  .nav{
    display:none;
  }

  .site-nav[data-nav].is-open,
  .nav.is-open{
    display:flex;
    position:absolute;
    top:calc(var(--header-h) - 8px);
    left:0;
    right:0;
    margin-inline:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(7,16,25,.96);
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .site-nav[data-nav].is-open .nav-cta,
  .nav.is-open .nav-cta{
    width:100%;
    justify-content:center;
  }

  body.nav-open{
    overflow:hidden;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px){
  .container,
  .shell{
    padding-inline:14px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .site-main{
    padding-bottom:28px;
  }

  .section{
    margin-top:64px;
  }

  .section-tight{
    margin-top:44px;
  }

  .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .section-head h2{
    font-size:30px;
  }

  .hero{
    padding-top:32px;
  }

  .hero-main,
  .home-hero-main{
    min-height:auto;
  }

  .hero-title,
  .home-hero-title{
    font-size:clamp(34px, 11vw, 52px);
  }

  .hero-desc,
  .home-hero-sub{
    font-size:16px;
  }

  .hero-kpis,
  .home-kpi-grid,
  .app-kpi,
  .dash-kpis{
    grid-template-columns:1fr;
  }

  .header-actions{
    gap:8px;
  }

  .card,
  .callout,
  .feature-card,
  .story-card,
  .roadmap-card,
  .docs-card,
  .platform-card,
  .home-card,
  .app-card,
  .dash-card,
  .wf-card,
  .agent-card,
  .monitor-card,
  .settings-card,
  .faq-item,
  .diagram,
  .cta-band{
    padding:20px;
    border-radius:18px;
  }

  .builder-panel,
  .runtime-panel,
  .runtime-results{
    padding:18px;
  }

  .btn{
    width:auto;
    max-width:100%;
  }

  .hero-actions,
  .section-actions{
    width:100%;
  }

  .hero-actions .btn,
  .section-actions .btn{
    flex:1 1 100%;
  }

  .lang-switch{
    width:auto;
  }

  .home-mobile-menu{
    display:block;
  }

  .diagram-controls{
    width:100%;
  }

  .diagram-controls .btn{
    flex:1 1 calc(50% - 8px);
  }

  .diagram-console-meta,
  .iflow-console-meta{
    grid-template-columns:1fr;
  }

  .diagram-console-output{
    min-height:200px;
    max-height:260px;
  }

  .iflow-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .iflow-actions{
    width:100%;
  }

  .iflow-preset,
  .iflow-run{
    flex:1 1 calc(50% - 8px);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px){
  .brand{
    font-size:20px;
  }

  .header-inner,
  .site-header-inner{
    gap:12px;
  }

  .header-actions{
    width:auto;
  }

  .hero-title,
  .home-hero-title{
    letter-spacing:-.05em;
  }

  .side-card,
  .quick-card{
    padding:16px;
  }

  .footer-links{
    gap:12px;
  }

  .diagram-controls .btn,
  .iflow-preset,
  .iflow-run{
    flex:1 1 100%;
  }
}

/* =========================================================
   HOME NODE MARKETPLACE PREVIEW
   Step 3 upgrade
========================================================= */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.node-marketplace{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:18px;
  align-items:start;
}

.node-marketplace-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.node-marketplace-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.node-marketplace-filters .btn.is-active{
  background:rgba(127,211,255,.12);
  border-color:rgba(127,211,255,.34);
}

.node-marketplace-search{
  flex:0 1 260px;
  min-width:220px;
}

.node-marketplace-search input{
  width:100%;
}

.node-marketplace-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.node-market-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    opacity .24s ease;
}

.node-market-card:hover{
  transform:translateY(-2px);
  border-color:rgba(127,211,255,.24);
}

.node-market-card.is-active{
  border-color:rgba(127,211,255,.38);
  background:
    radial-gradient(circle at top left, rgba(127,211,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 40px rgba(127,211,255,.10);
}

.node-market-card.is-hidden{
  display:none;
}

.node-market-card.is-placeholder{
  cursor:default;
  opacity:.75;
}

.node-market-head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px;
}

.node-market-title{
  display:block;
  margin:0;
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.02em;
}

.node-market-category{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.node-market-copy{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  min-height:64px;
}

.node-market-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.node-market-meta-item{
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.node-market-meta-item .label{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:11px;
}

.node-market-meta-item strong{
  display:block;
  font-size:13px;
  line-height:1.4;
}

.node-market-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.node-market-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
  line-height:1;
}

.node-marketplace-panel{
  display:grid;
  gap:18px;
}

.node-panel-card{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}

.node-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.node-panel-head h3{
  margin:0;
  font-size:19px;
  letter-spacing:-.03em;
}

.node-panel-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--accent);
  font-size:12px;
  text-transform:uppercase;
}

.node-panel-title{
  display:block;
  margin-bottom:8px;
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.03em;
}

.node-panel-copy{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.7;
}

.node-panel-meta{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

.node-panel-meta-item{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.node-panel-meta-item .label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
}

.node-panel-meta-item strong{
  display:block;
  font-size:14px;
  line-height:1.45;
}

.node-panel-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.node-panel-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  line-height:1;
}

.node-panel-notes{
  display:grid;
  gap:10px;
  margin-top:12px;
  padding-left:18px;
}

.node-panel-notes li{
  color:var(--muted);
  line-height:1.65;
}

@media (max-width: 1260px){
  .node-marketplace{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1180px){
  .node-marketplace-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .node-marketplace-actions{
    align-items:stretch;
  }

  .node-marketplace-filters{
    width:100%;
  }

  .node-marketplace-filters .btn{
    flex:1 1 calc(50% - 8px);
  }

  .node-marketplace-search{
    flex:1 1 100%;
    min-width:100%;
  }

  .node-market-meta{
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px){
  .node-marketplace-filters .btn{
    flex:1 1 100%;
  }
}

/* =======================================================
   DEVELOPER PLAYGROUND
======================================================= */

.home-playground {
  padding: 80px 0;
  background: var(--bg-2);
}

.playground-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}

.playground-editor {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.playground-toolbar {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.btn-run {
  background: var(--gold);
  color: #111;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn-run:hover {
  opacity: .9;
}

.btn-reset {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.playground-code {
  width: 100%;
  min-height: 300px;
  background: #0b1118;
  color: #dbe5f0;
  border: none;
  padding: 16px;
  font-family: monospace;
  font-size: 13px;
  resize: none;
}

.playground-output {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.output-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
}

.output-console {
  flex: 1;
  padding: 16px;
  background: #0a0f15;
  color: #9cd3ff;
  font-family: monospace;
  font-size: 13px;
  overflow: auto;
}

/* mobile */

@media (max-width: 900px) {

  .playground-grid {
    grid-template-columns: 1fr;
  }

  .playground-code {
    min-height: 240px;
  }

}

.architecture-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
margin-top:50px;
}

.arch-card{
padding:26px;
border-radius:20px;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
transition:.25s;
}

.arch-card:hover{
transform:translateY(-4px);
border-color:rgba(127,211,255,.25);
}

.arch-icon{
font-size:26px;
margin-bottom:12px;
}

.arch-card h3{
margin:10px 0;
font-size:20px;
}

.arch-card p{
color:var(--muted);
font-size:14px;
line-height:1.6;
}

.arch-card ul{
margin-top:14px;
padding-left:18px;
font-size:14px;
color:var(--muted);
}

.arch-card li{
margin:4px 0;
}

.architecture-footer{
margin-top:40px;
text-align:center;
color:var(--muted);
font-size:15px;
}

/* =========================================================
   LIVE BUILDER DEMO
   preset actions upgrade
========================================================= */

.builder-demo-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.builder-demo-actions .btn{
  flex:0 0 auto;
}

.builder-demo-actions .btn.btn-small{
  min-width:108px;
  justify-content:center;
}

@media (max-width: 1180px){
  .builder-demo-actions{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    width:100%;
  }

  .builder-demo-actions .btn,
  .builder-demo-actions .btn.btn-small{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 900px){
  .builder-demo-actions{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .builder-demo-actions{
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:stretch;
  }

  .builder-demo-actions .btn{
    min-height:40px;
  }
}

@media (max-width: 520px){
  .builder-demo-actions{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   HOMEPAGE ACTION GROUPS
   responsive upgrade
========================================================= */

/* -----------------------------------------
   NODE MARKETPLACE FILTERS
----------------------------------------- */

.node-marketplace-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.node-marketplace-filters .btn{
  flex:0 0 auto;
}

.node-marketplace-filters .btn.btn-small{
  min-width:96px;
  justify-content:center;
}

@media (max-width: 1180px){
  .node-marketplace-filters{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    width:100%;
  }

  .node-marketplace-filters .btn,
  .node-marketplace-filters .btn.btn-small{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 900px){
  .node-marketplace-filters{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .node-marketplace-filters{
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:stretch;
  }

  .node-marketplace-filters .btn{
    min-height:40px;
  }
}

@media (max-width: 520px){
  .node-marketplace-filters{
    grid-template-columns:1fr;
  }
}

/* -----------------------------------------
   DEVELOPER PLAYGROUND ACTIONS
----------------------------------------- */

.playground-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.playground-actions .btn{
  flex:0 0 auto;
}

.playground-actions .btn.btn-small{
  min-width:108px;
  justify-content:center;
}

@media (max-width: 1180px){
  .playground-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    width:100%;
  }

  .playground-actions .btn,
  .playground-actions .btn.btn-small{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 760px){
  .playground-actions{
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:stretch;
  }

  .playground-actions .btn{
    min-height:40px;
  }
}

@media (max-width: 520px){
  .playground-actions{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   HOMEPAGE HEADER + HERO
   final sync upgrade
========================================================= */

/* -----------------------------------------
   BRAND / HEADER
----------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:80;
}

.site-header-inner{
  min-height:92px;
  gap:18px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:0 0 auto;
}

.brand-mark{
  width:58px;
  height:58px;
  border-radius:18px;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(215,181,109,.92), rgba(242,221,170,.98));
  box-shadow:0 18px 40px rgba(215,181,109,.16);
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  line-height:1.05;
}

.brand-title{
  display:block;
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--text);
}

.brand-subtitle{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
  letter-spacing:.01em;
}

/* -----------------------------------------
   DESKTOP NAV
----------------------------------------- */

.nav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:0;
}

.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 2px 14px;
  font-size:15px;
  line-height:1;
  white-space:nowrap;
}

.nav a::after{
  bottom:2px;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(215,181,109,.10),
    rgba(215,181,109,.96),
    rgba(215,181,109,.10)
  );
}

.header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

/* -----------------------------------------
   HERO
----------------------------------------- */

.hero{
  position:relative;
  padding:34px 0 18px;
}

.hero-grid{
  align-items:start;
}

.hero-main{
  min-height:auto;
  overflow:hidden;
}

.hero-kpis{
  margin-top:24px;
}

/* -----------------------------------------
   HERO PRIMARY NAV
----------------------------------------- */

.hero-primary-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.hero-primary-link{
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 24px rgba(0,0,0,.10);
  color:var(--text);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.3;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.hero-primary-link:hover{
  transform:translateY(-2px);
  border-color:rgba(127,211,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 28px rgba(0,0,0,.16);
}

.hero-primary-link.is-featured{
  color:#071019;
  border-color:transparent;
  background:linear-gradient(135deg, rgba(127,211,255,.96), rgba(110,231,200,.88));
  box-shadow:0 20px 38px rgba(127,211,255,.20);
}

.hero-primary-link.is-featured:hover{
  background:linear-gradient(135deg, rgba(127,211,255,1), rgba(110,231,200,1));
}

.hero-primary-link small{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.82;
  line-height:1.35;
}

/* -----------------------------------------
   HERO SIDE
----------------------------------------- */

.hero-side{
  align-content:start;
}

.hero-side .side-card{
  min-height:auto;
}

/* -----------------------------------------
   SECTION SPACING
----------------------------------------- */

.section{
  margin-top:56px;
}

.section:first-of-type{
  margin-top:0;
}

/* -----------------------------------------
   TABLET LARGE
----------------------------------------- */

@media (max-width: 1280px){
  .site-header-inner{
    gap:14px;
  }

  .nav{
    gap:12px;
  }

  .nav a{
    font-size:14px;
  }

  .hero-primary-nav{
    gap:14px;
  }
}

/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1180px){
  .hero-primary-nav{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .header-actions{
    gap:10px;
  }
}

/* -----------------------------------------
   MOBILE NAV / MOBILE HEADER
----------------------------------------- */

@media (max-width: 900px){
  .site-header-inner{
    min-height:84px;
  }

  .brand-mark{
    width:52px;
    height:52px;
    border-radius:16px;
  }

  .brand-title{
    font-size:18px;
  }

  .nav{
    justify-content:flex-start;
  }

  .nav.is-open,
  .site-nav.is-open,
  [data-nav].is-open{
    top:calc(var(--header-h) - 4px);
  }
}

/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 760px){
  .hero-primary-nav{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-primary-link{
    min-height:78px;
    font-size:17px;
    border-radius:26px;
    padding:0 16px;
  }

  .brand-subtitle{
    font-size:11px;
  }

  .section{
    margin-top:44px;
  }
}

/* -----------------------------------------
   SMALL MOBILE
----------------------------------------- */

@media (max-width: 520px){
  .brand-copy{
    max-width:160px;
  }

  .brand-title{
    font-size:17px;
  }

  .header-actions{
    width:auto;
  }

  .lang-switch{
    flex:0 0 auto;
  }
}