/* Landing — Execution Engine hierarchy, illustrations, runtime panel */

.capabilities-section{padding:3.5rem 0 5rem;border-top:1px solid var(--border)}
.engine-section-header{max-width:1100px;margin:0 auto 3.75rem;padding:0 2rem}
.engine-kicker{
  font-family:var(--font-noir);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--fg-muted);
  margin:0 0 .75rem;
}
.engine-section-header h2{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:500;letter-spacing:-.03em;margin:0;
}
.engine-section-tagline{
  font-size:.875rem;color:var(--fg-secondary);line-height:1.5;
  margin:.625rem 0 0;max-width:520px;
}
.engine-features{
  max-width:1100px;margin:0 auto;padding:0 2rem;
  display:flex;flex-direction:column;gap:0;
}
.engine-features > .engine-feature,
.engine-features > .engine-feature-duo{margin-bottom:1.25rem}
.engine-features > .engine-feature-hero::after,
.engine-features > .engine-feature-execute::after{
  content:'↓';display:block;text-align:center;font-size:.75rem;line-height:1;
  color:oklch(0.556 0 0 / 0.28);padding:.75rem 0 .25rem;
}
.engine-feature{
  border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--cap-gradient-top) 0%,var(--cap-gradient-bot) 100%);
  overflow:hidden;
}
.engine-feature-inner{padding:3rem 3.25rem;display:flex;flex-direction:column;gap:2.75rem}
.engine-feature-split{flex-direction:row;align-items:center;gap:3.5rem}
.engine-feature-split .engine-feature-copy{flex:1;min-width:0}
.engine-feature-split .engine-feature-viz{flex:1;min-width:0}
.engine-feature-hero .engine-feature-inner{
  padding:4rem 3.5rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;
}
.engine-feature-hero{border-color:var(--border-hover);box-shadow:var(--shadow)}
.engine-feature-execute .engine-feature-inner{padding:3.25rem 3.5rem}

.engine-label{
  font-family:var(--font-noir);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--fg-muted);
  margin:0 0 1.25rem;
}
.engine-feature-hero .engine-label{font-size:.875rem;letter-spacing:.24em;margin-bottom:1.5rem}
.engine-headline{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;line-height:1.12;
  color:var(--fg);margin:0;
}
.engine-feature-hero .engine-headline{font-size:clamp(2.5rem,5vw,4rem);line-height:1.08;letter-spacing:-.04em}
.engine-feature-execute .engine-headline{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.engine-headline-sm{
  font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.5rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.2;margin:0;
}
.engine-description{
  margin-top:14px;max-width:520px;color:var(--fg-secondary);
  line-height:1.65;font-size:.95rem;
}

.engine-feature-viz{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:oklch(0 0 0 / 0.04);padding:2rem 1.75rem;min-height:260px;
  display:flex;align-items:center;justify-content:center;
}
.dark .engine-feature-viz{background:oklch(0.269 0 0 / 0.45)}
.engine-feature-hero .engine-feature-viz{min-height:320px;padding:2.25rem 2rem}
.engine-feature-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;align-items:stretch;
}
.engine-feature-compact{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:560px;padding:2.75rem 2.5rem;
}
.engine-feature-compact .engine-label{margin-bottom:1rem;font-size:.75rem}
.engine-feature-compact .engine-feature-copy{flex:0 0 auto}

