@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Shared MCT visual theme for the site's secondary pages. */
:root{
  --navy:#061a42;
  --navy-2:#082356;
  --navy-3:#103473;
  --ink:#082356;
  --blue:#5a82ff;
  --blue-2:#1d5dff;
  --bright:#5a82ff;
  --ice:#e9f1ff;
  --orange:#ff6b38;
  --accent:#ff6b38;
  --accent2:#1d5dff;
  --lime:#b9fd54;
  --green:#b9fd54;
  --line:rgba(180,204,255,.20);
  --muted:#9eb0d5;
  --cyan:#5a82ff;
  --cyan-light:#96b3ff;
  --cyan-dark:#1d5dff;
  --bg:#03070f;
  --bg2:#061a42;
  --bg-secondary:#061a42;
  --panel:rgba(8,31,76,.72);
  --panel-light:rgba(15,52,116,.58);
  --card:rgba(8,31,76,.72);
  --card-hover:rgba(16,52,115,.88);
  --text:#fff;
  --white:#fff;
  --shadow:0 30px 80px rgba(0,0,0,.3);
  --border:rgba(180,204,255,.2);
  --border-strong:rgba(90,130,255,.48);
}

html{scroll-behavior:smooth}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden!important;
  color:#fff!important;
  background:#03070f!important;
  font-family:Manrope,Arial,sans-serif!important;
  isolation:isolate;
}
img,video,iframe,canvas,svg{max-width:100%}
input,textarea,select,button{max-width:100%}
body::before{
  z-index:-2!important;
  opacity:1!important;
  background-image:
    linear-gradient(rgba(70,130,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,130,255,.16) 1px,transparent 1px)!important;
  background-size:45px 45px!important;
  background-position:center!important;
  mask-image:none!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%,rgba(39,102,255,.2),transparent 30%),
    radial-gradient(circle at 85% 20%,rgba(29,93,255,.15),transparent 32%),
    radial-gradient(circle at 50% 90%,rgba(29,93,255,.1),transparent 36%);
}

