*{box-sizing:border-box}
:root{--purple:#5b2a63;--purple2:#74357f;--bg:#f5f3f6;--text:#27252a;--muted:#6d6870;--border:#ddd7df}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.portal{min-height:100vh;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--border);padding:18px 28px;display:flex;align-items:center;justify-content:center}
.top h1{margin:0;text-align:center;color:var(--purple);font-size:clamp(1.25rem,3vw,2rem)}
.wrap{width:min(1100px,92%);margin:0 auto;padding:44px 0 50px;flex:1}
.hero{text-align:center;margin-bottom:34px}.hero h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 8px;color:var(--purple)}
.hero p{margin:0;color:var(--muted)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.area{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px 20px;min-height:190px;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:.18s}
.area:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.09);border-color:var(--purple)}
.icon{font-size:3rem;margin-bottom:12px}.area strong{font-size:1.2rem;color:var(--purple)}.area span{font-size:.88rem;color:var(--muted);margin-top:7px;text-align:center}
.footer{text-align:center;padding:18px;color:var(--muted);font-size:.8rem}
.hub{max-width:800px;margin:0 auto}.hub h2{text-align:center;color:var(--purple);margin-bottom:26px}
.systems{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.system{background:#fff;border:1px solid var(--border);border-radius:16px;padding:25px;text-decoration:none;color:inherit;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.system:hover{border-color:var(--purple);box-shadow:0 7px 20px rgba(0,0,0,.08)}
.system h3{margin:0 0 8px;color:var(--purple)}.system p{margin:0;color:var(--muted);line-height:1.4}
.back{display:inline-block;margin-bottom:20px;color:var(--purple);font-weight:bold;text-decoration:none}
@media(max-width:700px){.areas,.systems{grid-template-columns:1fr}.wrap{padding-top:28px}.area{min-height:150px}}