:root{

 --bg:#020b19;

 --navy:#03142c;
 --navy2:#051d3b;
 --navy3:#082953;

 --blue:#004cff;
 --blue2:#00a9ff;
 --cyan:#59dcff;

 --gold:#e6af42;
 --gold2:#ffd36c;

 --white:#ffffff;

 --text:#d9e8fa;
 --muted:#91a8c3;

 --line:rgba(255,255,255,.10);

}


*{
 box-sizing:border-box;
}


html,
body{

 margin:0;

 min-height:100%;

 background:#020b19;

}


body{

 font-family:
   Inter,
   -apple-system,
   BlinkMacSystemFont,
   "Segoe UI",
   Arial,
   sans-serif;

 color:var(--white);

}


button,
input{
 font:inherit;
}


button{
 cursor:pointer;
}


.portal-shell{

 min-height:100vh;

 overflow:hidden;

 background:

   radial-gradient(
     circle at 15% 20%,
     rgba(0,107,255,.18),
     transparent 30%
   ),

   radial-gradient(
     circle at 85% 30%,
     rgba(0,159,255,.10),
     transparent 24%
   ),

   linear-gradient(
     135deg,
     #020a17 0%,
     #031226 40%,
     #020b19 100%
   );

}



/* ==========================================================
   TOP BAR
   ========================================================== */

.topbar{

 min-height:102px;

 display:flex;

 align-items:center;

 justify-content:space-between;

 gap:30px;

 padding:
   20px
   clamp(28px,5vw,80px);

 border-bottom:
   1px solid
   rgba(47,148,255,.18);

 position:relative;

}


.topbar:after{

 content:"";

 position:absolute;

 left:0;
 right:0;
 bottom:-2px;

 height:2px;

 background:

   linear-gradient(
     90deg,
     transparent 0%,
     #075bff 26%,
     #27b8ff 50%,
     #075bff 74%,
     transparent 100%
   );

 box-shadow:
   0 0 22px
   rgba(0,125,255,.9);

}


.top-brand{

 display:flex;

 align-items:center;

 gap:18px;

}


.top-logo{

 width:180px;

 max-height:72px;

 object-fit:contain;

 object-position:left center;

}


.top-brand-copy{

 padding-left:20px;

 border-left:
   1px solid
   rgba(255,255,255,.20);

}


.top-brand-copy strong{

 display:block;

 font-size:12px;

 letter-spacing:.25em;

 color:#fff;

}


.top-brand-copy span{

 display:block;

 margin-top:6px;

 color:#6ecfff;

 font-size:9px;

 letter-spacing:.32em;

}



.brand-switch{

 display:flex;

 align-items:center;

 gap:12px;

}


.brand-chip{

 min-width:220px;

 height:62px;

 padding:
   8px 17px;

 display:flex;

 align-items:center;

 gap:12px;

 border:
   1px solid
   rgba(85,173,255,.28);

 border-radius:999px;

 background:
   linear-gradient(
     180deg,
     rgba(9,42,79,.75),
     rgba(3,19,40,.85)
   );

}


.brand-chip.active{

 border-color:
   rgba(235,186,74,.72);

 box-shadow:

   0 0 0 1px
   rgba(0,110,255,.25),

   0 0 25px
   rgba(0,112,255,.22);

}


.brand-chip img{

 width:46px;
 height:38px;

 object-fit:contain;

}


.brand-chip b{

 display:block;

 font-size:13px;

}


.brand-chip span{

 display:block;

 margin-top:2px;

 color:#3fb7ff;

 font-size:10px;

}


.brand-chip.mokang span{
 color:#8ca2b9;
}



/* ==========================================================
   HERO LAYOUT
   ========================================================== */

.hero-layout{

 width:
   min(
     1540px,
     calc(100vw - 70px)
   );

 margin:
   34px auto 28px;

 display:grid;

 grid-template-columns:
   minmax(0,1.6fr)
   minmax(390px,.72fr);

 gap:28px;

}



/* ==========================================================
   HERO
   ========================================================== */

.hero{

 min-height:620px;

 position:relative;

 overflow:hidden;

 border:
   1px solid
   rgba(75,152,236,.17);

 border-radius:28px;

 background:

   linear-gradient(
     105deg,
     rgba(2,14,32,.98) 0%,
     rgba(4,31,66,.96) 58%,
     rgba(5,36,73,.82) 100%
   );

 box-shadow:
   0 40px 100px
   rgba(0,0,0,.35);

}