/* TRIGGER ingest */
.illust-ingest{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:1.35rem}
.illust-ingest-sources{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;width:100%}
.illust-src{
  font-family:var(--font-mono);font-size:.6875rem;text-align:center;
  padding:.55rem .5rem;border:1px solid oklch(0.556 0 0 / 0.28);border-radius:6px;
  color:var(--fg-secondary);background:var(--bg);
  transition:border-color .4s,color .4s,box-shadow .4s,transform .4s;
}
.illust-src.active{
  color:var(--fg);border-color:var(--indigo);
  box-shadow:0 0 0 1px oklch(0.546 0.245 262.881 / 0.3),0 0 20px oklch(0.546 0.245 262.881 / 0.12);
  transform:scale(1.04);animation:illustSrcPulse 2s ease-in-out infinite;
}
.illust-src.active::after{
  content:'●';display:block;font-size:.5rem;color:var(--indigo);margin-top:.15rem;
  animation:illustDotPulse 1.2s ease-in-out infinite;
}
@keyframes illustSrcPulse{
  0%,100%{box-shadow:0 0 0 1px oklch(0.546 0.245 262.881 / 0.25)}
  50%{box-shadow:0 0 0 1px oklch(0.546 0.245 262.881 / 0.45),0 0 24px oklch(0.546 0.245 262.881 / 0.18)}
}
@keyframes illustDotPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.illust-ingest-converge{position:relative;width:100%;height:44px}
.illust-beam{
  position:absolute;bottom:0;width:2px;height:100%;
  background:linear-gradient(180deg,transparent,var(--border-hover));
  opacity:.28;overflow:visible;
}
.illust-beam:nth-child(1){left:12.5%;transform:rotate(10deg);transform-origin:bottom}
.illust-beam:nth-child(2){left:37.5%}
.illust-beam:nth-child(3){left:62.5%}
.illust-beam:nth-child(4){right:12.5%;transform:rotate(-10deg);transform-origin:bottom}
.illust-ingest[data-active-source="api"] .illust-beam:nth-child(1){opacity:.85}
.illust-ingest[data-active-source="webhook"] .illust-beam:nth-child(2){opacity:.85}
.illust-ingest[data-active-source="cron"] .illust-beam:nth-child(3){opacity:.85}
.illust-ingest[data-active-source="queue"] .illust-beam:nth-child(4){opacity:.85}
.illust-ingest[data-active-source="api"] .illust-beam:nth-child(1)::after,
.illust-ingest[data-active-source="webhook"] .illust-beam:nth-child(2)::after,
.illust-ingest[data-active-source="cron"] .illust-beam:nth-child(3)::after,
.illust-ingest[data-active-source="queue"] .illust-beam:nth-child(4)::after{
  content:'';position:absolute;top:0;left:50%;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--indigo);animation:illustBeamTravel 1.8s ease-in-out infinite;
}
@keyframes illustBeamTravel{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:1}
  90%{opacity:.7;transform:translateY(38px)}
  100%{opacity:0;transform:translateY(44px)}
}

.illust-ingest-runtime{display:flex;flex-direction:column;align-items:center;gap:.55rem;width:100%}
.illust-ingest-runtime .runtime-node{
  font-family:var(--font-mono);font-size:.75rem;padding:.6rem 1.35rem;
  border:1px solid oklch(0.556 0 0 / 0.28);border-radius:var(--radius-sm);
  color:var(--fg-secondary);background:var(--bg-card);
  width:min(240px,90%);text-align:center;transition:border-color .35s,box-shadow .35s,color .35s;
}
.illust-ingest-runtime .runtime-node.lit{color:var(--fg);border-color:var(--border-hover)}
.illust-ingest-runtime .runtime-node.active{
  color:var(--fg);border-color:oklch(0.546 0.245 262.881 / 0.45);
  box-shadow:0 0 16px oklch(0.546 0.245 262.881 / 0.1);
}
.illust-ingest-runtime .runtime-flow{display:flex;flex-direction:column;align-items:center;gap:.35rem;height:32px;justify-content:center}
.illust-ingest-runtime .packet{
  width:6px;height:6px;border-radius:50%;background:var(--indigo);opacity:0;
  animation:illustPacketDrop 2s ease-in-out infinite;
}
.illust-ingest-runtime .packet:nth-child(2){animation-delay:.65s}
.illust-ingest-runtime .packet:nth-child(3){animation-delay:1.3s}
@keyframes illustPacketDrop{
  0%{opacity:0;transform:translateY(-10px)}
  15%{opacity:1}
  85%{opacity:.65;transform:translateY(10px)}
  100%{opacity:0;transform:translateY(14px)}
}

