@font-face{font-family:"Montserrat";src:url("assets/Montserrat.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--navy:#2C3690;--magenta:#CA1A7C;--ink:#1d2140;--muted:#5d6280;--line:#e3e5f0;--bg:#f6f7fb}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Montserrat",system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between}
.logo{height:64px;display:block}
.hub-tag{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border:1.5px solid var(--line);padding:8px 14px;border-radius:999px}
main{max-width:1180px;margin:0 auto;padding:56px 32px 40px}
h1{font-size:40px;font-weight:800;color:var(--navy);margin:0 0 8px;letter-spacing:-.01em}
.sub{font-size:18px;color:var(--muted);margin:0 0 40px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tile{display:flex;flex-direction:column;gap:22px;background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:34px 32px 30px;text-decoration:none;color:inherit;min-height:260px;transition:border-color .15s,transform .15s}
.tile:hover,.tile:focus-visible{border-color:var(--navy);outline:none}
.tile:focus-visible{box-shadow:0 0 0 4px rgba(44,54,144,.18)}
.ic{width:72px;height:72px;border-radius:20px;background:#eef0fa;display:grid;place-items:center;color:var(--navy)}
.ic.m{background:#fbeaf3;color:var(--magenta)}
.ic svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-name{font-size:24px;font-weight:700;color:var(--ink);margin:0}
.t-line{font-size:16px;color:var(--muted);margin:6px 0 0;font-weight:500;line-height:1.4}
.open{margin-top:auto;font-weight:700;font-size:16px;color:var(--magenta);display:flex;align-items:center;gap:8px}
.open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tile.soon{border:2px dashed #c9cce0;background:transparent;cursor:default}
.tile.soon .ic{background:transparent;border:2px dashed #c9cce0;color:#9a9fbd}
.tile.soon .t-name{color:#7d82a3}
.badge{align-self:flex-start;margin-top:auto;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7d82a3;background:#eceef6;border-radius:999px;padding:7px 12px;white-space:nowrap}
.note{margin:36px 0 0;font-size:15px;color:var(--muted);display:flex;align-items:center;gap:10px;font-weight:500}
.note svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
footer{max-width:1180px;margin:0 auto;padding:28px 32px 40px;border-top:1px solid var(--line);font-size:13px;color:#8a8fab;font-weight:500}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
 .top-in{padding:16px 20px}.logo{height:40px}.hub-tag{font-size:11px;padding:6px 10px}
 main{padding:30px 20px 24px}h1{font-size:30px}.sub{font-size:16px;margin-bottom:24px}
 .grid{grid-template-columns:1fr;gap:14px}
 .tile{flex-direction:row;align-items:center;gap:18px;min-height:0;padding:20px 18px;border-radius:20px}
 .ic{width:60px;height:60px;border-radius:16px;flex:none}.ic svg{width:30px;height:30px}
 .t-name{font-size:19px}.t-line{font-size:14px;margin-top:3px}
 .tile .open{margin:0 0 0 auto}.tile .open span{display:none}.open svg{width:22px;height:22px}
 .tile.soon .badge{margin:0 0 0 auto;align-self:center;font-size:11px;padding:6px 10px}
 .note{font-size:13.5px;margin-top:24px;align-items:flex-start}
 footer{padding:22px 20px 32px;font-size:12px;line-height:1.5}
}
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:32px}
.card{width:100%;max-width:440px;background:#fff;border:1.5px solid var(--line);border-radius:28px;padding:44px 40px 36px;text-align:center}
.card .logo{height:62px;margin:0 auto 26px}
.card h1{font-size:28px;margin-bottom:6px}
.card p{color:var(--muted);margin:0 0 28px;font-weight:500}
label{display:block;text-align:left;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:8px}
input{width:100%;font:inherit;font-size:18px;padding:16px 18px;border:1.5px solid #cfd2e3;border-radius:14px;outline:none;color:var(--ink)}
input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(44,54,144,.15)}
.btn{display:block;width:100%;margin-top:18px;background:var(--navy);color:#fff;border:0;border-radius:14px;font:inherit;font-weight:700;font-size:18px;padding:17px}
.small{font-size:13px;color:#8a8fab;margin-top:22px;font-weight:500}
.login-foot{position:fixed;left:0;right:0;bottom:20px;text-align:center;font-size:12.5px;color:#8a8fab;font-weight:500}

/* v2 heavier color */
body{background:#eef0f8}
.top{background:#fff;border-bottom:0}
.hub-tag{display:none}
.hero{background:linear-gradient(110deg,#2C3690 0%,#3a3f9e 55%,#CA1A7C 100%);color:#fff}
.hero-in{max-width:1180px;margin:0 auto;padding:44px 32px 120px}
.hero h1{color:#fff;margin:0 0 8px}
.hero .sub{color:rgba(255,255,255,.85);margin:0}
main{margin-top:-90px;padding-top:0}
.tile{background:var(--navy);border:0;color:#fff}
.tile:has(.ic.m){background:var(--magenta)}
.tile .ic,.tile .ic.m{background:rgba(255,255,255,.16);color:#fff}
.tile .t-name{color:#fff}
.tile .t-line{color:rgba(255,255,255,.82)}
.tile .open{color:#fff}
.tile:hover{filter:brightness(1.08)}
.tile.soon{background:#fff;border:2px dashed #b9bdd8;color:inherit}
.tile.soon .ic{background:transparent;border:2px dashed #b9bdd8;color:#8a8fb0}
.tile.soon .t-name{color:#5d6280}.tile.soon .t-line{color:#8a8fab}
@media (max-width:640px){.hero-in{padding:28px 20px 96px}main{margin-top:-76px}}

/* v3 both colors per tile */
.tile,.tile:has(.ic.m){background:linear-gradient(135deg,#2C3690 0%,#2C3690 45%,#CA1A7C 100%)}
.tile.soon{background:#fff}

/* v4 page previews in brand frame */
.grid{gap:26px}
.tile,.tile:has(.ic.m){background:linear-gradient(135deg,#2C3690 0%,#2C3690 40%,#CA1A7C 100%);padding:8px 8px 24px;gap:18px;min-height:0;border-radius:24px}
.shot{border-radius:17px;overflow:hidden;aspect-ratio:16/10;background:#fff;line-height:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.tile:hover .shot img{transform:scale(1.03)}
.tile .t-text,.tile .open,.tile .badge{margin-left:20px;margin-right:20px}
.tile .t-name{font-size:22px}
.tile .open{margin-top:auto}
.tile.soon{background:#fff;border:2px dashed #b9bdd8;padding:8px 8px 24px}
.soon-shot{background:#eef0f8;display:grid;place-items:center;line-height:normal}
.soon-ic{width:72px;height:72px;border-radius:20px;border:2px dashed #b9bdd8;display:grid;place-items:center;color:#8a8fb0}
.soon-ic svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
 .grid{grid-template-columns:1fr;gap:16px}
 .tile,.tile.soon{flex-direction:column;align-items:stretch;padding:7px 7px 16px;gap:14px;border-radius:22px}
 .shot{border-radius:16px;aspect-ratio:16/9}
 .tile .t-text{margin:0 14px}
 .tile{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:14px}
 .tile .shot{grid-column:1/-1}
 .tile .t-text{margin:0 0 0 14px}
 .tile .open{margin:0 16px 0 8px;align-self:center}
 .tile.soon .badge{margin:0 14px 0 8px;align-self:center}
 .t-name{font-size:19px}
}
.tile:not(.soon) .shot{box-shadow:0 0 0 2px rgba(255,255,255,.75)}