.hero:before{

 content:"";

 position:absolute;

 inset:0;

 background:

   linear-gradient(
     118deg,
     transparent 0%,
     transparent 39%,
     rgba(35,126,255,.045) 39.2%,
     transparent 50%
   );

 pointer-events:none;

}


.hero-light{

 position:absolute;

 border-radius:50%;

 filter:
   blur(80px);

 pointer-events:none;

}


.hero-light-one{

 width:330px;
 height:330px;

 left:-130px;
 top:-80px;

 background:
   rgba(0,104,255,.22);

}


.hero-light-two{

 width:340px;
 height:340px;

 right:-110px;
 bottom:-120px;

 background:
   rgba(0,160,255,.13);

}


.hero-copy{

 position:relative;

 z-index:5;

 width:63%;

 padding:
   66px
   0
   48px
   60px;

}


.eyebrow{

 color:#5cceff;

 font-size:12px;

 font-weight:900;

 letter-spacing:.25em;

}


.hero h1{

 margin:
   18px 0 16px;

 font-size:
   clamp(
     48px,
     5vw,
     78px
   );

 line-height:.98;

 letter-spacing:-.04em;

}


.hero h1 span{

 display:block;

 margin-top:6px;

 color:#fff;

 background:

   linear-gradient(
     180deg,
     #75d6ff 0%,
     #198cff 48%,
     #0060e6 100%
   );

 -webkit-background-clip:text;

 background-clip:text;

 -webkit-text-fill-color:transparent;

 filter:
   drop-shadow(
     0 8px 20px
     rgba(0,91,255,.18)
   );

}


.gold-rule{

 width:75px;

 height:4px;

 margin:
   24px 0;

 border-radius:999px;

 background:
   linear-gradient(
     90deg,
     var(--gold2),
     var(--gold)
   );

 box-shadow:
   0 0 18px
   rgba(233,182,67,.23);

}


.hero-text{

 max-width:690px;

 margin:0;

 color:#b8cae1;

 font-size:18px;

 line-height:1.7;

}


.hero-text strong{
 color:#ffd56c;
}



/* ==========================================================
   SERVICE CARDS
   ========================================================== */

.service-grid{

 margin-top:44px;

 display:grid;

 grid-template-columns:
   repeat(3,1fr);

 gap:12px;

}


.service-card{

 min-height:122px;

 padding:17px;

 display:flex;

 flex-direction:column;

 justify-content:center;

 border:
   1px solid
   rgba(87,159,235,.23);

 border-radius:14px;

 background:

   linear-gradient(
     180deg,
     rgba(7,30,60,.80),
     rgba(2,17,36,.92)
   );

 box-shadow:
   inset 0 1px 0
   rgba(255,255,255,.03);

 transition:
   transform .18s ease,
   border-color .18s ease,
   background .18s ease;

}


.service-card:hover{

 transform:
   translateY(-3px);

 border-color:
   rgba(67,175,255,.7);

 background:

   linear-gradient(
     180deg,
     rgba(8,48,94,.94),
     rgba(3,22,46,.97)
   );

}


.service-icon{

 width:42px;
 height:42px;

 margin-bottom:12px;

 display:grid;

 place-items:center;

 border:
   1px solid
   rgba(52,177,255,.42);

 border-radius:11px;

 color:#58c9ff;

 font-size:20px;

 background:
   rgba(0,115,255,.09);

 box-shadow:
   0 0 18px
   rgba(0,112,255,.1);

}


.service-card b{

 font-size:14px;

}


.service-card span{

 margin-top:4px;

 color:#8099b7;

 font-size:11px;

}



/* ==========================================================
   HERO BRAND ART
   ========================================================== */

.hero-brand-art{

 position:absolute;

 z-index:2;

 top:0;
 right:0;

 width:42%;
 height:100%;

 display:flex;

 flex-direction:column;

 align-items:center;

 justify-content:center;

 overflow:hidden;

}


.hero-brand-art:before{

 content:"";

 position:absolute;

 inset:0;

 background:

   linear-gradient(
     155deg,
     rgba(2,13,30,.02),
     rgba(0,49,112,.16)
   );

}


.art-glow{

 position:absolute;

 width:350px;
 height:350px;

 border-radius:50%;

 background:
   rgba(0,107,255,.21);

 filter:
   blur(70px);

}


.hero-brand-logo{

 position:relative;

 z-index:3;

 width:270px;
 height:270px;

 object-fit:contain;

 filter:
   drop-shadow(
     0 20px 34px
     rgba(0,0,0,.6)
   )
   drop-shadow(
     0 0 30px
     rgba(0,94,255,.32)
   );

}