/* EXECUTE DAG */
.illust-dag-tree{
  width:100%;max-width:300px;font-family:var(--font-mono);font-size:.6875rem;
  color:oklch(0.556 0 0 / 0.72);line-height:1.45;text-align:center;
}
.dag-line{margin:0}
.dag-arrow{color:oklch(0.556 0 0 / 0.55);font-size:.625rem;line-height:1.2;margin:.15rem 0}
.dag-fork{display:flex;justify-content:center;gap:2rem;margin:.35rem 0}
.dag-node{
  display:inline-block;padding:.3rem .6rem;border:1px solid oklch(0.556 0 0 / 0.28);border-radius:5px;
  background:var(--bg-card);color:var(--fg-secondary);
  transition:border-color .35s,color .35s,box-shadow .35s,background .35s;
}
.dag-node.active{
  color:var(--fg);border-color:oklch(0.546 0.245 262.881 / 0.55);
  box-shadow:0 0 14px oklch(0.546 0.245 262.881 / 0.15);
  animation:dagNodePulse 1.6s ease-in-out infinite;
}
.dag-node.done{color:var(--success);border-color:oklch(0.696 0.17 162.48 / 0.45);background:oklch(0.696 0.17 162.48 / 0.06)}
@keyframes dagNodePulse{0%,100%{opacity:.85}50%{opacity:1}}

/* RECOVER */
.illust-recover,
.illust-output-pipe{
  margin-top:36px;min-height:280px;padding:1.25rem 1rem;border-radius:var(--radius-sm);
  background:oklch(0 0 0 / 0.05);border:1px solid oklch(0.556 0 0 / 0.28);
  font-family:var(--font-mono);font-size:.6875rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.12rem;
}
.dark .illust-recover,.dark .illust-output-pipe{background:oklch(0.269 0 0 / 0.45)}
.illust-stage{
  padding:.25rem .55rem;border-radius:4px;color:oklch(0.556 0 0 / 0.72);
  transition:color .3s,background .3s,box-shadow .3s;
}
.illust-stage.stage-active{color:var(--fg)}
.illust-stage.failed{color:#ff6464}
.illust-stage.failed.stage-flash{background:oklch(0.577 0.245 27.325 / 0.12);animation:recoverFlash .5s ease}
.illust-stage.retry{color:#7ea8ff}
.illust-stage.retry.stage-active{box-shadow:0 0 10px oklch(0.546 0.245 262.881 / 0.15)}
.illust-stage.success{color:#3fd98b}
.illust-arrow{color:oklch(0.556 0 0 / 0.55);font-size:.5rem;line-height:1}
@keyframes recoverFlash{0%,100%{opacity:1}50%{opacity:.45}}

/* OUTPUT */
.pipe-node{
  padding:.35rem .75rem;border:1px solid oklch(0.556 0 0 / 0.28);border-radius:5px;
  background:var(--bg-card);color:var(--fg-secondary);min-width:120px;text-align:center;
  transition:border-color .35s,color .35s,box-shadow .35s;
}
.pipe-node.active{color:var(--fg);border-color:var(--indigo);box-shadow:0 0 12px oklch(0.546 0.245 262.881 / 0.12)}
.pipe-arrow{color:oklch(0.556 0 0 / 0.55);font-size:.5rem;line-height:1}
.pipe-branch{
  display:flex;flex-direction:column;align-items:center;width:100%;margin-top:.15rem;
}
.pipe-branch-line{
  display:block;width:1px;height:16px;background:oklch(0.556 0 0 / 0.28);margin-bottom:4px;
}
.pipe-destinations{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;width:100%;max-width:220px;
}
.pipe-destination{
  min-width:92px;text-align:center;padding:.3rem .5rem;
  border:1px solid oklch(0.556 0 0 / 0.28);border-radius:5px;
  background:var(--bg-card);color:var(--fg-secondary);
  transition:border-color .35s,color .35s,box-shadow .35s;
}
.pipe-destination.active{color:var(--fg);border-color:var(--indigo);box-shadow:0 0 10px oklch(0.546 0.245 262.881 / 0.1)}

/* Runtime panel */
.live-workflow-section{padding:4rem 0 5rem;background:linear-gradient(180deg,transparent,oklch(0 0 0 / 0.02))}
.dark .live-workflow-section{background:linear-gradient(180deg,transparent,oklch(1 0 0 / 0.02))}
.runtime-panel{
  max-width:640px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);overflow:hidden;box-shadow:var(--shadow);
}
.live-workflow-section .section-header + .runtime-panel,
.live-workflow-section > .runtime-panel{margin-left:2rem;margin-right:2rem}
@media(min-width:704px){
  .live-workflow-section .section-header + .runtime-panel,
  .live-workflow-section > .runtime-panel{margin-left:auto;margin-right:auto}
}
.runtime-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--border);
  background:oklch(0 0 0 / 0.02);
}
.dark .runtime-bar{background:oklch(0.269 0 0 / 0.25)}
.runtime-bar-group{display:flex;flex-direction:column;gap:.15rem}
.runtime-bar-center{flex-direction:row;align-items:center;gap:1rem}
.runtime-bar-right{align-items:flex-end}
.runtime-meta-label{
  font-family:var(--font-noir);font-size:.5625rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-muted);
}
.runtime-wf-id{font-family:var(--font-mono);font-size:.75rem;color:var(--fg)}
.runtime-status-pill{
  display:flex;align-items:center;gap:.35rem;font-family:var(--font-mono);
  font-size:.6875rem;color:var(--success);
}
.runtime-events{font-family:var(--font-mono);color:var(--fg-muted);font-size:.6875rem}
.runtime-elapsed{font-family:var(--font-mono);font-size:.75rem;color:var(--fg-secondary)}

