/* hero-lab — the two sections after the hero:
   .ex  "Make your ERP agentic"   (enterprise, first)
   .ow  "Orcha as your agentic ERP" (startups & SMEs, sticky scroll showcase) */

/* ───────── Shared copy ───────── */
.sx-lede { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.sx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-list li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.sx-list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006EC7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sx-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* ───────── Section 1: Make your ERP agentic ───────── */
.ex { padding: 136px 0 112px; background: var(--bg); }
.ex-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.ex-copy { display: flex; flex-direction: column; gap: 24px; }
.ex-copy h2 { margin: 0; }
.ex-sys { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.ex-sys span { font-size: 16px; font-weight: 600; color: #9a968f; letter-spacing: -0.01em; }

.ex-art { position: relative; height: 540px; border-radius: 10px; background: var(--bg-soft); border: 1px solid color-mix(in oklab, var(--line), transparent 35%); overflow: hidden; }
.ex-art > canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; pointer-events: none; }
.ex-stage { position: absolute; left: 50%; top: 50%; width: 640px; height: 440px; transform: translate(-50%, -50%); }

/* Isometric stack — orthographic, so no perspective on the parent. */
.ex-iso { position: absolute; left: 180px; top: 150px; width: 280px; height: 280px; transform: rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; }
.ex-pl { position: absolute; border-radius: 8px; transform: translateZ(calc(var(--z) * 1px)); }
.ex-pl.erp { inset: 0; background: #fff; border: 1px solid #d6d0c3;
  background-image: repeating-linear-gradient(0deg, transparent 0 21px, #efece5 21px 22px);
  box-shadow: -1px 1px 0 #e4dfd4, -2px 2px 0 #e4dfd4, -3px 3px 0 #e1dbcf, -4px 4px 0 #e1dbcf, -5px 5px 0 #ddd7ca, -6px 6px 0 #ddd7ca, -7px 7px 0 #d9d2c4, -8px 8px 0 #d9d2c4,
    -26px 26px 46px -18px rgba(28,24,19,.30), inset 0 0 0 6px #faf9f6; }
.ex-pl.erp { transform-style: preserve-3d; }
.ex-pl.erp .tiles { position: absolute; inset: 16px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; transform-style: preserve-3d; }
.ex-pl.erp .tiles span { display: grid; place-items: center; border-radius: 9px; background: #fff; border: 1px solid #ddd7ca; transform: translateZ(7px);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #8f897d;
  box-shadow: -1px 1px 0 #e4dfd4, -2px 2px 0 #e1dbcf, -3px 3px 0 #ddd7ca, -4px 4px 0 #d9d2c4, -10px 10px 16px -8px rgba(28,24,19,.22); }
.ex-pl.erp .tiles span.erp1 { color: #5a5a56; font-size: 14px; }
.ex-pl.erp .tiles span.bank { color: #7a8796; }
.ex-pl.erp .words { position: absolute; inset: 26px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 22px 10px; }
.ex-pl.erp .words span { font-family: var(--sans); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #b3ada2; text-align: center; }
.ex-pl.erp .tag { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #a29c90; }
.ex-pl.ws { inset: 40px; background: #fff; border: 1px solid #cfdbe6;
  box-shadow: -1px 1px 0 #d6e2ec, -2px 2px 0 #d6e2ec, -3px 3px 0 #cddbe7, -4px 4px 0 #cddbe7, -5px 5px 0 #c5d5e3,
    -20px 20px 38px -14px rgba(0,80,150,.28);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; }
.ex-pl.ws span { display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent), transparent 78%); color: #0053a6; font-size: 13px; font-weight: 500; }
.ex-pl.ag { inset: 70px; background: linear-gradient(135deg, #2a8ee0, #005aa6); border: 1px solid #00508f;
  box-shadow: -1px 1px 0 #00508f, -2px 2px 0 #00508f, -3px 3px 0 #004a85, -4px 4px 0 #004a85, -5px 5px 0 #00447b, -6px 6px 0 #00447b,
    -20px 20px 40px -12px rgba(0,80,150,.5), inset 0 1px 0 rgba(255,255,255,.35);
  display: grid; place-items: center; animation: ex-float 5s ease-in-out infinite; }
.ex-pl.ag img { width: 64px; height: 64px; transform: rotate(45deg); opacity: .95; }
@keyframes ex-float { 50% { transform: translateZ(calc(var(--z) * 1px + 10px)); } }

/* Sync beams between Orcha and the ERP (2D overlay; z maps to straight vertical) */

/* Labels */
.ex-lbl { position: absolute; top: var(--y); left: 470px; transform: translateY(-50%); display: flex; align-items: center; white-space: nowrap; }
.ex-lbl::before { content: ""; position: absolute; right: 100%; width: var(--w, 40px); margin-right: 10px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 6px); }
.ex-lbl b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ex-lbl small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.ex-lbl.az b { color: #0053a6; }
.ex-sync { position: absolute; left: 470px; top: 226px; transform: translateY(-50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.ex-sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ex-pulse 2s ease-in-out infinite; }
@keyframes ex-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,110,199,.15); } 50% { box-shadow: 0 0 0 7px rgba(0,110,199,.06); } }

/* Live event card */
.ex-toast { position: absolute; left: 28px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; min-width: 300px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -16px rgba(28,24,19,.28); transition: opacity .35s, transform .35s; }
.ex-toast.out { opacity: 0; transform: translateY(6px); }
.ex-toast .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.ex-toast .ic svg { width: 16px; height: 16px; }
.ex-toast b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.ex-toast span { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ───────── Section 2: Orcha as your agentic ERP ───────── */
.ow { padding: 112px 0 136px; background: var(--bg); }
.ow-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 72px; align-items: start; }
.ow-grid > *, .ex-grid > * { min-width: 0; }
.ow-shot .om-toolbar { overflow: hidden; }
.ow-copy { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 22px; }
.ow-copy h2 { margin: 0; }
.ow-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.ow-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; transition: opacity .3s; opacity: .45; }
.ow-steps li:last-child { border-bottom: 1px solid var(--line); }
.ow-steps li.on { opacity: 1; }
.ow-steps .n { grid-row: span 2; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); padding-top: 3px; }
.ow-steps li.on .n { color: var(--accent); }
.ow-steps b { font-size: 16px; font-weight: 500; color: var(--ink); }
.ow-steps span { font-size: 14px; color: var(--ink-3); line-height: 1.45; }

.ow-shots { display: flex; flex-direction: column; gap: 96px; padding: 24px 0; }
.ow-shot { position: relative; transition: opacity .5s ease, transform .5s ease; opacity: .38; transform: scale(.965); }
.ow-shot.on { opacity: 1; transform: none; }
.ow-shot .cap { display: none; }
.ow-shot .om-window { height: 500px; }
.ow-shot .om-app { height: calc(100% - 34px); }
.ow-shot .om-side { width: 172px; }
.ow-shot .om-nav li { padding: 7px 14px; font-size: 13px; gap: 9px; }
.ow-shot .om-nav li .om-ic { width: 16px; height: 16px; }
.ow-shot .om-nav li.active { padding-left: 14px; }
.ow-shot .om-logo img { width: 84px; }
.ow-shot::before { content: ""; position: absolute; inset: 40px -40px -40px 40px; border-radius: 10px; background: var(--bg-soft); z-index: -1; }

/* Banking screen bits */
.bk-amt.in { color: #116329; }
.bk-prop { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #eef4f8; color: #0053a6; border: 1px solid #aecbe0; }
.bk-prop i { font-style: normal; font-family: "OM Mono", monospace; font-size: 10.5px; color: #57524b; }

/* Accounting screen bits */
.jr2 .src { display: inline-flex; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid; }
.jr2 .src.ag { background: #eef4f8; color: #0053a6; border-color: #aecbe0; }
.jr2 .src.hu { background: #ece8e1; color: #57524b; border-color: #e3ded5; }

/* Cockpit screen bits */

@media (max-width: 1100px) {
  .ex-grid { grid-template-columns: 1fr; gap: 40px; }
  .ow-grid { grid-template-columns: 1fr; gap: 32px; }
  .ow-copy { position: static; }
  .ow-steps { display: none; }
  .ow-shots { gap: 56px; padding: 0; }
  .ow-shot { opacity: 1; transform: none; }
  .ow-shot .cap { display: block; margin-bottom: 14px; }
  .ow-shot .cap b { display: block; font-size: 18px; font-weight: 500; }
  .ow-shot .cap span { font-size: 14px; color: var(--ink-3); }
  .ow-shot::before { display: none; }
}
@media (max-width: 700px) {
  .ex { padding: 80px 0; } .ow { padding: 80px 0; }
  .ex-art { height: 420px; }
  .ex-stage { transform: translate(-50%, -54%) scale(.56); }
  .ex-lbl small { display: none; }
  .ex-lbl b, .ex-sync { font-size: 17px; }
  .ex-toast { left: 14px; right: 14px; min-width: 0; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-pl.ag, .ex-sync::before { animation: none; }
}

/* ───────── Section 3: Built from first principles for AI ───────── */
.fp { padding: 120px 0 136px; background: var(--bg); }
.fp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 56px; }
.fp-head .sx-lede { margin: 0; max-width: 820px; }
.fp-head h2 { margin: 0; }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.fp-card.wide { grid-column: span 2; }
.fp-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: #fbf1d3; color: #7d4e00; border: 1px solid #ecd592; }
.fp-vis { position: relative; height: 264px; background: var(--bg-soft); border-bottom: 1px solid color-mix(in oklab, var(--line), transparent 40%); padding: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fp-txt { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.fp-txt h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.fp-txt p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* mini surfaces share the app's look */
.fp-panel { width: 100%; max-width: 560px; background: #fff; border: 1px solid #e3ded5; border-radius: 10px; box-shadow: 0 12px 30px -16px rgba(28,24,19,.25); font-family: "OM Sans", "Source Sans 3", sans-serif; color: #1c1813; }
.fp-panel .ph { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #ece8e1; font-size: 13px; font-weight: 600; }
.fp-panel .ph .mono { margin-left: auto; font-family: "OM Mono", monospace; font-size: 11px; font-weight: 500; color: #57524b; }
.fp-panel .ph svg { width: 15px; height: 15px; color: #57524b; }

/* A — version history */
.vh { list-style: none; margin: 0; padding: 8px 14px 10px; position: relative; }
.vh::before { content: ""; position: absolute; left: 26px; top: 18px; bottom: 22px; width: 1px; background: #e3ded5; }
.vh li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.vh .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #aecbe0; margin-left: 8px; z-index: 1; }
.vh li.ok .dot { border-color: #1a7f37; background: #e6f4ea; }
.vh li.ag .dot { border-color: #0a6dbd; background: #eef4f8; }
.vh .w b { font-weight: 600; }
.vh .w span { color: #79736b; }
.vh .w s { color: #a6a097; font-family: "OM Mono", monospace; font-size: 11.5px; }
.vh .w code { font-family: "OM Mono", monospace; font-size: 11.5px; background: #eef4f8; color: #0053a6; padding: 0 5px; border-radius: 3px; }
.vh .meta { font-family: "OM Mono", monospace; font-size: 11px; color: #a6a097; white-space: nowrap; }
.vh .v { font-family: "OM Mono", monospace; font-size: 10.5px; color: #79736b; border: 1px solid #e3ded5; border-radius: 4px; padding: 0 5px; margin-right: 6px; }

/* B — context */
.ctx { padding: 8px 12px 10px; display: grid; gap: 5px; }
.ctx div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 4px 9px; border-radius: 7px; background: #faf9f6; border: 1px solid #ece8e1; }
.ctx div svg { width: 14px; height: 14px; color: #0a6dbd; flex: none; }
.ctx div i { margin-left: auto; font-style: normal; font-family: "OM Mono", monospace; font-size: 10.5px; color: #79736b; }

/* C — human in the loop */
.hil { padding: 12px 14px 14px; display: grid; gap: 10px; }
.hil .why { font-size: 13px; line-height: 1.45; color: #57524b; padding: 8px 10px; border-radius: 7px; background: #fbf1d3; border: 1px solid #ecd592; color: #7d4e00; }
.hil .act { display: flex; gap: 8px; }
.hil .act span { font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 5px; border: 1px solid #e3ded5; }
.hil .act span.p { background: #0a6dbd; border-color: #0a6dbd; color: #fff; }
.hil .wait { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #79736b; }
.hil .wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9a6700; box-shadow: 0 0 0 3px #fbf1d3; }

/* D — explained */
.exp { padding: 12px 14px 14px; display: grid; gap: 8px; font-size: 13px; }
.exp .row { display: flex; align-items: center; gap: 8px; }
.exp .acct { font-family: "OM Mono", monospace; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #eef4f8; color: #0053a6; }
.exp .bar { flex: 1; height: 4px; border-radius: 2px; background: #ece8e1; overflow: hidden; }
.exp .bar i { display: block; height: 100%; width: 95%; background: #1a7f37; }
.exp .why { padding: 8px 10px; border-radius: 6px; background: #faf9f6; border: 1px solid #ece8e1; color: #57524b; line-height: 1.45; font-size: 12.5px; }

/* E — isolation */
.iso2 { display: grid; gap: 8px; width: 100%; max-width: 300px; }
.iso2 .ent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e3ded5; box-shadow: 0 8px 20px -14px rgba(28,24,19,.25); font-size: 13px; font-family: "OM Sans", sans-serif; }
.iso2 .ent svg { width: 15px; height: 15px; color: #0a6dbd; flex: none; }
.iso2 .ent i { margin-left: auto; font-style: normal; font-family: "OM Mono", monospace; font-size: 10.5px; color: #79736b; }
.iso2 .eu { justify-self: start; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; }

@media (max-width: 1100px) {
  .fp-head { grid-template-columns: 1fr; gap: 16px; }
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .fp { padding: 80px 0; }
  .fp-grid { grid-template-columns: 1fr; }
  .fp-card.wide { grid-column: auto; }
  .vh .meta { display: none; }
}