.hero-brand-text{

 position:relative;

 z-index:3;

 margin-top:15px;

 text-align:center;

}


.hero-brand-text strong{

 display:block;

 font-size:24px;

 letter-spacing:.15em;

}


.hero-brand-text span{

 display:block;

 margin-top:6px;

 color:#93a7c0;

 font-size:11px;

 letter-spacing:.28em;

}



/* ==========================================================
   LOGIN PANEL
   ========================================================== */

.login-panel{

 position:relative;

 overflow:hidden;

 padding:
   48px 43px 38px;

 border:
   1px solid
   rgba(74,158,246,.28);

 border-radius:28px;

 background:

   linear-gradient(
     180deg,
     rgba(7,28,58,.96),
     rgba(3,17,36,.98)
   );

 box-shadow:
   0 40px 100px
   rgba(0,0,0,.38);

}


.login-panel:before{

 content:"";

 position:absolute;

 width:260px;
 height:260px;

 right:-120px;
 top:-130px;

 border-radius:50%;

 border:
   30px solid
   rgba(0,96,255,.05);

}


.stamp-watermark{

 position:absolute;

 top:32px;
 right:-25px;

 width:190px;
 height:190px;

 object-fit:contain;

 opacity:.08;

 filter:
   grayscale(1)
   brightness(2);

}


.secure-label{

 position:relative;

 z-index:2;

 display:flex;

 align-items:center;

 gap:10px;

 color:#ffd366;

 font-size:11px;

 font-weight:900;

 letter-spacing:.20em;

}


.secure-label span{

 font-size:17px;

}


.login-panel h2{

 position:relative;

 z-index:2;

 margin:
   18px 0 16px;

 font-size:38px;

 line-height:1.08;

}


.login-panel>p{

 position:relative;

 z-index:2;

 margin:
   0 0 26px;

 color:#a9bed6;

 font-size:15px;

 line-height:1.6;

}


.login-form{

 position:relative;

 z-index:3;

 display:flex;

 flex-direction:column;

 gap:14px;

}


.login-form label{

 display:flex;

 flex-direction:column;

 gap:7px;

 color:#bdcde0;

 font-size:11px;

 font-weight:800;

}


.login-form input[type="email"],
.login-form input[type="password"]{

 width:100%;

 height:48px;

 padding:
   0 14px;

 border:
   1px solid
   rgba(95,160,222,.34);

 border-radius:10px;

 outline:none;

 color:#fff;

 background:
   rgba(1,11,25,.7);

 transition:
   border-color .18s,
   box-shadow .18s;

}


.login-form input:focus{

 border-color:#1ca9ff;

 box-shadow:
   0 0 0 3px
   rgba(0,159,255,.10);

}


.login-meta{

 display:flex;

 justify-content:space-between;

 align-items:center;

 gap:15px;

}


.remember{

 flex-direction:row !important;

 align-items:center;

 gap:7px !important;

 color:#8fa8c2 !important;

}


.text-link{

 padding:0;

 border:0;

 color:#5dc8ff;

 background:transparent;

 font-size:11px;

}


.primary-login{

 height:56px;

 margin-top:6px;

 display:flex;

 align-items:center;

 justify-content:center;

 gap:12px;

 border:
   1px solid
   #35c0ff;

 border-radius:11px;

 color:#fff;

 font-weight:800;

 background:

   linear-gradient(
     110deg,
     #0078ff,
     #004ee8
   );

 box-shadow:

   0 0 0 1px
   rgba(255,255,255,.10)
   inset,

   0 12px 30px
   rgba(0,98,255,.34),

   0 0 28px
   rgba(0,159,255,.23);

}


.primary-login:hover{

 background:

   linear-gradient(
     110deg,
     #008cff,
     #075eff
   );

}


.login-arrow{

 width:27px;
 height:27px;

 display:grid;

 place-items:center;

 border:
   1px solid
   rgba(255,255,255,.8);

 border-radius:50%;

}


.separator{

 margin:
   22px 0;

 display:grid;

 grid-template-columns:
   1fr auto 1fr;

 align-items:center;

 gap:13px;

 color:#8298b1;

}


.separator span{

 height:1px;

 background:
   rgba(255,255,255,.13);

}


.separator b{

 font-size:10px;

}


.request-access{

 width:100%;

 height:51px;

 border:
   1px solid
   rgba(151,186,220,.55);

 border-radius:10px;

 color:#dce9f7;

 background:
   rgba(2,14,31,.45);

}


.request-access span{

 margin-right:9px;

 font-size:19px;

}