.runtime-stages{padding:.5rem 0}
.runtime-stage{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.25rem;border-bottom:1px solid var(--border);
  transition:background .3s;
}
.runtime-stage:last-child{border-bottom:none}
.runtime-stage[data-runtime-state="active"]{
  background:oklch(0.546 0.245 262.881 / 0.06);
  animation:runtimeStagePulse 2s ease-in-out infinite;
}
.runtime-stage[data-runtime-state="done"] .runtime-stage-name{color:var(--fg-secondary)}
@keyframes runtimeStagePulse{
  0%,100%{background:oklch(0.546 0.245 262.881 / 0.04)}
  50%{background:oklch(0.546 0.245 262.881 / 0.09)}
}
.runtime-stage-name{font-family:var(--font-display);font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.runtime-stage-right{min-width:100px;display:flex;justify-content:flex-end;align-items:center}
.runtime-check{font-family:var(--font-mono);font-size:.8125rem;color:var(--success)}
.runtime-badge{
  font-family:var(--font-mono);font-size:.625rem;color:var(--fg-muted);
  padding:.2rem .5rem;border:1px solid var(--border);border-radius:4px;
}
.runtime-badge-live{color:var(--success);border-color:oklch(0.696 0.17 162.48 / 0.35);animation:runtimeLivePulse 1.8s ease-in-out infinite}
@keyframes runtimeLivePulse{0%,100%{opacity:.7}50%{opacity:1}}
.runtime-progress{display:block;width:88px;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.runtime-progress-fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--indigo),oklch(0.546 0.245 262.881 / 0.6));
  border-radius:3px;transition:width .5s ease;
}

/* Landing carousel — Templates / SDK / Docs */
.landing-carousel-section{
  padding:4.5rem 0 5rem;border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,oklch(0 0 0 / 0.015));
}
.dark .landing-carousel-section{background:linear-gradient(180deg,transparent,oklch(1 0 0 / 0.015))}
.landing-carousel{max-width:640px;margin:0 auto;padding:0 2rem}

