:root{--canvas:#f8fafc;--surface:#fff;--ink:#0f172a;--muted:#5b687d;--line:#dbe3ef;--primary:#4f46e5;--primary-dark:#3730a3;--violet:#7c3aed;--emerald:#059669;--amber:#d97706;--rose:#e11d48;--shadow:0 18px 40px -24px rgba(79,70,229,.34),0 8px 18px -14px rgba(15,23,42,.14)}*{box-sizing:border-box}html,body{overflow-x:hidden}body{margin:0;background:var(--canvas);color:var(--ink);font:500 15px/1.6 "Plus Jakarta Sans",system-ui,sans-serif}button,input{font:inherit;color:inherit}::selection{background:#c7d2fe;color:var(--ink)}:focus-visible{outline:3px solid #6366f1;outline-offset:3px}.skip{position:fixed;top:-6rem;left:1rem;z-index:20;padding:.8rem 1rem;background:var(--ink);color:#fff;border-radius:8px}.skip:focus{top:1rem}
header{width:min(calc(100% - 2rem),1240px);min-height:76px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none;font-weight:800}.brand span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;box-shadow:0 8px 18px -6px rgba(79,70,229,.62)}nav{display:flex;gap:.7rem}.button{min-height:44px;padding:.65rem 1.05rem;border:1px solid transparent;border-radius:10px;font-weight:800;cursor:pointer;transition:transform .18s ease-out,box-shadow .18s ease-out,background .18s ease-out}.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(0)}.primary{background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;box-shadow:0 8px 20px -8px rgba(79,70,229,.7)}.primary:hover{box-shadow:0 12px 24px -8px rgba(79,70,229,.74)}.secondary{background:var(--surface);border-color:var(--line);color:#334155}.secondary:hover{background:#f1f5f9;border-color:#cbd5e1}
main{position:relative;width:min(calc(100% - 2rem),1240px);margin:0 auto;padding:clamp(3rem,6vw,5.5rem) 0}main::before{content:"";position:absolute;width:430px;height:430px;right:-260px;top:-180px;z-index:-1;border-radius:50%;background:rgba(124,58,237,.18);filter:blur(75px)}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:end;margin-bottom:2.4rem}.hero h1{max-width:790px;margin:0;font-size:clamp(3rem,6vw,5.7rem);line-height:.96;letter-spacing:-.04em;text-wrap:balance}.hero>div>p:last-child{max-width:670px;margin:1.2rem 0 0;color:var(--muted);font-size:1.06rem}.summary{display:grid;grid-template-columns:repeat(2,132px);gap:.8rem;perspective:900px}.summary div{padding:1.1rem;background:var(--surface);border:1px solid #e2e8f0;border-radius:14px;box-shadow:var(--shadow)}.summary div:first-child{transform:rotateY(-6deg)}.summary div:last-child{transform:translateY(12px) rotateY(5deg)}.summary strong,.summary span{display:block}.summary strong{font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}.summary span{margin-top:.25rem;color:var(--muted);font-size:.78rem}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:1.25rem;align-items:start}.matrix-card,.insight-card,.inventory{background:var(--surface);border:1px solid #e2e8f0;border-radius:14px;box-shadow:var(--shadow)}.matrix-card{padding:1.5rem}.card-title,.inventory-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.card-title h2,.insight-card h2,.inventory h2{margin:0;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em}.legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem 1rem;color:#475569;font-size:.78rem;font-weight:700}.legend i{display:inline-block;width:9px;height:9px;margin-right:.35rem;border-radius:50%}.legend .keep,.point.keep{background:#10b981}.legend .evolve,.point.evolve{background:#6366f1}.legend .replace,.point.replace{background:#f59e0b}.legend .retire,.point.retire{background:#f43f5e}.matrix-shell{position:relative;margin:2rem 0 1.7rem;padding-left:27px}.matrix{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.75;overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.quadrant{padding:.9rem;border:.5px solid #dbe3ef}.quadrant strong,.quadrant small{display:block}.quadrant small{color:var(--muted);font-size:.78rem}.q-evolve{background:#eef2ff}.q-keep{background:#ecfdf5}.q-retire{background:#fff1f2}.q-replace{background:#fffbeb}#points{position:absolute;inset:0;pointer-events:none}.axis{position:absolute;color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.axis.y{left:-58px;top:46%;transform:rotate(-90deg)}.axis.x{left:45%;bottom:-24px}.point{position:absolute;z-index:2;display:grid;place-items:center;width:42px;height:42px;border:3px solid #fff;border-radius:50%;box-shadow:0 5px 12px rgba(15,23,42,.22);transform:translate(-50%,50%);color:#fff;font-size:.72rem;font-weight:800;cursor:help;pointer-events:auto;transition:transform .18s ease-out,box-shadow .18s ease-out}.point.replace{color:#422006}.point:hover,.point:focus-visible{z-index:4;transform:translate(-50%,50%) scale(1.14);box-shadow:0 10px 20px rgba(15,23,42,.25)}.point::after{content:attr(data-name);position:absolute;bottom:48px;left:50%;width:max-content;max-width:180px;transform:translateX(-50%);padding:.45rem .6rem;border-radius:8px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;opacity:0;pointer-events:none}.point:hover::after,.point:focus-visible::after{opacity:1}.insight-card{padding:1.4rem;background:linear-gradient(155deg,#312e81,#4f46e5 58%,#6d28d9);color:#fff;box-shadow:0 20px 40px -24px rgba(49,46,129,.8)}.insight-card>p:not(.note){color:#e0e7ff;font-size:.9rem}.cost{padding:1rem 0;border-top:1px solid rgba(255,255,255,.22)}.cost span,.cost strong{display:block}.cost span{color:#c7d2fe;font-size:.78rem;font-weight:700}.cost strong{font-size:1.6rem;font-variant-numeric:tabular-nums}.note{padding-top:1rem;border-top:1px solid rgba(255,255,255,.22);color:#e0e7ff;font-size:.76rem}
.inventory{min-width:0;max-width:100%;margin-top:1.4rem;overflow:hidden}.inventory-head{padding:1.4rem}.inventory-head>p{margin:.25rem 0 0;color:var(--muted);font-size:.78rem;font-weight:700}.table-scroll{width:100%;overflow:auto}table{width:100%;min-width:760px;border-collapse:collapse}th{padding:.78rem 1rem;text-align:left;background:#f8fafc;border-block:1px solid #e2e8f0;color:#475569;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em}td{padding:.9rem 1rem;border-bottom:1px solid #edf1f6}.app-name{font-weight:800}.bar{width:110px;height:7px;margin-top:.4rem;overflow:hidden;border-radius:999px;background:#e2e8f0}.bar i{display:block;height:100%;background:var(--primary)}.recommendation{display:inline-block;padding:.28rem .58rem;border-radius:999px;font-size:.76rem;font-weight:800}.recommendation.keep{background:#d1fae5;color:#065f46}.recommendation.evolve{background:#e0e7ff;color:#3730a3}.recommendation.replace{background:#fef3c7;color:#92400e}.recommendation.retire{background:#ffe4e6;color:#9f1239}.delete{width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:#64748b;cursor:pointer;font-size:1.2rem}.delete:hover{background:#fff1f2;color:#be123c}.empty{text-align:center;padding:4rem}.empty>span{font-size:3rem;color:var(--primary)}.empty h3{margin:.2rem;font-size:1.5rem}.empty p{color:var(--muted)}
dialog{width:min(calc(100% - 2rem),590px);padding:0;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.3)}dialog::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}form{padding:1.6rem}.dialog-head{display:flex;justify-content:space-between;gap:1rem}.dialog-head h2{margin:0;font-size:1.8rem;letter-spacing:-.02em}.close{width:44px;height:44px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;font-size:1.4rem;cursor:pointer}label{display:block;margin-top:1.2rem;font-weight:800}label small{display:block;color:var(--muted);font-weight:500}input[type=text],input[type=number],label>input:not([type=range]){width:100%;padding:.78rem;border:1px solid #cbd5e1;border-radius:9px;background:#fff}input[type=range]{width:calc(100% - 40px);accent-color:var(--primary)}output{font-weight:800}.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.6rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:850px){.workspace,.hero{grid-template-columns:1fr}.summary{justify-self:start}.card-title{display:block}.legend{justify-content:flex-start;margin-top:1rem}.matrix{aspect-ratio:1.25}.inventory{width:calc(100vw - 2rem)}}
@media(max-width:600px){header{padding:.7rem 0}.brand strong,nav .secondary{display:none}.hero h1{font-size:3.2rem}.summary{width:100%;grid-template-columns:1fr 1fr}.summary div:first-child,.summary div:last-child{transform:none}.matrix-card{padding:1rem}.quadrant small{display:none}.point{width:32px;height:32px}.two{grid-template-columns:1fr}.inventory-head{display:block}table{min-width:0}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}tbody{display:grid;gap:1rem;padding:1rem}tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:.8rem;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 10px 24px -20px rgba(79,70,229,.5)}td{padding:.5rem;border:0}td:first-child{grid-column:1/-1}td:nth-child(2)::before,td:nth-child(3)::before,td:nth-child(4)::before,td:nth-child(5)::before{display:block;margin-bottom:.2rem;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase}td:nth-child(2)::before{content:"Business value"}td:nth-child(3)::before{content:"Technical health"}td:nth-child(4)::before{content:"Annual cost"}td:nth-child(5)::before{content:"Recommendation"}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}