:root{color-scheme:light;--ink:#163047;--muted:#6f7c83;--green:#a9c719;--navy:#204d80;--orange:#f08220;--pink:#e70086}
*{box-sizing:border-box}
html{background:#fbfcfa}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 45% 60% at 0 0,#b7d32b4d,transparent 78%),radial-gradient(ellipse 45% 60% at 100% 0,#ea008633,transparent 78%),radial-gradient(ellipse 43% 55% at 0 100%,#f48b2b42,transparent 78%),radial-gradient(ellipse 43% 55% at 100% 100%,#204d8038,transparent 78%),#fbfcfa;background-attachment:fixed}
body:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--green),var(--green) 25%,var(--pink) 25%,var(--pink) 50%,var(--orange) 50%,var(--orange) 75%,var(--navy) 75%)}
main{width:min(100% - 64px,1040px);margin:auto;padding:34px 0 42px;text-align:center}
.brand-mark{width:156px;height:156px;margin:0 auto 9px}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px #1734480c)}
h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(58px,6vw,78px);line-height:1.04;font-weight:400;letter-spacing:-4px}
h1 span{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;padding-left:.42em;font-family:"Segoe UI",Arial,sans-serif;font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.42em;color:#576c7a}
h1 span:before,h1 span:after{content:"";width:32px;height:1px;background:#bcc8cd}
.motto{margin:21px 0 35px;color:#687880;font-size:16px;line-height:1.6;font-weight:400;letter-spacing:.2px}
.institutions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px;border:1px solid #ffffff;border-radius:28px;background:#ffffff75;box-shadow:0 0 0 1px #233f5010,0 20px 55px -28px #25415438,inset 0 1px 0 #fff}
.institution{--accent:var(--green);--tint:#f1f6df;--symbol:#758b0a;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:176px;padding:23px;border:1px solid #dde5d8;border-radius:18px;background:linear-gradient(140deg,#ffffff 35%,var(--tint));color:var(--ink);text-decoration:none;text-align:left;font:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.institution:before{content:"";position:absolute;left:23px;right:23px;top:0;height:3px;border-radius:0 0 8px 8px;background:var(--accent)}
.institution:after{content:"";position:absolute;z-index:-1;right:-32px;top:12px;width:120px;height:120px;border:1px solid var(--accent);border-radius:50%;opacity:.12;box-shadow:0 0 0 20px var(--tint)}
.college{--accent:var(--navy);--tint:#eaf0f8;--symbol:#204d80;border-color:#d9e2ed}
.course{--accent:var(--orange);--tint:#fff0e2;--symbol:#c56516;border-color:#eedfce}
.soon{--accent:var(--pink);--tint:#fbeaf4;--symbol:#be267e;border-color:#ecdce5;cursor:default}
.symbol{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff;border-radius:15px;background:var(--tint);color:var(--symbol);box-shadow:0 3px 8px #233f5004}
.symbol svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.card-label{margin-top:25px;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.6px}
.arrow{position:absolute;bottom:22px;right:20px;width:28px;height:28px;padding:5px;border:1px solid #ced7dc;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.5;color:#5f7788;background:#ffffffa8;transition:transform .22s ease,background .22s ease,color .22s ease}
.soon .card-label{color:#93627f}.soon:disabled{opacity:1}
a.institution:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 16px 28px -22px var(--symbol)}a.institution:hover .arrow{transform:rotate(45deg);background:var(--symbol);border-color:var(--symbol);color:#fff}
a:focus-visible{outline:3px solid #204d80;outline-offset:5px}
footer{width:min(100% - 64px,1160px);margin:0 auto;padding:20px 0 24px;border-top:1px solid #4860701a}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;font-size:12px;line-height:1.7;color:var(--muted)}footer p{margin:0}footer a{color:inherit;text-decoration:none;text-underline-offset:4px}footer a:hover{color:var(--ink);text-decoration:underline}.credit{display:flex;align-items:center;gap:8px}.credit span{color:#7c8990}.credit a{color:#3a5262;font-weight:600}
@media(max-width:760px){main{width:min(100% - 32px,500px);padding:30px 0 34px}.brand-mark{width:132px;height:132px;margin-bottom:10px}h1{font-size:62px;letter-spacing:-3px}h1 span{font-size:9px;margin-top:15px}.motto{font-size:15px;margin:19px 0 28px}.institutions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px;border-radius:24px}.institution{min-height:145px;padding:18px;border-radius:15px}.institution:before{left:18px;right:18px}.institution:after{width:90px;height:90px}.symbol{width:42px;height:42px;border-radius:12px}.symbol svg{width:25px;height:25px}.card-label{font-size:20px;margin-top:23px}.arrow{bottom:18px;right:15px;width:25px;height:25px;padding:4px}footer{width:calc(100% - 40px);padding:19px 0}.footer-inner{flex-direction:column;gap:6px;text-align:center;font-size:11px}}
@media(max-width:350px){main{width:calc(100% - 24px)}.institutions{gap:8px;padding:8px}.institution{padding:15px}.card-label{font-size:18px}.arrow{right:11px}h1{font-size:55px}}
@media(prefers-reduced-motion:reduce){.institution,.arrow{transition:none}a.institution:hover{transform:none}}