.landing-carousel-tabs{
  display:flex;justify-content:center;gap:.35rem;margin-bottom:2rem;
  padding:.25rem;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-card);width:fit-content;margin-left:auto;margin-right:auto;
}
.landing-carousel-tab{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  padding:.45rem 1rem;border:none;border-radius:999px;background:transparent;
  color:var(--fg-muted);cursor:pointer;transition:color .2s,background .2s;
}
.landing-carousel-tab:hover{color:var(--fg)}
.landing-carousel-tab.active{
  color:var(--fg);background:var(--accent-bg);
  box-shadow:0 1px 3px oklch(0 0 0 / 0.06);
}

.landing-carousel-viewport{overflow:hidden;min-height:300px}
.landing-carousel-track{position:relative}
.landing-carousel-slide{
  text-align:center;opacity:0;transform:translateX(24px);
  transition:opacity .45s ease,transform .45s ease;
  position:absolute;inset:0;pointer-events:none;
}
.landing-carousel-slide.active{
  opacity:1;transform:translateX(0);position:relative;pointer-events:auto;
}

.landing-flow-inner{max-width:560px;margin:0 auto}
.landing-flow-label{
  font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;
}
.landing-flow-headline{
  font-family:var(--font-display);font-size:clamp(1.35rem,2.5vw,1.875rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:0 0 .75rem;
}
.landing-flow-desc{font-size:.875rem;color:var(--fg-secondary);margin:0 0 1.5rem;line-height:1.65}
.landing-flow-input{max-width:360px;margin:0 auto 1.25rem}

.landing-carousel-controls{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:2rem;
}
.landing-carousel-nav{
  width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-card);color:var(--fg-secondary);font-size:.875rem;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.landing-carousel-nav:hover{border-color:var(--border-hover);color:var(--fg);background:var(--accent-bg)}
.landing-carousel-dots{display:flex;gap:.5rem}
.landing-carousel-dot{
  width:6px;height:6px;padding:0;border:none;border-radius:50%;
  background:var(--border);cursor:pointer;transition:background .2s,transform .2s;
}
.landing-carousel-dot.active{background:var(--fg);transform:scale(1.2)}
.landing-carousel-dot:hover{background:var(--fg-secondary)}

@media(prefers-reduced-motion:reduce){
  .landing-carousel-slide{transition:none}
}

.dark .dag-arrow,.dark .dag-fork{color:oklch(0.708 0 0 / 0.55)}
.dark .illust-src,.dark .dag-node,.dark .pipe-node{border-color:oklch(0.708 0 0 / 0.28)}
.dark .illust-recover,.dark .illust-output-pipe{border-color:oklch(0.708 0 0 / 0.28)}
.dark .illust-stage{color:oklch(0.708 0 0 / 0.72)}
.dark .illust-stage.failed{color:#ff6464}
.dark .illust-stage.retry{color:#7ea8ff}
.dark .illust-stage.success{color:#3fd98b}
.dark .illust-arrow,.dark .pipe-arrow{color:oklch(0.708 0 0 / 0.55)}
.dark .illust-dag-tree{color:oklch(0.708 0 0 / 0.72)}
.dark .pipe-destination{border-color:oklch(0.708 0 0 / 0.28)}
.dark .illust-ingest-runtime .runtime-node{border-color:oklch(0.708 0 0 / 0.28)}

@media(max-width:900px){
  .engine-feature-hero .engine-feature-inner{grid-template-columns:1fr;gap:2.5rem;padding:3rem 2rem}
  .engine-feature-split{flex-direction:column;gap:2.5rem}
  .engine-feature-duo{grid-template-columns:1fr}
  .engine-feature-inner{padding:2.5rem 2rem}
  .engine-feature-compact{min-height:auto;padding:2.25rem 2rem}
  .runtime-bar{flex-direction:column;align-items:flex-start}
  .runtime-bar-center,.runtime-bar-right{align-items:flex-start}
}