@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){
  .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}

}