/* ---------- Infra hero: layered request-flow diagram ---------- */
.stack-wrap{display:flex;justify-content:center;}
.stack{width:min(420px, 84vw);position:relative;display:flex;flex-direction:column;gap:16px;padding:6px 0;}
.stack::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--line);transform:translateX(-50%);
}
.stack-layer{
  position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:18px 22px;display:flex;flex-direction:column;gap:4px;
}
.stack-layer .layer-no{font-family:var(--mono);font-size:12.5px;color:var(--accent);letter-spacing:0.05em;}
.stack-layer h3{font-size:1.08rem;font-weight:600;font-family:var(--sans);}
.stack-layer p{color:var(--ink-dim);font-size:0.95rem;}
.flow-dot{
  position:absolute;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--accent-bright);transform:translateX(-50%);z-index:2;
  box-shadow:0 0 12px 3px color-mix(in srgb, var(--accent) 55%, transparent);
  animation:flow-down 4.5s linear infinite;
}
@keyframes flow-down{
  0%{top:0%;opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{top:100%;opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .flow-dot{animation:none;top:50%;opacity:1;} }

/* ---------- Infra product grid ---------- */
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:920px){ .infra-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .infra-grid{grid-template-columns:1fr;} }
.infra-card{background:var(--bg);padding:32px 26px;min-height:170px;display:flex;flex-direction:column;gap:12px;}
.infra-card svg{width:27px;height:27px;color:var(--accent);}
.infra-card h3{font-size:1.1rem;font-weight:600;font-family:var(--sans);}
.infra-card p{color:var(--ink-dim);font-size:1rem;}

/* ---------- Developer / code panels ---------- */
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
@media (max-width:820px){ .code-grid{grid-template-columns:1fr;} }
.code-panel{background:var(--deep);border:1px solid var(--deep-line);border-radius:6px;overflow:hidden;}
.code-panel-head{
  display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--deep-line);
  font-family:var(--mono);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(233,235,247,0.58);
}
.code-panel pre{
  margin:0;padding:20px 22px;font-family:var(--mono);font-size:14px;line-height:1.8;
  color:var(--deep-ink);overflow-x:auto;
}
.code-panel .tok-ok{color:var(--accent-bright);}
.code-panel .tok-dim{color:rgba(233,235,247,0.5);}

/* ---------- Pricing table ---------- */
.price-table{border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow:hidden;}
.price-row{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:16px;align-items:baseline;
  padding:18px 26px;border-bottom:1px solid var(--line);
}
.price-row:last-child{border-bottom:none;}
.price-row.head{
  font-family:var(--mono);font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-dim);
  padding:14px 26px;background:var(--surface-2);
}
.price-resource{font-weight:500;font-size:1.02rem;}
.price-unit{color:var(--ink-dim);font-size:0.98rem;font-family:var(--mono);}
.price-amount{font-family:var(--mono);font-size:1.1rem;font-variant-numeric:tabular-nums;text-align:right;color:var(--accent);font-weight:600;}