/* Homepage "Agentic drawing intelligence" section: auto-guided measurement demo on a tilted drawing sheet. */
.agentic{position:relative;overflow:hidden;background:#fff}
.agentic:before{content:'';position:absolute;inset:0 0 auto;height:560px;background-image:linear-gradient(rgba(0,98,209,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,98,209,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 100% at 70% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 100% at 70% 0%,#000,transparent 75%);pointer-events:none}
.agentic .wrap{position:relative}
.agentic-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px 56px;align-items:end}
.agentic-head h2{margin-top:18px;max-width:600px}
.agentic-head p{font-size:18px}
.agentic-head .actions{margin-top:26px}
.agentic-badge{display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border:1px solid #cfe0f5;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(0,98,209,.08);font:600 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.agentic-badge b{padding:3px 9px;border-radius:999px;background:var(--blue);color:#fff;letter-spacing:.1em}
.agentic-head .agentic-key{margin-top:18px;padding-left:14px;border-left:3px solid var(--green);font-weight:650;color:var(--ink)}

/* Stage */
.agent-demo{margin:48px 0 0}
.ag-view{position:relative;overflow:hidden;border:1px solid #1d3552;border-radius:22px;background:#0b1a2e;box-shadow:0 40px 90px rgba(10,22,40,.28),0 8px 24px rgba(10,22,40,.12);clip-path:inset(0 round 22px)}
.ag-stage{position:relative;aspect-ratio:1200/680;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%,rgba(109,184,255,.14),transparent 70%),linear-gradient(rgba(120,190,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(120,190,255,.07) 1px,transparent 1px) 0 0/28px 28px,#0b1a2e}
.ag-stage:after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(5,12,22,.55));pointer-events:none}
.ag-fallback{width:100%;height:100%;object-fit:contain;padding:24px;background:#f8fafc}
.js .ag-fallback{display:none}
.ag-rig{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 38%}
/* A tilted window larger than the stage; the camera zooms by changing the SVG viewBox inside it. */
.ag-world{--lz1:10px;--lz2:18px;--lz3:26px;--dyk:0;position:absolute;left:-25%;top:-35%;width:150%;height:170%;transform-style:preserve-3d;transform-origin:50% 50%}
.ag-layer{position:absolute;inset:0;transform:translate3d(0,calc(var(--lz,0px) * var(--dyk)),var(--lz,0px))}
.ag-layer>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ag-l1{--lz:var(--lz1)}.ag-l2{--lz:var(--lz2)}.ag-l3{--lz:var(--lz3)}
.ag-under{--lz:-14px}
.ag-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}
.ag-mb,.ag-lift rect,.ag-sechl,.ag-calhl,.ag-trace,.ag-sweep path{vector-effect:non-scaling-stroke}

/* Drawing ink */
.ag-d-b1{fill:none;stroke:#33475b;stroke-width:1.4}.ag-d-b2{fill:none;stroke:#33475b;stroke-width:.6}
.ag-d-grid{fill:none;stroke:#8fa2b5;stroke-width:.7;stroke-dasharray:16 3 2 3}
.ag-d-bub circle{fill:#fff;stroke:#33475b;stroke-width:1}.ag-d-bub text{font:600 11px var(--mono);fill:#1c2b3a;text-anchor:middle;dominant-baseline:central}
.ag-d-mem{stroke:#1c2b3a;stroke-width:3}
.ag-d-col{fill:none;stroke:#1c2b3a;stroke-width:2}
.ag-d-lab{font:600 9.5px var(--mono);fill:#22313f;text-anchor:middle}
.ag-d-dim{fill:none;stroke:#4a5d71;stroke-width:.7}.ag-d-dimt{font:9px var(--mono);fill:#2a3a4b;text-anchor:middle}
.ag-d-note{font:7.5px var(--mono);fill:#56687a}.ag-d-h{font:700 9px var(--mono);fill:#1c2b3a}
.ag-d-title{font:700 11px var(--mono);fill:#1c2b3a}.ag-d-sheet{font:800 28px var(--font);fill:#0b1626;letter-spacing:-.02em}
.ag-d-thin{fill:none;stroke:#8fa2b5;stroke-width:.6}.ag-d-arrow{fill:#33475b}

/* Detected members (layer 1) */
.ag-mb{fill:rgba(250,204,21,.22);stroke:#e0a100;stroke-width:1.3px;opacity:0;transition:opacity .45s,fill .4s,stroke .4s}
.ag-mb.det{opacity:1}.ag-mb.dim{opacity:.3}.ag-mb.focus{opacity:1;fill:rgba(250,204,21,.36);stroke:#c98f00}
.ag-mb.done{opacity:1;fill:rgba(20,146,95,.2);stroke:#14925f}
.ag-sweep{transition:opacity .4s}

/* Focused member body (layer 2) */
.ag-lift{opacity:0;transition:opacity .5s}.ag-lift.on{opacity:1}
.ag-lift .side{fill:rgba(150,100,0,.32)}.ag-lift .top{fill:rgba(250,204,21,.62);stroke:#c98f00;stroke-width:1.4px}
.ag-lift.done .side{fill:rgba(12,90,60,.3)}.ag-lift.done .top{fill:rgba(52,211,153,.5);stroke:#14925f}
.ag-sechl{fill:rgba(250,204,21,.2);stroke:#c98f00;stroke-width:1.1px;stroke-dasharray:3 2;opacity:0;transition:opacity .4s}.ag-sechl.on{opacity:1}

/* Measurement (layer 3) */
.ag-trace{fill:none;stroke:var(--brand);stroke-width:2.8px;stroke-linecap:round;transition:stroke .4s,opacity .4s}
.ag-trace.ok{stroke:var(--green)}.ag-trace.faded{opacity:.35}
.ag-calhl{fill:rgba(10,122,255,.12);stroke:var(--brand);stroke-width:1.2px;opacity:0;transition:opacity .4s,fill .4s,stroke .4s}
.ag-calhl.on{opacity:1}.ag-calhl.ok{fill:rgba(20,146,95,.12);stroke:var(--green)}.ag-calhl.faded{opacity:.35}
.ag-pin{position:absolute;left:0;top:0;opacity:0;will-change:transform;transition:opacity .35s;pointer-events:none;white-space:nowrap}
.ag-pin.on{opacity:1}.ag-pin.faded{opacity:.35}
.ag-h{display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--brand);border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(10,22,40,.3);font:700 10px/1 var(--mono);color:var(--brand)}
.ag-h.sm{width:20px;height:20px;font-size:9.5px}
.ag-h.on{animation:ag-pop .4s cubic-bezier(.3,1.6,.5,1)}
.ag-h.grab{border-color:var(--green);color:var(--green-ink);box-shadow:0 0 0 6px rgba(20,146,95,.22),0 4px 10px rgba(10,22,40,.3)}
.ag-h.ok{border-color:var(--green);color:var(--green-ink)}
.ag-val{padding:4px 9px;border-radius:7px;background:var(--navy);box-shadow:0 8px 18px rgba(10,22,40,.3);font:600 12px/1.3 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.ag-val.adj{background:#0d5c3f}.ag-val.ok{background:var(--green)}
.ag-chip{display:flex;align-items:center;gap:9px;padding:5px 5px 5px 11px;border:1px solid #d5e0ea;border-radius:10px;background:#fff;box-shadow:0 12px 26px rgba(10,22,40,.28);font:13px/1.3 var(--font);color:var(--ink)}
.ag-chip b{font:700 12px var(--mono)}.ag-chip span{color:var(--muted)}
.ag-chip i{padding:4px 10px;border-radius:7px;background:var(--green);color:#fff;font-style:normal;font-weight:650;font-size:12px;transition:transform .12s,background .2s}
.ag-chip i.press{transform:scale(.9);background:#0c6b45}
.ag-chip.ok{border-color:#9fd8bd;background:#effaf4}.ag-chip.ok span{color:var(--green-ink);font-weight:650}.ag-chip.ok i{display:none}
.ag-idtag{padding:2px 7px;border:1px solid #d9a200;border-radius:5px;background:#fff6d6;font:700 10px/1.4 var(--mono);color:#6b4a00;letter-spacing:.04em}
.ag-idtag.ok{border-color:#7dcaa7;background:#e2f5ec;color:var(--green-ink)}

/* Cursors */
.ag-cursor{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform;pointer-events:none}
.ag-cursor svg{position:absolute;left:-2px;top:-1px;width:22px;max-width:none;height:26px;overflow:visible;filter:drop-shadow(0 3px 4px rgba(5,12,22,.45));transition:transform .12s;transform-origin:2px 1px}
.ag-cursor.press svg{transform:scale(.84)}
.ag-agent path{fill:var(--navy);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.ag-eng path{fill:#fff;stroke:#0b1626;stroke-width:1.4;stroke-linejoin:round}
.ag-ctag{position:absolute;left:15px;top:21px;padding:2px 7px;border-radius:5px;background:var(--brand);box-shadow:0 4px 10px rgba(5,12,22,.3);font:700 10px/1.4 var(--mono);letter-spacing:.06em;color:#fff;white-space:nowrap}
.ag-eng .ag-ctag{background:var(--green)}
/* Near the stage's right edge the name tag sits above the pointer instead of beside it. */
.ag-cursor.flip .ag-ctag{left:-10px;top:-34px}
.ag-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:2px solid var(--brand);border-radius:50%;opacity:0;transition:opacity .3s}
.ag-cursor.focus .ag-ring{opacity:1;animation:ag-ring 1.8s ease-out infinite}

/* HUD */
.ag-status{position:absolute;z-index:3;left:18px;top:16px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 36px);padding:8px 15px 8px 12px;border:1px solid rgba(140,190,240,.22);border-radius:999px;background:rgba(9,20,36,.86);box-shadow:0 10px 26px rgba(0,0,0,.3);font-size:13.5px;color:#dbe8f5}
.ag-status b{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.ag-status [data-status]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-status [data-status].flash{animation:ag-fade .5s ease}
.ag-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(109,184,255,.2);animation:ag-breathe 2.2s ease-in-out infinite}
.ag-status.you .ag-dot{background:var(--mint);box-shadow:0 0 0 4px rgba(52,211,153,.2)}.ag-status.you b{color:var(--mint)}
.ag-sheet{position:absolute;z-index:3;right:18px;top:16px;display:grid;gap:2px;padding:7px 12px;border:1px solid rgba(140,190,240,.2);border-radius:10px;background:rgba(9,20,36,.86);text-align:right;font:11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8fb0cc}
.ag-sheet [data-zoom]{color:#cfe0ef;font-variant-numeric:tabular-nums}
.ag-tally{position:absolute;z-index:3;right:18px;bottom:16px;display:flex;gap:6px}
.ag-tally span{padding:6px 11px;border:1px solid rgba(140,190,240,.2);border-radius:9px;background:rgba(9,20,36,.86);font-size:12.5px;color:#a9bdd0}
.ag-tally b{margin-right:4px;font:700 13px var(--mono);color:#ffd452;font-variant-numeric:tabular-nums}.ag-tally [data-t=done]{color:var(--mint)}
.ag-card{position:absolute;z-index:3;left:18px;bottom:16px;width:270px;padding:14px 16px;border:1px solid rgba(140,190,240,.22);border-radius:14px;background:rgba(9,20,36,.9);box-shadow:0 16px 36px rgba(0,0,0,.35);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.ag-card.on{opacity:1;transform:none}
.ag-card>div{display:none}.ag-card[data-mode=idle] .ag-card-idle,.ag-card[data-mode=cal] .ag-card-cal,.ag-card[data-mode=mem] .ag-card-mem{display:block}
.ag-k{margin-bottom:8px;font:700 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.ag-m{font-size:13px;color:#a9bdd0}
.ag-big{font:700 24px/1.2 var(--mono);color:#fff}
.ag-ids{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0 0 6px}
.ag-ids dt{font:600 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6f93b5}
.ag-ids dd{margin:2px 0 0;font:700 15px/1.3 var(--mono);color:#fff}
.ag-ids div:first-child dd{display:inline-block;padding:1px 7px;border:1px solid #d9a200;border-radius:5px;background:rgba(250,204,21,.14);color:#ffd452}
.ag-card.done .ag-ids div:first-child dd{border-color:#34d399;background:rgba(52,211,153,.14);color:var(--mint)}
.ag-len{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(140,190,240,.16)}
.ag-len span{font-size:12px;color:#8fb0cc}.ag-len b{font:700 18px var(--mono);font-variant-numeric:tabular-nums}
.ag-state{margin-top:8px;font:600 12px/1.4 var(--mono);color:#a9bdd0}
.ag-state[data-tone=ai]{color:#ffd452}.ag-state[data-tone=you],.ag-state[data-tone=ok]{color:var(--mint)}
.ag-state[data-tone=ok]:before,.ag-state[data-tone=you]:before{content:'\2713  '}

/* Controls */
.ag-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px}
.ag-chapters,.ag-transport{display:flex;flex-wrap:wrap;gap:8px}
.ag-chap,.ag-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:14px;font-weight:650;transition:border-color .2s,color .2s,background .2s}
.ag-chap:hover,.ag-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.ag-chap span{font:700 12px var(--mono);color:#8a9bab}
.ag-chap i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--green);transform:scaleX(var(--p,0));transform-origin:left}
.ag-chap[aria-current=step]{border-color:var(--ink);color:var(--ink)}.ag-chap[aria-current=step] span{color:var(--blue)}
.ag-chap.done{color:var(--green-ink)}.ag-chap.done span{color:var(--green-ink)}
.ag-btn svg{width:14px;height:14px;fill:currentColor}
.agent-demo figcaption{margin-top:14px;font:12px/1.5 var(--mono);color:#6d8196}

/* Four stages */
.ag-flow-head{max-width:760px;margin-top:88px}
.ag-flow-head h3{font-size:clamp(26px,2.8vw,34px);letter-spacing:-.02em}
.ag-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:32px 0 0;padding:0;list-style:none;counter-reset:none}
.ag-flow li{position:relative;display:flex;flex-direction:column;padding:24px 22px 20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.ag-flow li:after{content:'';position:absolute;top:40px;right:-13px;width:10px;height:2px;background:var(--line-strong)}
.ag-flow li:last-child:after{display:none}
.ag-n{font:700 13px var(--mono);color:var(--blue)}
.ag-flow h4{margin:10px 0 8px;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.ag-flow p{flex:1;font-size:15px}
.ag-flow small{display:grid;gap:4px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:#33475b}
.ag-flow small b{margin-right:6px;font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ag-flow .ai{color:var(--blue)}.ag-flow .you{color:var(--green-ink)}

/* Human-in-the-loop statement */
.ag-statement{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 56px;align-items:center;margin-top:56px;padding:40px 44px;border-radius:20px;background:radial-gradient(600px 300px at 100% 0%,rgba(10,122,255,.22),transparent 60%),var(--navy);color:#fff}
.ag-statement .ag-bigline{font-size:clamp(30px,3.6vw,44px);font-weight:750;line-height:1.12;letter-spacing:-.02em;color:#fff}
.ag-statement .ag-bigline strong{color:var(--mint)}
.ag-statement p{font-size:17px;color:#b9cadb}.ag-statement p+p{margin-top:12px;font-size:15px;color:#8fb0cc}

@keyframes ag-ring{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.35);opacity:0}}
@keyframes ag-breathe{50%{opacity:.45}}
@keyframes ag-pop{0%{scale:.3}100%{scale:1}}
@keyframes ag-fade{from{opacity:0}to{opacity:1}}

@media(max-width:960px){
  .agentic-head{grid-template-columns:1fr;align-items:start}
  .ag-stage{aspect-ratio:16/11}
  .ag-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.ag-flow li:after{display:none}
  /* The review card moves below the drawing so it never covers the evidence on shorter stages. */
  .ag-card{position:relative;left:auto;bottom:auto;width:auto;min-height:124px;border:0;border-top:1px solid rgba(140,190,240,.18);border-radius:0;background:#091424;box-shadow:none;opacity:1;transform:none}
  .ag-card-mem .ag-ids,.ag-card-mem .ag-len{max-width:420px}
  .ag-statement{grid-template-columns:1fr;padding:34px 30px}
}
@media(max-width:700px){
  .agent-demo{margin-top:36px}
  .ag-view{border-radius:16px;clip-path:inset(0 round 16px)}
  .ag-stage{aspect-ratio:1/.9}
  .ag-world{--lz1:4px;--lz2:7px;--lz3:10px}
  .ag-minor{display:none}
  .ag-status{left:10px;top:10px;max-width:calc(100% - 20px);padding:6px 12px 6px 10px;border-radius:16px;font-size:12.5px;line-height:1.35}
  .ag-status [data-status]{white-space:normal}
  .ag-sheet,.ag-tally{display:none}
  .ag-controls{display:grid;grid-template-columns:1fr}
  .ag-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ag-chap{justify-content:center;padding:8px 4px;font-size:13px}.ag-chap span{display:none}
  .ag-transport{display:grid;grid-template-columns:1fr 1fr}.ag-btn{justify-content:center}
  .ag-flow-head{margin-top:64px}
  .ag-flow{grid-template-columns:1fr}
  .ag-statement{margin-top:40px;padding:28px 22px}
}