:root{--bg:#020814;--bg2:#061326;--card:rgba(18,34,52,.78);--line:rgba(125,211,252,.18);--text:#f8fbff;--muted:#b7c9df;--cyan:#58e5ff;--blue:#119dff;--deep:#01050c;--white:#fff;--shadow:0 28px 80px rgba(0,0,0,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 75% 15%,rgba(14,92,160,.30),transparent 34%),radial-gradient(circle at 25% 35%,rgba(0,212,255,.09),transparent 32%),#020814;color:var(--text);overflow-x:hidden}a{color:inherit;text-decoration:none}.page-bg{position:fixed;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;opacity:.62}#particleCanvas{position:fixed;inset:0;width:100%;height:100%;opacity:.55;z-index:-1}.site-header{position:sticky;top:0;z-index:20;height:86px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;background:rgba(1,6,15,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px}.brand img{width:48px;height:48px;object-fit:contain;border-radius:14px}.brand strong{display:block;font-size:19px}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.main-nav{display:flex;align-items:center;gap:25px;color:var(--muted);font-size:15px}.main-nav>a,.nav-dropdown>a{padding:30px 0}.main-nav a.active,.main-nav a:hover{color:#fff}.nav-dropdown{position:relative}.dropdown-panel{position:absolute;top:72px;left:-20px;width:310px;padding:15px;background:rgba(4,12,24,.98);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}.dropdown-panel.wide{width:350px}.dropdown-panel a{display:block;padding:12px 14px;border-radius:12px;color:var(--muted)}.dropdown-panel a:hover{background:rgba(88,229,255,.09);color:#fff}.nav-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-weight:750}.nav-cta{border:1px solid rgba(88,229,255,.35);padding:13px 22px;color:#eafaff;background:rgba(88,229,255,.06)}.mobile-menu{display:none}.hero{position:relative;min-height:calc(100vh - 86px);display:grid;grid-template-columns:1.07fr .93fr;gap:70px;align-items:center;padding:7.5% 7%;overflow:hidden}.cinematic:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,20,.95),rgba(2,8,20,.72),rgba(3,17,38,.78)),radial-gradient(circle at 72% 50%,rgba(0,166,255,.26),transparent 28%);z-index:-1}.motion-scene{position:absolute;inset:0;overflow:hidden;z-index:-1}.glow-orb{position:absolute;border-radius:50%;filter:blur(18px);opacity:.45;animation:float 8s ease-in-out infinite}.orb-one{width:280px;height:280px;background:#0ea5e9;right:12%;top:20%}.orb-two{width:220px;height:220px;background:#1d4ed8;left:10%;bottom:18%;animation-delay:1.5s}.orb-three{width:160px;height:160px;background:#22d3ee;right:36%;bottom:12%;animation-delay:3s}@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-28px) translateX(16px)}}.data-tree{position:absolute;right:9%;bottom:16%;width:440px;height:300px;border-radius:50%;border:1px solid rgba(88,229,255,.16);animation:pulse 3s infinite}.data-tree:before,.data-tree:after{content:"";position:absolute;inset:25px;border:1px solid rgba(88,229,255,.12);border-radius:50%}.data-tree span{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scan 4s linear infinite}.data-tree span:nth-child(1){width:270px;top:35%;left:8%;transform:rotate(-12deg)}.data-tree span:nth-child(2){width:310px;top:54%;left:5%;transform:rotate(8deg);animation-delay:.6s}.data-tree span:nth-child(3){width:230px;top:72%;left:14%;transform:rotate(-20deg);animation-delay:1.2s}.data-tree span:nth-child(4){width:120px;top:20%;right:18%;transform:rotate(55deg);animation-delay:1.8s}.data-tree span:nth-child(5){width:150px;bottom:10%;right:10%;transform:rotate(-45deg);animation-delay:2.4s}@keyframes scan{0%{opacity:.1;background-position:-200px}50%{opacity:1}100%{opacity:.1;background-position:200px}}@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(88,229,255,0)}50%{box-shadow:0 0 70px rgba(88,229,255,.12)}}.cube-field i{position:absolute;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);right:10%;top:50%;animation:cube 10s linear infinite}.cube-field i:nth-child(2){right:18%;top:62%;animation-delay:1s}.cube-field i:nth-child(3){right:25%;top:40%;animation-delay:2s}.cube-field i:nth-child(4){right:31%;top:72%;animation-delay:3s}.cube-field i:nth-child(5){right:8%;top:75%;animation-delay:4s}.cube-field i:nth-child(6){right:39%;top:55%;animation-delay:5s}.cube-field i:nth-child(7){right:15%;top:28%;animation-delay:6s}@keyframes cube{0%{transform:translateY(40px) rotate(0);opacity:0}20%,80%{opacity:.65}100%{transform:translateY(-160px) rotate(180deg);opacity:0}}.eyebrow{color:var(--cyan);letter-spacing:.18em;text-transform:uppercase;font-size:13px;font-weight:850}.center{text-align:center}.hero h1,.page-hero h1{font-size:clamp(48px,7vw,92px);line-height:.95;letter-spacing:-.06em;margin:22px 0;color:white;text-shadow:0 2px 0 rgba(0,0,0,.12)}.hero-lead,.page-hero p{font-size:20px;line-height:1.65;color:#c6d8ee;max-width:760px}.hero-actions{display:flex;gap:16px;margin:28px 0}.btn{padding:16px 23px;border:1px solid rgba(255,255,255,.12)}.btn.primary{background:linear-gradient(135deg,#35d4ff,#0878ff);color:#00111d}.btn.ghost{background:rgba(255,255,255,.06);color:#fff}.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.trust-row span{background:rgba(255,255,255,.06);border:1px solid var(--line);padding:12px 16px;border-radius:999px;color:#d2e6f8}.glass-card, .hero-visual, .cards-grid article,.flow-cards article,.contact-card{background:linear-gradient(145deg,rgba(31,48,68,.78),rgba(10,22,38,.78));border:1px solid rgba(148,203,255,.16);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.hero-visual{position:relative;border-radius:36px;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:visible}.hero-logo{width:min(78%,420px);border-radius:26px;filter:drop-shadow(0 0 35px rgba(88,229,255,.16))}.floating-label{position:absolute;background:rgba(6,18,32,.9);border:1px solid rgba(88,229,255,.22);padding:14px 18px;border-radius:16px;font-weight:750;color:#eefdff;box-shadow:0 14px 35px rgba(0,0,0,.32);animation:float 5s infinite}.label-a{right:24px;top:80px}.label-b{left:45px;top:135px;animation-delay:1s}.label-c{left:-35px;bottom:130px;animation-delay:2s}.label-d{right:30px;bottom:65px;animation-delay:3s}section{padding:86px 7%}.section-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.section-split h2,.flow-section h2,.services-preview h2,.ecosystem h2,.cta-band h2{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.045em;margin:12px 0 18px}.section-split p,.ecosystem p,.cards-grid p,.flow-cards p{color:var(--muted);line-height:1.65;font-size:17px}.check-list{padding-left:20px;color:#cbdff2;line-height:2}.mock-video{position:relative;min-height:370px;border-radius:34px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(0,212,255,.24),transparent 30%),linear-gradient(135deg,#03101f,#051e34);border:1px solid rgba(88,229,255,.18);box-shadow:var(--shadow)}.video-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(88,229,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(88,229,255,.08) 1px,transparent 1px);background-size:55px 55px;animation:pan 18s linear infinite}.play-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:rgba(88,229,255,.18);border:1px solid rgba(88,229,255,.45);font-size:28px}.pipeline{position:absolute;left:28px;right:28px;bottom:30px;display:flex;justify-content:space-between;gap:10px}.pipeline span{padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(88,229,255,.2);font-weight:800}.flow-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;position:relative}.flow-cards article{border-radius:24px;padding:26px;position:relative}.flow-cards article:not(:last-child):after{content:"→";position:absolute;right:-19px;top:45%;color:var(--cyan);font-size:22px}.flow-cards strong{display:inline-flex;color:var(--cyan);font-size:22px;margin-right:6px}.flow-cards h3{display:inline;font-size:20px}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.cards-grid article{border-radius:24px;padding:30px;min-height:210px;transition:.25s}.cards-grid article:hover{transform:translateY(-6px);border-color:rgba(88,229,255,.35)}.cards-grid h3{font-size:23px;margin:0 0 13px}.ecosystem{display:grid;grid-template-columns:.82fr 1.18fr;gap:55px;align-items:center}.logo-cloud{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.logo-cloud span{display:grid;place-items:center;min-height:70px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:850;color:#e5f6ff}.founder{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.founder-photo-wrap{display:flex;align-items:center;justify-content:center}.founder-photo{width:290px;height:290px;object-fit:cover;object-position:center 28%;border-radius:50%;border:3px solid rgba(88,229,255,.45);box-shadow:0 0 55px rgba(88,229,255,.24)}.founder h3{color:var(--cyan);font-size:24px}.credential{color:#aeeeff!important;font-weight:750}.credential span{color:#d9f8ff}.cta-band{text-align:center;background:linear-gradient(135deg,rgba(13,148,210,.16),rgba(10,17,35,.35));border-top:1px solid var(--line)}.page-hero{padding:110px 7% 60px}.page-hero h1{max-width:1050px}.page-grid{padding:0 7% 90px}.contact-card{border-radius:28px;padding:34px}.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;padding:38px 7%;border-top:1px solid var(--line);background:rgba(1,6,15,.9);color:var(--muted)}.footer strong{color:#fff}.footer a{color:#dff8ff}@keyframes pan{to{background-position:220px 110px}}
@media (max-width:1000px){.hero,.section-split,.ecosystem{grid-template-columns:1fr}.hero-visual{min-height:360px}.flow-cards,.cards-grid{grid-template-columns:1fr 1fr}.main-nav{display:none}.mobile-menu{display:block;background:transparent;color:#fff;border:0;font-size:28px}.footer{grid-template-columns:1fr}}@media (max-width:640px){.hero h1,.page-hero h1{font-size:46px}.hero{padding:70px 6%}.flow-cards,.cards-grid,.logo-cloud{grid-template-columns:1fr}.flow-cards article:after{display:none}.hero-actions{flex-direction:column}.founder-photo{width:220px;height:220px}}


/* =========================================================
   FINAL UPDATE: Homepage animated GIF hero background
   - Big right-side logo removed from index.html
   - Small logo in navbar stays
   - Hero background uses the selected animated GIF
   - Background moves left to right for a premium motion feel
   ========================================================= */

.home .hero,
.hero.animated-gif-hero {
  grid-template-columns: 1fr !important;
  min-height: calc(100vh - 86px);
  padding: 7.5% 7% !important;
  background-image:
    linear-gradient(90deg, rgba(2, 8, 20, 0.96), rgba(2, 8, 20, 0.72), rgba(2, 8, 20, 0.34)),
    url("../assets/nextops-animated-hero.gif");
  background-size: 115% 115%, cover;
  background-position: left center, left center;
  background-repeat: no-repeat, no-repeat;
  animation: nextopsHeroBackgroundMove 42s linear infinite alternate;
}

.hero.animated-gif-hero::before,
.hero.animated-gif-hero.cinematic::before {
  background:
    radial-gradient(circle at 76% 42%, rgba(0, 166, 255, 0.28), transparent 30%),
    linear-gradient(90deg, rgba(2, 8, 20, 0.42), rgba(2, 8, 20, 0.18), rgba(2, 8, 20, 0.04)) !important;
  z-index: 0 !important;
  pointer-events: none;
}

.hero.animated-gif-hero .motion-scene {
  opacity: 0.18;
  z-index: 0;
}

.hero.animated-gif-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero.animated-gif-hero .hero-visual {
  display: none !important;
}

@keyframes nextopsHeroBackgroundMove {
  0% {
    background-position: left center, left center;
  }
  100% {
    background-position: right center, right center;
  }
}

@media (max-width: 760px) {
  .hero.animated-gif-hero {
    background-size: 160% 120%, cover;
    background-position: center center, center center;
    animation-duration: 55s;
  }
}


/* Floating classical music control */
#nextops-music-control{position:fixed;right:22px;bottom:22px;z-index:9999;border:1px solid rgba(88,229,255,.38);background:rgba(2,8,20,.86);color:#eafaff;backdrop-filter:blur(16px);border-radius:999px;padding:12px 17px;font-weight:800;box-shadow:0 18px 48px rgba(0,0,0,.35),0 0 26px rgba(88,229,255,.12);cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease}
#nextops-music-control:hover{transform:translateY(-2px);border-color:rgba(88,229,255,.75);background:rgba(6,18,32,.94)}
#nextops-music-control.playing{background:linear-gradient(135deg,rgba(53,212,255,.24),rgba(8,120,255,.24))}
@media (max-width:640px){#nextops-music-control{right:14px;bottom:14px;padding:11px 14px;font-size:13px}}

/* Real autoplay video block for the Motion View section */
.real-video-frame {
  padding: 0;
  display: block;
  background: #020814;
}
.real-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(88,229,255,.16), inset 0 -80px 120px rgba(0,0,0,.25);
}
.section-auto-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   FINAL UPDATE V9: Homepage autoplay video background
   ========================================================= */
.hero.video-hero {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  animation: none !important;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0.72;
  filter: saturate(1.12) contrast(1.08) brightness(0.78);
  transform: scale(1.03);
}
.hero.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,8,20,0.96) 0%, rgba(2,8,20,0.78) 38%, rgba(2,8,20,0.28) 72%, rgba(2,8,20,0.18) 100%),
    radial-gradient(circle at 76% 44%, rgba(53,212,255,0.22), transparent 34%),
    linear-gradient(180deg, rgba(2,8,20,0.26), rgba(2,8,20,0.62));
}
.hero.video-hero::before {
  z-index: 2 !important;
  opacity: 0.5;
}
.hero.video-hero .motion-scene {
  z-index: 2;
  opacity: 0.10;
}
.hero.video-hero .hero-content {
  position: relative;
  z-index: 3;
}
@media (max-width: 760px) {
  .hero-bg-video {
    object-position: 62% center;
    opacity: 0.55;
  }
  .hero.video-hero::after {
    background: linear-gradient(90deg, rgba(2,8,20,0.96), rgba(2,8,20,0.72));
  }
}


