:root{--bg:#06050a;--panel:rgba(13,11,20,.78);--panel2:rgba(23,19,34,.78);--purple:#a855f7;--purple2:#6d28d9;--pink:#ec4899;--text:#f7f4ff;--muted:#9b95ab;--line:rgba(255,255,255,.09);--green:#49f5a5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#050408;color:var(--text);overflow-x:hidden}body{min-height:100vh;background-image:linear-gradient(90deg,rgba(5,4,9,.97) 0%,rgba(5,4,9,.91) 28%,rgba(5,4,9,.58) 54%,rgba(5,4,9,.76) 100%),url('../images/work/background2233.png');background-size:cover;background-position:center center;background-attachment:fixed}
a{text-decoration:none;color:inherit}#fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.scene-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 72% 43%,transparent 0 20%,rgba(5,4,8,.24) 48%,rgba(2,1,4,.91) 100%)}.scene-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(170,100,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(170,100,255,.16) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(to right,#000 0%,transparent 75%)}
.rail{position:fixed;z-index:30;left:0;top:0;bottom:0;width:78px;border-right:1px solid var(--line);background:rgba(5,4,9,.74);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;padding:20px 0}.rail-logo{width:46px;height:46px;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,var(--purple),#4c1d95);clip-path:polygon(14% 0,100% 0,100% 76%,76% 100%,0 100%,0 14%);box-shadow:0 0 32px rgba(168,85,247,.4)}.rail-logo span{font-weight:950;font-size:22px;font-style:italic}.rail-nav{display:flex;flex-direction:column;gap:7px;margin:auto 0}.rail-nav a{width:48px;height:48px;display:grid;place-items:center;color:#8d8699;border:1px solid transparent;position:relative;transition:.25s}.rail-nav a:hover,.rail-nav a.active{color:white;background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.38);box-shadow:inset 3px 0 var(--purple),0 0 20px rgba(168,85,247,.08)}.rail-nav a:after{content:attr(data-label);position:absolute;left:58px;top:50%;transform:translate(8px,-50%);padding:8px 10px;background:#120f19;border:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:1.4px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}.rail-nav a:hover:after{opacity:1;transform:translate(0,-50%)}.rail-bottom{display:flex;flex-direction:column;align-items:center;gap:7px;color:#777181}.rail-bottom small{font-size:8px;letter-spacing:1.5px}.pulse-dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 0 rgba(73,245,165,.5);animation:pulse 1.7s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(73,245,165,0)}100%{box-shadow:0 0 0 0 rgba(73,245,165,0)}}
.app-shell{position:relative;z-index:2;margin-left:78px;min-height:100vh;padding:0 44px 26px;display:flex;flex-direction:column}.topbar{min-height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brandline{display:flex;align-items:center;gap:13px}.brand-icon{width:38px;height:38px;border:1px solid rgba(168,85,247,.46);display:grid;place-items:center;color:var(--purple);background:rgba(168,85,247,.08);transform:rotate(45deg)}.brand-icon i{transform:rotate(-45deg)}.brandline strong{display:block;font-size:18px;letter-spacing:2.5px;font-style:italic}.brandline span{display:block;margin-top:3px;font-size:8px;color:#817b8d;letter-spacing:2px}.top-actions{display:flex;align-items:center;gap:22px}.status-pill{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#b5afbf;padding:10px 13px;border:1px solid var(--line);background:rgba(10,8,15,.55)}.status-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 12px var(--green)}.clock{font-family:Consolas,monospace;font-size:15px;letter-spacing:2px;color:#d5cfdf}
.stage{flex:1;display:grid;grid-template-columns:minmax(420px,.95fr) minmax(520px,1.05fr);align-items:center;gap:52px;padding:46px 0 38px;max-width:1540px;width:100%;margin:0 auto}.hero-copy{max-width:660px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2.8px;color:#a9a1b5;display:flex;align-items:center;gap:12px;margin-bottom:24px}.eyebrow span{color:var(--purple);font-family:Consolas,monospace}.eyebrow:after{content:"";height:1px;width:82px;background:linear-gradient(90deg,var(--purple),transparent)}h1{margin:0;font-size:clamp(58px,6.3vw,105px);line-height:.82;letter-spacing:-5px;font-weight:950;font-style:italic;text-shadow:0 8px 38px rgba(0,0,0,.4)}h1 span{color:#d9d5df;-webkit-text-stroke:1px rgba(255,255,255,.35);color:transparent}h1 em{font-style:inherit;color:var(--purple);text-shadow:0 0 30px rgba(168,85,247,.36)}.hero-copy>p{max-width:560px;color:#a9a2b4;line-height:1.8;font-size:14px;margin:28px 0 30px;border-left:2px solid rgba(168,85,247,.58);padding-left:16px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.action{min-width:235px;height:66px;display:flex;align-items:center;gap:13px;padding:0 17px;border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));transition:.25s}.action i{font-size:19px}.action span{font-size:11px;font-weight:900;letter-spacing:1.1px}.action small{display:block;color:inherit;opacity:.55;font-size:7px;margin-top:4px;letter-spacing:1.2px}.action b{margin-left:auto;font-size:16px}.action.primary{background:linear-gradient(135deg,#8b3cf0,#5f23c2);border-color:#b674ff;box-shadow:0 14px 34px rgba(105,40,210,.28)}.action.secondary{background:rgba(14,11,20,.72);backdrop-filter:blur(8px)}.action:hover{transform:translateY(-3px);filter:brightness(1.13)}
.command-wrap{position:relative;perspective:1200px}.command-card{position:relative;background:linear-gradient(145deg,rgba(19,15,27,.92),rgba(8,7,12,.86));border:1px solid rgba(198,149,255,.22);padding:25px;box-shadow:0 34px 80px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(22px);clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,6% 100%,0 93%);transform-style:preserve-3d;transition:transform .13s ease-out}.command-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(168,85,247,.06) 47%,transparent 65%)}.corner{position:absolute;width:40px;height:40px;border-color:var(--purple);z-index:4;opacity:.8}.corner-a{left:-9px;top:-9px;border-left:2px solid;border-top:2px solid}.corner-b{right:-9px;bottom:-9px;border-right:2px solid;border-bottom:2px solid}.card-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.card-head span{font-size:8px;color:#8f879a;letter-spacing:2px}.card-head h2{font-size:20px;margin:5px 0 0;letter-spacing:1.4px}.signal{display:flex;gap:4px;align-items:flex-end;height:18px}.signal b{width:3px;background:var(--purple);box-shadow:0 0 8px rgba(168,85,247,.6);animation:signal 1.4s ease-in-out infinite}.signal b:nth-child(1){height:5px}.signal b:nth-child(2){height:9px;animation-delay:.1s}.signal b:nth-child(3){height:13px;animation-delay:.2s}.signal b:nth-child(4){height:18px;animation-delay:.3s}@keyframes signal{50%{opacity:.25}}.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:16px 0}.access-grid a{position:relative;min-height:138px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:19px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:.28s}.access-grid a:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 10%,rgba(168,85,247,.19),transparent 55%);opacity:0;transition:.25s}.access-grid a:hover{border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.09);transform:translateY(-4px)}.access-grid a:hover:before{opacity:1}.access-grid i{position:absolute;top:20px;left:20px;font-size:22px;color:#c692ff}.access-grid .num{position:absolute;top:14px;right:15px;font-family:Consolas,monospace;font-size:8px;color:#6f6877}.access-grid strong{font-size:11px;letter-spacing:1px;z-index:1}.access-grid small{font-size:8px;color:#777080;margin-top:5px;z-index:1}.access-grid b{position:absolute;right:15px;bottom:17px;color:#6e6877;font-size:13px}.server-bar{display:grid;grid-template-columns:34px 1fr auto auto;gap:13px;align-items:center;border:1px solid var(--line);background:rgba(3,3,6,.42);padding:13px 14px}.server-status{width:32px;height:32px;border:1px solid rgba(73,245,165,.28);display:grid;place-items:center}.server-status span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.server-bar small{display:block;color:#777080;font-size:7px;letter-spacing:1.5px}.server-bar strong{display:block;margin-top:3px;font-size:11px;letter-spacing:1px}.server-bar code{color:#a89fb2;font-family:Consolas,monospace;font-size:10px}.server-bar>a{font-size:8px;font-weight:900;letter-spacing:1px;padding:10px 12px;background:rgba(168,85,247,.13);border:1px solid rgba(168,85,247,.28);color:#d5afff}.server-bar>a:hover{background:var(--purple);color:white}
.hud-footer{min-height:76px;border-top:1px solid var(--line);display:flex;align-items:center;gap:32px}.hud-stat span{display:block;font-size:7px;color:#6e6877;letter-spacing:1.5px}.hud-stat strong{display:block;font-size:10px;margin-top:4px;letter-spacing:1px}.hud-stat strong.green{color:var(--green)}.hud-line{display:flex;align-items:flex-end;gap:3px;flex:1;max-width:260px;height:18px}.hud-line i{height:1px;background:rgba(168,85,247,.35);flex:1}.hud-line i:nth-child(3),.hud-line i:nth-child(5){height:5px}.social-mini{margin-left:auto;display:flex;gap:8px}.social-mini a{width:35px;height:35px;border:1px solid var(--line);display:grid;place-items:center;color:#8e8799;transition:.2s}.social-mini a:hover{color:#fff;border-color:rgba(168,85,247,.55);background:rgba(168,85,247,.12)}.scanline{position:fixed;left:78px;right:0;top:-10%;height:2px;z-index:50;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(168,85,247,.08),rgba(255,255,255,.18),rgba(168,85,247,.08),transparent);animation:scan 9s linear infinite;opacity:.5}@keyframes scan{to{top:110%}}
@media(max-width:1180px){.stage{grid-template-columns:1fr;max-width:850px;padding-top:55px}.hero-copy{max-width:780px}.command-wrap{max-width:760px}.top-actions .status-pill{display:none}h1{font-size:78px}.hud-footer{margin-top:28px}}
@media(max-width:760px){body{background-position:66% center}.rail{width:60px}.rail-logo{width:38px;height:38px}.rail-nav a{width:42px;height:42px}.app-shell{margin-left:60px;padding:0 18px 18px}.topbar{min-height:74px}.brandline span,.clock{display:none}.stage{padding:34px 0 25px;gap:38px;display:block}.hero-copy{margin-bottom:34px}h1{font-size:clamp(48px,14vw,72px);letter-spacing:-3px}.hero-copy>p{font-size:12px}.action{min-width:100%;height:62px}.access-grid{grid-template-columns:repeat(2,1fr)}.access-grid a{min-height:120px}.server-bar{grid-template-columns:34px 1fr auto}.server-bar code{display:none}.hud-footer{gap:18px;flex-wrap:wrap;padding-top:18px}.hud-line{display:none}.social-mini{width:100%;margin:0}.scanline{left:60px}}
@media(max-width:480px){.rail{bottom:auto;height:64px;width:100%;right:0;flex-direction:row;padding:0 12px;border-right:0;border-bottom:1px solid var(--line)}.rail-logo{flex:0 0 38px}.rail-nav{flex-direction:row;margin:0 0 0 auto;gap:2px}.rail-nav a{width:35px;height:40px}.rail-nav a:nth-child(n+6){display:none}.rail-nav a:after,.rail-bottom{display:none}.app-shell{margin-left:0;padding:64px 14px 14px}.topbar{min-height:62px}.top-actions{display:none}.brand-icon{width:32px;height:32px}.brandline strong{font-size:15px}.stage{padding-top:24px}.eyebrow{font-size:8px}h1{font-size:46px}.command-card{padding:14px}.card-head h2{font-size:16px}.access-grid{gap:6px}.access-grid a{min-height:108px;padding:13px}.access-grid i{top:15px;left:15px}.server-bar{grid-template-columns:30px 1fr}.server-bar>a{display:none}.hud-footer{min-height:auto;padding-bottom:10px}.scanline{left:0}}

/* Mobile polish 2026 */
@media (max-width: 600px){
  html,body{max-width:100%;overflow-x:hidden}
  .app-shell{width:100%;padding-left:14px;padding-right:14px}
  .topbar{height:auto;min-height:72px;padding:8px 0;gap:10px}
  .brandline{min-width:0}.brandline>div:last-child{min-width:0}
  .brandline strong{white-space:nowrap}
  .top-actions{display:flex!important;margin-left:auto;flex:0 0 auto}
  .guest-actions,.member-actions{display:flex;flex-wrap:nowrap;gap:5px}
  .guest-actions .login-top-btn{min-width:38px;height:38px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:0;font-size:0}
  .guest-actions .login-top-btn i{font-size:12px}
  .stage.home-hero-only{margin-left:0!important;margin-right:0!important;width:100%;max-width:none}
  .hero-copy{width:100%;max-width:none!important}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;width:100%}
  .action{box-sizing:border-box;width:100%;min-width:0!important}
  .hud-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:18px}
  .hud-stat{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.06);min-width:0}
  .hud-stat strong{overflow-wrap:anywhere}
  .social-mini{grid-column:1/-1;display:flex;width:100%;justify-content:center;padding-top:12px}
}
@media (max-width: 380px){h1{font-size:40px!important}.brandline span{display:none}.rail-nav a{width:32px}}

/* PWA install button */
.install-app-mini{width:35px;height:35px;border:1px solid rgba(168,85,247,.38);display:grid;place-items:center;color:#b98cff;background:rgba(168,85,247,.08);cursor:pointer;transition:.2s;padding:0;font-size:13px}.install-app-mini:hover,.install-app-mini.ready{color:#fff;border-color:rgba(168,85,247,.7);background:rgba(168,85,247,.18);box-shadow:0 0 18px rgba(168,85,247,.12)}@media(max-width:600px){.install-app-mini{width:35px;height:35px;flex:0 0 35px}.social-mini{align-items:center}}

/* Mobile header layout fix - logo centered, all navigation buttons visible */
@media (max-width:480px){
  .rail,.portal-rail{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:112px!important;padding:8px 8px 6px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
    border-right:0!important;border-bottom:1px solid var(--line)!important;
    background:rgba(5,4,9,.94)!important;backdrop-filter:blur(18px);z-index:1000!important;
  }
  .rail-logo{width:38px!important;height:38px!important;flex:0 0 38px!important;margin:0 auto 6px!important;display:grid!important;place-items:center!important}
  .rail-nav{width:100%!important;margin:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:2px!important;flex-wrap:nowrap!important}
  .rail-nav a,.rail-nav a:nth-child(n+6){display:grid!important;width:35px!important;height:40px!important;flex:0 0 35px!important;place-items:center!important}
  .rail-nav a i{margin:0!important;line-height:1!important;text-align:center!important}
  .rail-nav a:after,.rail-bottom{display:none!important}
  .app-shell{margin-left:0!important;padding:112px 14px 14px!important}
  .scanline{left:0!important}
}