/* Keep legacy page headers on the same blue MCT surface as the shared navigation. */
.navbar,.pu-header,body>header.shell,body>nav.shell{
  border-color:rgba(180,204,255,.2)!important;
  background:linear-gradient(112deg,rgba(17,57,128,.97),rgba(12,39,91,.97))!important;
  backdrop-filter:blur(18px);
}
.navbar,.pu-header{box-shadow:0 12px 34px rgba(0,0,0,.12)}
.nav-links a,.pu-nav-links a{color:#cad7f4!important}
.nav-links a:hover,.nav-links a.active,.pu-nav-links a:hover{color:#fff!important}
.call,.pu-call{
  border-color:rgba(176,202,255,.4)!important;
  color:#fff!important;
  background:rgba(10,44,104,.22)!important;
}
.brand-main,.brand-text,.logo-copy b{color:#fff}
.brand-main span,.brand-text span,.logo-copy b span{color:#96b3ff!important}
.brand-sub,.logo-copy small{color:#9cadd5!important}

/* MCT navy panels, blue details and orange actions. */
.app-card,.feature,.status,.release-card,.timeline,.login-card,.live-card,
.stat-card,.request-card,.project-card,.mini-card,.video-card,.video-item,
.modal-box,.description-box,.request-tools,.search-box{
  border-color:rgba(180,204,255,.2)!important;
  background-color:rgba(8,31,76,.72)!important;
}
.app-card,.feature,.release-card,.stat-card,.request-card,.project-card,.mini-card,.video-card{
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.app-card:hover,.feature:hover,.release-card:hover,.stat-card:hover,.request-card:hover,
.project-card:hover,.mini-card:hover,.video-card:hover{
  transform:translateY(-5px);
  border-color:rgba(90,130,255,.58)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.release-card.latest{border-color:rgba(255,107,56,.5)!important}
.btn-primary,.primary-btn,.submit-btn,.bottom-phone,.btn-youtube{
  color:#fff!important;
  background:#ff6b38!important;
  border-color:#ff6b38!important;
}
.btn-secondary,.btn-outline,.back-link,.pu-call,.call{
  border-color:rgba(176,202,255,.35)!important;
}
.btn-primary:hover,.primary-btn:hover,.submit-btn:hover,.bottom-phone:hover,.btn-youtube:hover{
  filter:brightness(1.08);
  box-shadow:0 12px 28px rgba(255,107,56,.2);
}
.login-card h1 em,.admin-hero h1 em,.section-heading h2 em,
.pu-intro h1 em,.bottom-cta h2 em,.hero h1 em,.cyan,.section-heading h2 span{
  color:#96b3ff!important;
}
input,textarea,select,.search input,.search-box input,.request-tools select{
  color:#f2f6ff;
  border-color:rgba(180,204,255,.22)!important;
  background-color:rgba(3,12,28,.68)!important;
}
input:focus,textarea:focus,select:focus,.search input:focus,.search-box input:focus{
  border-color:#5a82ff!important;
  box-shadow:0 0 0 3px rgba(90,130,255,.14)!important;
  outline:none;
}

/* Replace the video center's cyan highlights with MCT blue and orange. */
.hero-badge{border-color:rgba(90,130,255,.35)!important;background:rgba(29,93,255,.08)!important}
.hero-badge .dot{background:#ff6b38!important;box-shadow:0 0 16px rgba(255,107,56,.55)!important}
.hero h1 .cyan{color:#96b3ff!important;text-shadow:0 0 30px rgba(90,130,255,.16)!important}
.btn-outline{background:rgba(29,93,255,.06)!important}
.filter.active,.filter:hover,.retry-btn:hover{border-color:#5a82ff!important;background:rgba(29,93,255,.24)!important;color:#fff!important}
.new-tag{color:#061a42!important;background:#b9fd54!important}
.play-button{background:#ff6b38!important}
.watch-link:hover,.nav-links a.active{color:#96b3ff!important}

/* Small entrance and hover movement keeps the pages lively without changing behavior. */
@keyframes mct-content-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero,.admin-hero,.pu-intro,.login-card,.app-card,.release-card,.stat-card,.request-card,.project-card,.mini-card,.video-card{
  animation:mct-content-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.app-card:nth-child(2),.release-card:nth-child(2),.stat-card:nth-child(2),.request-card:nth-child(2),.project-card:nth-child(2),.video-card:nth-child(2){animation-delay:.08s}
.app-card:nth-child(3),.release-card:nth-child(3),.stat-card:nth-child(3),.request-card:nth-child(3),.mini-card:nth-child(3),.video-card:nth-child(3){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){
  .page-loader::before,.page-loader::after,.loader-mark,.loader-mark i,.loader-name strong i,.loader-name small,.loader-brand,
  .hero,.admin-hero,.pu-intro,.login-card,.app-card,.release-card,.stat-card,.request-card,.project-card,.mini-card,.video-card{
    animation:none!important;
  }
  .app-card,.feature,.release-card,.stat-card,.request-card,.project-card,.mini-card,.video-card{transition:none!important}
}

/* Extra viewport safeguards for narrow phones and split-screen windows. */
@media(max-width:760px){
  .shell,.pu-container,.section-shell,.hero-inner,.main{width:calc(100% - 32px)!important;max-width:100%!important}
  .hero h1{font-size:clamp(2.35rem,10.5vw,4.5rem);letter-spacing:-.055em}
  .release-card{padding:clamp(16px,4.5vw,24px)}
  .release-top,.release-main,.release-main>div{min-width:0}
  .release-main{max-width:100%}
  .release-desc,.hero p,.app-desc,.feature p{overflow-wrap:anywhere}
  .release-action{width:100%}
}
@media(max-width:520px){
  .shell,.pu-container,.section-shell,.hero-inner,.main{width:calc(100% - 28px)!important}
  .hero h1{font-size:clamp(2.05rem,10.5vw,3.25rem);letter-spacing:-.045em}
  .pu-intro h1{font-size:clamp(2rem,11.5vw,3rem)!important;letter-spacing:-.06em}
  .admin-hero h1{font-size:clamp(2.2rem,11vw,3.35rem)!important;letter-spacing:-.05em}
  .hero-actions{gap:10px}
  .hero-actions>.btn{width:100%;max-width:100%}
  .release-main{gap:12px}
  .release-icon{width:52px;height:52px;flex-basis:52px}
  .release-card.latest:before{position:static;display:inline-block;margin-bottom:12px}
  .footer-inner{align-items:flex-start}
  .loader-name strong{font-size:36px}
  .loader-name small{font-size:8px;letter-spacing:2px}
}

/* MCT grid-and-pulse loader: dark, minimal, with no sphere, orbit, or glass card. */
.page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  opacity:1;
  visibility:visible;
  background-color:#03070f;
  background-image:
    linear-gradient(rgba(77,126,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,126,255,.075) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 42%,rgba(29,76,169,.16),transparent 45%),
    linear-gradient(145deg,#03070f 0%,#06132d 54%,#03070f 100%);
  background-size:48px 48px,48px 48px,auto,auto;
  transition:opacity .45s ease,visibility .45s ease;
}
.page-loader-hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-loader::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  aspect-ratio:auto;
  border-radius:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(111,155,255,.045) 50%,transparent 75%);
  background-size:220% 100%;
  animation:mct-grid-light-pass 7s ease-in-out infinite alternate;
}
.page-loader::after{display:none!important;content:none!important}
.loader-brand{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  width:min(340px,calc(100vw - 32px));
  padding:23px 24px 19px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  animation:mct-grid-brand-in .65s cubic-bezier(.2,.75,.25,1) both;
}
.loader-brand::before{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  left:calc(50% - 22px);
  width:44px;
  height:2px;
  background:linear-gradient(90deg,transparent,#6398ff,#ff7955,transparent);
  box-shadow:0 0 14px rgba(90,130,255,.45);
}
.loader-brand::after{display:none!important;content:none!important}
.loader-mark,.loader-name,.loader-progress{position:relative;z-index:1}
.loader-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:74px;
  height:42px;
  flex:none;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  animation:none;
}
.loader-mark::before,.loader-mark::after{display:none!important;content:none!important}
.loader-mark i{
  position:relative;
  top:auto;
  left:auto;
  display:block;
  flex:0 0 11px;
  width:11px;
  height:21px;
  border:1px solid rgba(209,225,255,.18);
  border-radius:3px;
  filter:none;
  mix-blend-mode:screen;
  box-shadow:0 0 15px rgba(55,112,255,.3);
  animation:mct-grid-bar-pulse 1.05s cubic-bezier(.4,0,.6,1) infinite;
}
.loader-mark i:nth-child(1){
  height:20px;
  background:linear-gradient(180deg,#8eb2ff,#2867eb);
  animation-delay:-.3s;
}
.loader-mark i:nth-child(2){
  height:32px;
  background:linear-gradient(180deg,#d9e5ff,#6d98ff 55%,#2867eb);
  box-shadow:0 0 18px rgba(102,147,255,.36);
}
.loader-mark i:nth-child(3){
  height:24px;
  background:linear-gradient(180deg,#ffb39b,#ff7048);
  box-shadow:0 0 15px rgba(255,107,56,.23);
  animation-delay:-.62s;
}
.loader-name{text-align:center}
.loader-name strong{
  display:flex;
  justify-content:center;
  gap:9px;
  padding-left:9px;
  color:#f8faff;
  font:800 49px/1 Manrope,Arial,sans-serif;
  letter-spacing:10px;
  text-shadow:0 0 24px rgba(114,153,255,.2);
}
.loader-name strong i{
  font-style:normal;
  animation:mct-grid-letter-pulse 2.8s ease-in-out infinite;
}
.loader-name strong i:nth-child(2){color:#98b7ff;animation-delay:.18s}
.loader-name strong i:nth-child(3){color:#fff;animation-delay:.36s}
.loader-name small{
  display:block;
  margin-top:10px;
  color:#94a9d2;
  font:9px/1 'DM Mono',monospace;
  letter-spacing:2.8px;
  animation:mct-grid-caption-in .7s .22s both;
}
.loader-progress{
  width:min(190px,100%);
  height:2px;
  margin-top:2px;
  overflow:hidden;
  border-radius:2px;
  background:rgba(157,181,226,.17);
  box-shadow:0 0 12px rgba(29,93,255,.08);
}
.loader-progress i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#246aff,#92b5ff 58%,#ff7955);
  transform:scaleX(0);
  transform-origin:left;
  animation:mct-grid-progress 2s linear forwards;
}
@keyframes mct-grid-brand-in{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes mct-grid-bar-pulse{
  0%,100%{transform:scaleY(.72);opacity:.76}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes mct-grid-letter-pulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes mct-grid-caption-in{
  from{opacity:0;letter-spacing:4px}
  to{opacity:1;letter-spacing:2.8px}
}
@keyframes mct-grid-light-pass{
  from{background-position:120% 0;opacity:.55}
  to{background-position:-20% 0;opacity:1}
}
@keyframes mct-grid-progress{to{transform:scaleX(1)}}
@media(max-width:520px){
  .loader-brand{width:min(320px,calc(100vw - 28px));padding:20px 16px 18px;gap:15px}
  .loader-name strong{font-size:43px;letter-spacing:9px}
  .loader-name small{font-size:8px;letter-spacing:2px}
}
@media(prefers-reduced-motion:reduce){
  .page-loader::before,.page-loader::after,.loader-brand,.loader-brand::before,.loader-brand::after,
  .loader-mark,.loader-mark::before,.loader-mark::after,.loader-mark i,
  .loader-name strong i,.loader-name small{animation:none!important}
  .loader-progress i{animation-duration:2s}
}