/* =========================================================
   PROFESSIONAL CONTENT UPGRADE - NextOps AI
   ========================================================= */
.main-nav{gap:20px}.nav-cta{white-space:nowrap}.intro-upgrade{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(88,229,255,.03))}.premium-card{border-radius:30px;padding:36px}.enhanced-grid article{position:relative;overflow:hidden}.enhanced-grid article:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(88,229,255,.13),transparent 31%);pointer-events:none}.enhanced-grid article a{color:#72e9ff;font-weight:800}.enhanced-grid ul{color:#bcd1e5;line-height:1.8;padding-left:20px}.case-preview{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}.case-study-grid article{min-height:310px}.tag{display:inline-flex;margin-bottom:14px;padding:8px 12px;border-radius:999px;background:rgba(88,229,255,.10);border:1px solid rgba(88,229,255,.24);color:#aef4ff;font-size:13px;font-weight:850;letter-spacing:.02em}.page-hero p{max-width:880px}.footer p{line-height:1.6}.cards-grid article strong{color:#eafaff}.center{max-width:1050px;margin-left:auto;margin-right:auto}.hero h1{max-width:980px}.hero-lead{max-width:900px}.contact-card .btn{display:inline-block;margin-top:18px}@media (max-width:1120px){.main-nav{gap:14px}.main-nav a{font-size:14px}.nav-cta{font-size:14px;padding:12px 14px}}@media (max-width:1000px){.main-nav{display:none}}


/* =========================================================
   TRUE FINAL BRANDING + AUTOPLAY OPERATIONS VIDEO FIX
   ========================================================= */
.site-header{
  height:112px !important;
  padding:0 6.5% !important;
}
.brand{
  gap:22px !important;
  min-width:315px;
}
.brand img{
  width:86px !important;
  height:86px !important;
  border-radius:22px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 18px rgba(88,229,255,.28));
}
.brand strong{
  font-size:25px !important;
  line-height:1.05;
  letter-spacing:-.02em;
}
.brand small{
  font-size:13px !important;
  letter-spacing:.03em;
  color:#c8d7e9 !important;
}
.main-nav>a,.nav-dropdown>a{padding:42px 0 !important;}
.dropdown-panel{top:92px !important;}
.hero{min-height:calc(100vh - 112px) !important;}
.operations-video-section{
  position:relative;
  min-height:88vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 7%;
  border-top:1px solid rgba(88,229,255,.18);
  border-bottom:1px solid rgba(88,229,255,.18);
  background:#020814;
}
.operations-video-section video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.64;
  filter:saturate(1.12) contrast(1.08) brightness(.76);
}
.operations-video-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,8,20,.92),rgba(2,8,20,.58),rgba(2,8,20,.88)),
    radial-gradient(circle at 50% 45%,rgba(53,212,255,.18),transparent 36%);
}
.operations-video-content{
  position:relative;
  z-index:2;
  max-width:1120px;
  padding:80px 30px;
  text-align:center;
}
.operations-video-content .eyebrow{margin-bottom:18px;display:block;}
.operations-video-content h2{
  font-size:clamp(42px,6vw,82px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:900;
  margin:0 0 26px;
  color:#fff;
}
.operations-video-content p{
  font-size:clamp(18px,2vw,24px);
  line-height:1.7;
  color:#d5e8f8;
  max-width:960px;
  margin:0 auto 28px;
}
.operations-video-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:30px;
}
.operations-video-pills span{
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(88,229,255,.24);
  color:#e6f8ff;
  font-weight:750;
}
@media (max-width:1000px){
  .site-header{height:96px !important;}
  .brand img{width:68px !important;height:68px !important;}
  .brand strong{font-size:22px !important;}
  .brand small{font-size:12px !important;}
  .brand{min-width:auto;}
  .hero{min-height:calc(100vh - 96px) !important;}
}
@media (max-width:640px){
  .site-header{height:86px !important;padding:0 5% !important;}
  .brand img{width:58px !important;height:58px !important;}
  .brand strong{font-size:19px !important;}
  .brand small{display:none !important;}
  .operations-video-section{min-height:75vh;}
}