.support-box{

 margin-top:22px;

 padding:15px;

 display:grid;

 grid-template-columns:
   auto
   1fr
   auto;

 align-items:center;

 gap:11px;

 border:
   1px solid
   rgba(65,149,235,.25);

 border-radius:12px;

 background:
   rgba(8,36,68,.55);

}


.support-icon{

 width:38px;
 height:38px;

 display:grid;

 place-items:center;

 border-radius:50%;

 color:#55c9ff;

 background:
   rgba(0,115,255,.13);

}


.support-box b{

 display:block;

 font-size:12px;

}


.support-box span{

 display:block;

 margin-top:3px;

 color:#7f98b3;

 font-size:10px;

}


.support-box a{

 color:#44bfff;

 text-decoration:none;

 font-size:11px;

 white-space:nowrap;

}



/* ==========================================================
   FOOTER
   ========================================================== */

.brand-footer{

 width:
   min(
     1540px,
     calc(100vw - 70px)
   );

 margin:
   0 auto 35px;

 padding-top:28px;

 display:grid;

 grid-template-columns:
   1.25fr
   .8fr
   .8fr
   1.25fr;

 gap:24px;

 border-top:
   1px solid
   rgba(69,152,239,.20);

 position:relative;

}


.brand-footer:before{

 content:"";

 position:absolute;

 left:0;
 top:-2px;

 width:36%;

 height:2px;

 background:
   linear-gradient(
     90deg,
     #075cff,
     #48c9ff,
     transparent
   );

 box-shadow:
   0 0 18px
   rgba(0,112,255,.65);

}


.registration-block{

 display:flex;

 align-items:center;

 gap:17px;

}


.footer-stamp{

 width:90px;
 height:90px;

 object-fit:contain;

}


.registration-block strong{

 display:block;

 font-size:12px;

 letter-spacing:.15em;

}


.registration-block b{

 display:block;

 margin-top:4px;

 color:#f0bf56;

 font-size:12px;

 letter-spacing:.14em;

}


.registration-block p{

 max-width:270px;

 margin:
   8px 0 0;

 color:#778da7;

 font-size:10px;

 line-height:1.5;

}


.footer-brand{

 display:flex;

 align-items:center;

 gap:13px;

 padding-left:19px;

 border-left:
   1px solid
   rgba(255,255,255,.10);

}


.footer-brand img{

 width:96px;
 max-height:60px;

 object-fit:contain;

}


.footer-brand strong{

 display:block;

 font-size:11px;

}


.footer-brand span{

 display:block;

 margin-top:5px;

 color:#7a93ad;

 font-size:9px;

}


.footer-values{

 display:grid;

 grid-template-columns:
   repeat(4,1fr);

 gap:10px;

}


.footer-values div{

 text-align:center;

}


.footer-values i{

 display:block;

 color:#efbd51;

 font-size:19px;

 font-style:normal;

}


.footer-values b{

 display:block;

 margin-top:7px;

 font-size:8px;

 letter-spacing:.10em;

}


.footer-values span{

 display:block;

 margin-top:4px;

 color:#71859d;

 font-size:7px;

 line-height:1.4;

 text-transform:uppercase;

}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1250px){

 .brand-switch{
   display:none;
 }

 .hero-layout{

   grid-template-columns:
     minmax(0,1.3fr)
     390px;

 }

 .hero-copy{

   width:68%;

   padding-left:40px;

 }

 .hero-brand-logo{

   width:220px;
   height:220px;

 }

 .brand-footer{

   grid-template-columns:
     1fr 1fr;

 }

}


@media(max-width:950px){

 .hero-layout{

   grid-template-columns:1fr;

 }

 .hero{

   min-height:auto;

 }

 .hero-copy{

   width:100%;

   padding:
     45px 35px;

 }

 .hero-brand-art{

   opacity:.12;

   width:65%;

 }

 .service-grid{

   grid-template-columns:
     repeat(3,1fr);

 }

 .brand-footer{

   grid-template-columns:1fr;

 }

 .footer-brand{

   border-left:0;

   padding-left:0;

 }

}


@media(max-width:650px){

 .topbar{

   min-height:80px;

   padding:16px 20px;

 }

 .top-logo{

   width:130px;

 }

 .top-brand-copy{
   display:none;
 }

 .hero-layout,
 .brand-footer{

   width:
     calc(100vw - 28px);

 }

 .hero h1{

   font-size:48px;

 }

 .service-grid{

   grid-template-columns:
     repeat(2,1fr);

 }

 .login-panel{

   padding:
     35px 24px;

 }

 .footer-values{

   grid-template-columns:
     repeat(2,1fr);

 }

}