/* ============================================================
   NEON STEEL — home page components
   Hero + automation preview panel, automation cards with the
   duotone-lit step-flow, method steps, CTA.
   Linked after styles.css.
   ============================================================ */

/* Hero + display type (home scale) */
.hero{padding:106px 0 82px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
h1{font-size:clamp(56px,8vw,104px);line-height:.98;letter-spacing:-.03em;font-weight:800;max-width:850px}
h2{font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.02em;font-weight:800}
.lead{margin-top:26px;color:var(--muted);font-size:clamp(18px,2.2vw,22px);max-width:690px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.meta-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:42px}
.metric{font-family:var(--mono);font-size:12px;color:var(--faint)}
.metric strong{display:block;color:var(--text);font-size:24px;font-weight:500;letter-spacing:-.02em}
.metric span{color:var(--neon);text-shadow:var(--glow-text)}

/* Automation preview panel (terminal + pipeline) */
.terminal{padding:22px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.terminal-line{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.terminal-line:last-child{border-bottom:0}
.stage{color:var(--neon);min-width:72px;text-transform:uppercase;font-size:11px;text-shadow:var(--glow-text)}
.terminal strong{color:var(--text);font-weight:500}
.pipeline{padding:20px;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cell{min-height:86px;border:1px solid var(--hair);border-radius:8px;background:rgba(5,6,7,.32);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;position:relative}
.cell.active{border-color:var(--neon);color:var(--neon-bright);box-shadow:var(--glow-sm)}
.cell svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px}
.cell.active{background:rgba(46,155,255,.055)}
.cell.active svg{filter:drop-shadow(0 0 10px rgba(46,155,255,.75))}
.cell span{display:block}

/* Sections + automation cards */
section{padding:84px 0;border-top:1px solid var(--hair)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:30px}
.section-head p{max-width:520px;color:var(--muted)}
.cards{display:flex;flex-direction:column;gap:14px}
.card{display:block;background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:22px;min-height:226px;position:relative;transition:border-color var(--dur-fast,.14s) ease-out,box-shadow var(--dur-base,.22s) ease-out}
.card:before{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.7}
.card h3{transition:color var(--dur-fast,.14s) ease-out,text-shadow var(--dur-fast,.14s) ease-out}
.card:hover{border-color:var(--neon);box-shadow:var(--glow-md)}
.card:hover h3{color:var(--neon-bright);text-shadow:0 0 12px rgba(46,155,255,.35)}
.card .num{font-family:var(--mono);font-size:11px;color:var(--neon);letter-spacing:.14em;text-shadow:var(--glow-text)}
.card h3{margin-top:54px}
.card p{margin-top:14px;color:var(--muted)}
.card .tag{display:inline-flex;margin-top:20px;font-family:var(--mono);font-size:10px;color:var(--neon-bright);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.card.featured{border-color:rgba(46,155,255,.35);box-shadow:var(--glow-sm)}

/* Card layout for the step-flow */
.card{display:flex;flex-direction:column}
.card .num,.card h3,.card p{flex:none}
.card .flow{margin-top:auto;padding-top:22px}
.card .tag{align-self:flex-start;margin-top:18px}

/* Automation step-flow: duotone-lit nodes igniting left->right.
   Dormant steel until live (featured) or hover/focus. */
.flow{display:flex;align-items:center}
.flow .fl-node{flex:none;width:72px;height:72px;border-radius:12px;border:1.5px solid var(--hair);background:var(--steel-900);display:flex;align-items:center;justify-content:center;color:var(--faint);transition:color var(--dur-fast,.14s) ease-out,border-color var(--dur-fast,.14s) ease-out,box-shadow var(--dur-base,.22s) ease-out,transform var(--dur-base,.22s) ease-out}
.flow .fl-node svg{width:36px;height:36px;stroke-width:1.5}
.flow .fl-wire{flex:1;min-width:8px;height:2px;background:var(--hair);border-radius:2px;position:relative;overflow:hidden}
.flow .fl-wire::after{content:"";position:absolute;inset:0;width:0;background:var(--neon);box-shadow:var(--glow-line);transition:width var(--dur-stage,.7s) linear}
.flow .fl-wire.on::after{width:100%}
.flow .fl-node.lit{color:var(--neon);border-color:var(--neon);box-shadow:var(--glow-md)}
.flow .fl-node.head{color:var(--neon-bright);border-color:var(--neon-bright);box-shadow:var(--glow-lg);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.flow .fl-node,.flow .fl-wire::after{transition:none}}

/* Card chip + focus (consistent neon hover) */
.tag{transition:color var(--dur-fast,.14s) ease-out,border-color var(--dur-fast,.14s) ease-out,box-shadow var(--dur-base,.22s) ease-out}
.card:hover .tag{color:var(--neon-bright);border-color:var(--neon);box-shadow:var(--glow-sm)}
.card:focus-visible{outline:2px solid var(--neon-bright);outline-offset:3px}

/* Method steps + CTA */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.step{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:18px;min-height:150px;position:relative}
.step:not(:last-child):after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:1px;background:var(--neon);box-shadow:var(--glow-sm)}
.step .n{font-family:var(--mono);font-size:10px;color:var(--neon);letter-spacing:.14em;text-shadow:var(--glow-text)}
.step strong{display:block;margin-top:32px;font-size:22px;letter-spacing:-.03em}
.step p{margin-top:8px;color:var(--muted);font-size:14px}
.cta{background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;padding:34px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--glow-sm)}

/* Pipeline cell ignite/breathe (staggered) */
.cell.active{animation:cell-ignite 520ms ease-out 1 both,cell-breathe 2.8s ease-in-out 620ms infinite}
.cell.active:nth-child(1){animation-delay:80ms,700ms}.cell.active:nth-child(2){animation-delay:190ms,810ms}.cell.active:nth-child(3){animation-delay:300ms,920ms}.cell.active:nth-child(4){animation-delay:410ms,1030ms}.cell.active:nth-child(5){animation-delay:520ms,1140ms}
@keyframes cell-ignite{0%{opacity:.45;border-color:var(--hair);box-shadow:none;transform:translateY(0)}28%{opacity:1;border-color:var(--neon-bright);box-shadow:0 0 20px rgba(46,155,255,.62)}42%{opacity:.7;border-color:var(--line);box-shadow:none}100%{opacity:1;border-color:var(--neon);box-shadow:var(--glow-sm)}}
@keyframes cell-breathe{0%,100%{box-shadow:0 0 14px rgba(46,155,255,.36)}50%{box-shadow:0 0 25px rgba(111,192,255,.55)}}
@media (prefers-reduced-motion: reduce){.cell.active{animation:none}}

/* Automation preview modal (opens the workflow in an overlay) */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(5,6,7,.74);backdrop-filter:blur(6px)}
.modal-panel{position:relative;width:min(1160px,100%);height:min(86vh,940px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--neon);border-radius:12px;box-shadow:var(--glow-lg),var(--shadow);overflow:hidden}
.modal:not([hidden]) .modal-panel{animation:modal-in var(--dur-base,.22s) var(--ease-out,ease) both}
.modal-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid var(--hair);background:var(--surface-raised)}
.modal-x{padding:8px 14px}
.modal-body{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.modal-body h3{color:var(--steel-000)}
.am-summary{margin:0;max-width:64ch}
.am-flowrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.am-flow{flex:1;min-width:240px}
.am-run{flex:none}
.am-io{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.am-panel{background:var(--steel-900);border:1px solid var(--hair);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.am-panel-h{padding:10px 12px;border-bottom:1px solid var(--hair);background:var(--surface-raised)}
.am-input{margin:0;padding:14px;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7;white-space:pre-wrap;overflow:auto}
.am-output{padding:6px 12px 12px;display:flex;flex-direction:column;min-height:140px}
.am-out-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;font-family:var(--mono);font-size:12px;padding:8px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(4px);transition:opacity .25s ease-out,transform .25s ease-out}
.am-out-row:last-child{border-bottom:0}
.am-out-row.show{opacity:1;transform:none}
.am-out-k{color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.am-out-v{color:var(--text)}
.am-out-ok{color:var(--ok);text-shadow:0 0 8px rgba(143,224,60,.55)}
#am-status{color:var(--ok)}
.am-action{margin:0;font-family:var(--mono);font-size:13px;color:var(--neon-bright);text-shadow:var(--glow-text);opacity:0;transition:opacity .3s ease-out}
.am-action.show{opacity:1}
.am-action:before{content:"→ "}
.am-cta{align-self:flex-start}
@media (prefers-reduced-motion: reduce){.am-out-row{transition:none}.am-action{transition:none}}
@media(max-width:640px){.am-io{grid-template-columns:1fr}.am-flowrow .am-run{width:100%}}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.modal:not([hidden]) .modal-panel{animation:none}}
@media(max-width:560px){.modal{padding:0}.modal-panel{width:100%;height:100%;border-radius:0;border-left:0;border-right:0}}

/* Responsive */
@media(max-width:900px){.hero-grid,.section-head,.cta{grid-template-columns:1fr;display:grid}.cards,.process,.pipeline{grid-template-columns:1fr}.card.featured{grid-column:auto}.navlinks a:not(.btn){display:none}h1{font-size:clamp(48px,16vw,82px)}}
@media(max-width:560px){.wrap{width:min(var(--max),calc(100vw - 26px))}.hero{padding-top:76px}.btn{width:100%}.meta-row{gap:16px}.footer-row{display:grid}.pipeline{padding:14px}.cell{min-height:70px}}