:root{color-scheme:dark;--bg:#06101d;--panel:rgba(8,18,32,.72);--text:#f7fbff;--muted:#a8bad2;--line:rgba(255,255,255,.13);--cyan:#00e5ff;--blue:#4e7fff;--violet:#6c5ce7;--pink:#ff3d8b;--gold:#ffd166}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 6%,rgba(0,229,255,.22),transparent 30%),radial-gradient(circle at 92% 88%,rgba(255,61,139,.18),transparent 34%),linear-gradient(135deg,var(--bg),#08182a 52%,#101827);overflow-x:hidden}body::before{content:"";position:fixed;inset:0 0 auto;height:5px;z-index:10;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--gold));box-shadow:0 0 24px rgba(0,229,255,.42)}.bg-logo{position:fixed;inset:-12vh -18vw;pointer-events:none;background:url('/assets/mainstream-plus-logo.svg') center/contain no-repeat;opacity:.105;filter:drop-shadow(0 0 28px rgba(0,229,255,.18));z-index:0}.bg-logo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 42%,rgba(6,16,29,.58) 72%)}.shell{position:relative;z-index:1;min-height:100vh;padding:26px clamp(18px,4vw,54px) 34px;display:flex;flex-direction:column}.brand-corner{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);width:max-content}.brand-corner img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 22px rgba(0,229,255,.22)}.brand-word{font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1}.brand-word span{background:linear-gradient(90deg,#fff,#dff8ff 45%,#ffe3f0);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-word b{color:var(--pink)}.hero{width:min(1040px,100%);margin:auto}.panel{position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(9,24,42,.78),rgba(7,17,31,.66));box-shadow:0 28px 90px rgba(0,0,0,.44);backdrop-filter:blur(12px)}.panel::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);opacity:.8}.panel-inner{padding:clamp(24px,4.5vw,48px)}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#c8dcf6;margin:0 0 14px}.headline{margin:0;font-size:clamp(34px,6.5vw,76px);line-height:.95;letter-spacing:-.07em}.headline .grad{background:linear-gradient(90deg,var(--cyan),#dbeafe 42%,var(--pink),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{max-width:760px;margin:22px 0 30px;color:var(--muted);font-size:clamp(16px,2.1vw,20px);line-height:1.6}.section-title{margin:0 0 14px;color:#e6f3ff;font-size:13px;text-transform:uppercase;letter-spacing:.16em}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.tile{display:block;text-decoration:none;color:var(--text);padding:18px 18px 17px;border-radius:19px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.tile:hover{transform:translateY(-2px);border-color:rgba(0,229,255,.68);background:rgba(255,255,255,.09);box-shadow:0 0 30px rgba(0,229,255,.14)}.tile-name{font-weight:850;font-size:20px;letter-spacing:-.02em}.tile-hint{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.35}.notice{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:14px;line-height:1.6}.notice strong{color:var(--text)}.foot{text-align:center;color:rgba(168,186,210,.72);font-size:12px;margin-top:18px}@media(max-width:640px){.shell{padding:20px 16px 26px}.brand-corner img{width:38px;height:38px}.brand-word{font-size:21px}.panel-inner{padding:24px}.bg-logo{inset:-6vh -70vw;opacity:.09;background-size:1500px auto}.headline{font-size:40px}.lead{font-size:16px}}

/* 2026-06-09: keep watermark/logo optically centered on all viewports */
.bg-logo{inset:0 !important;background-position:center center !important;background-size:min(1400px,135vw) auto !important;}
@media(max-width:640px){.bg-logo{inset:0 !important;background-position:center center !important;background-size:1200px auto !important;}}

/* 2026-06-12: give the top-left brand more breathing room above the main panel */
.shell{padding-top:clamp(34px,5.5vw,72px) !important;gap:clamp(18px,3vw,34px);}
.hero{margin-top:0 !important;margin-bottom:auto;}
.brand-corner{margin-bottom:0;align-self:flex-start;}
@media(max-width:640px){.shell{padding-top:30px !important;gap:22px;}.hero{margin-top:0 !important;}}

/* 2026-06-12: text-free ribbon header logo */
.brand-corner.brand-ribbon{display:inline-flex;width:min(250px,52vw);height:auto;padding:0;border-radius:0;background:transparent;box-shadow:none;}
.brand-corner.brand-ribbon img{width:100%;height:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.28));}
@media(max-width:640px){.brand-corner.brand-ribbon{width:min(210px,58vw);}}

/* 2026-06-12: ribbon + Mainstream+ wordmark header logo */
.brand-corner.brand-ribbon{width:min(390px,72vw);}
@media(max-width:640px){.brand-corner.brand-ribbon{width:min(300px,82vw);}}

/* 2026-06-12: ribbon wordmark header logo */
.brand-corner.brand-ribbon{width:min(390px,72vw);}
@media(max-width:640px){.brand-corner.brand-ribbon{width:min(300px,82vw);}}