/* Algorex tools and systems page, Nov 2026 */
:root{--panel:#0F2340;--panel2:#16304F;--ptext:#DCE3EC;--pmute:#8C99AB;--pline:#2A4466;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
body{background:var(--paper)}
.pf{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;margin:6px 0 0;flex-wrap:wrap}
.pf button{font:inherit;font-size:15px;font-weight:600;color:var(--slate);background:none;border:0;border-radius:999px;padding:9px 18px;cursor:pointer}
.pf button[aria-pressed=true]{background:var(--navy);color:#fff}
.pf button:hover:not([aria-pressed=true]){color:var(--navy)}
.pfnote{font-size:14px;color:var(--mist);margin-top:10px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:2px solid var(--navy);padding-top:18px;margin-bottom:26px}
.sechead h2{margin:0}.sechead p{margin:0;color:var(--slate);font-size:16px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px}
.tag.free{background:#FBF1DC;color:var(--amber-d)}.tag.paid{background:#E6EBF2;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.item{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.item[hidden]{display:none}
.stage{background:#0B192E;padding:22px 22px 30px;display:flex;justify-content:center;align-items:center;min-height:300px;position:relative}
.stage.light{background:#E9EDF3}
.body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.body h3{font-size:21px;margin:0}.body p{font-size:15.5px;color:var(--slate);margin:0}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.plat{font-size:12.5px;color:var(--slate);border:1px solid var(--line);border-radius:4px;padding:2px 7px}
.plat.on{border-color:var(--navy);color:var(--navy);font-weight:600}
.act{margin-top:auto;padding-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.act .btn{font-size:15px;padding:10px 16px}
.demo{position:absolute;right:10px;bottom:8px;font-size:11px;color:#5F7088;letter-spacing:.04em}
.stage.light .demo{color:#7A8799}
/* the Algorex panel replica */
.ax{background:var(--panel);border:1px solid var(--pline);border-radius:4px;color:var(--ptext);font-family:var(--mono);font-size:12.5px;width:290px;max-width:100%;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ax .hd{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--pline)}
.ax .hd svg{width:20px;height:20px;flex:none}
.ax .hd b{font-family:Inter,sans-serif;font-weight:800;font-size:12px;color:#fff;letter-spacing:.04em;display:block;line-height:1.1}
.ax .hd i{font-style:normal;font-family:Inter,sans-serif;font-weight:700;font-size:9.5px;color:var(--amber);letter-spacing:.08em;display:block}
.ax .st{padding:7px 9px;font-weight:700;border-bottom:1px solid var(--pline);transition:color .3s,background .3s}
.ax .r{display:flex;justify-content:space-between;gap:10px;padding:4px 9px;border-bottom:1px solid rgba(42,68,102,.45)}
.ax .r:last-child{border-bottom:0}.ax .r span:first-child{color:var(--pmute)}
.am{color:var(--amber)}.gr{color:#3FB37F}.rd{color:#E2574C}.mu{color:var(--pmute)}.wh{color:#fff}
.big{font-size:30px;font-weight:700;letter-spacing:.02em;padding:6px 9px 2px;text-align:center}
.bar{height:6px;background:#24405F;border-radius:3px;overflow:hidden;margin:2px 9px 8px}.bar>div{height:100%;background:var(--amber);transition:width .6s}
.mb .r span{flex:1;text-align:right}.mb .r span:first-child{flex:1.3;text-align:left}
.mb .hdr span{color:var(--pmute);font-size:10.5px}
canvas{display:block;max-width:100%}
.tp{display:flex;gap:10px;align-items:flex-start;flex-wrap:nowrap;justify-content:center;width:100%}@media (max-width:560px){.tp{flex-wrap:wrap}}
.tp .ax{width:240px}
.tp label{display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--ptext)}
.tp input[type=checkbox]{accent-color:var(--amber)}
.tp select{font:inherit;background:var(--panel2);color:#fff;border:1px solid var(--pline);border-radius:3px;padding:1px 4px}
.hint{font-family:Inter,sans-serif;font-size:12px;color:#8FA2BC;text-align:center;margin-top:6px}
.themes{display:flex;flex-direction:column;align-items:center;gap:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chips button{font:600 11px Inter,sans-serif;border:1px solid #33506F;background:#16304F;color:#C9D3E0;border-radius:3px;padding:4px 8px;cursor:pointer}
.chips button.on{background:var(--amber);border-color:var(--amber);color:var(--navy)}
/* systems */
.sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-top:1px solid var(--line)}
.sys .stage{min-height:260px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:10px 0}.facts div+div{padding-left:14px}
.facts b{display:block;font-family:"Inter Display",Inter,sans-serif;font-weight:800;font-size:24px;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.facts span{font-size:13px;color:var(--slate)}
.stage.cv{display:block;padding:14px 10px 26px;min-height:0}
.stage.cv .chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;margin:0 6px 2px}
.stage.cv .chip b{font-family:Inter,sans-serif;font-weight:800;font-size:11px;letter-spacing:.06em;color:#fff}
.stage.cv .chip em{font-style:normal;font-weight:700}
.stage.cv .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(224,161,38,.18)}
svg.curve{width:100%;height:auto;display:block}
svg.curve .ln,svg.curve .gl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.6,.2,1)}
svg.curve .ar,svg.curve .dd,svg.curve .end{opacity:0;transition:opacity .8s ease 1.6s}
svg.curve.in .ln,svg.curve.in .gl{stroke-dashoffset:0}svg.curve.in .ar,svg.curve.in .dd,svg.curve.in .end{opacity:1}
.band{margin:0 0 72px}.band img{width:100%;height:300px;object-fit:cover;display:block;border-radius:8px;filter:grayscale(1) contrast(1.05)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.how p{font-size:15.5px;color:var(--slate)}
.how b{display:block;font-family:"Inter Display",Inter,sans-serif;font-weight:800;font-size:28px;color:var(--amber);line-height:1;margin-bottom:10px}
@media (max-width:860px){.grid,.sys,.how{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr 1fr}.band img{height:200px}.stage{min-height:260px;padding:18px 10px}}
@media (prefers-reduced-motion:reduce){svg.curve *{transition:none!important}.ax .st{transition:none}}

.item.why{background:var(--navy);border-color:var(--navy)}.item.why .body{justify-content:center;padding:34px 30px}
.grid.one{grid-template-columns:1fr}.grid.one .item{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.grid.one .stage.cv{display:flex;flex-direction:column;justify-content:center}
@media (max-width:860px){.grid.one .item{grid-template-columns:1fr}}
.item.why .tag{background:var(--amber);color:var(--navy);align-self:flex-start}.item.why h3{color:#fff;font-size:26px;line-height:1.2}.item.why p{color:#C9D3E0}