:root{
  --text:#eefaff;
  --muted:#9bb3c0;
  --cyan:#5fe6ff;
  --blue:#1685ff;
  --line:rgba(95,230,255,.20);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow:hidden}
body{
  color:var(--text);
  font:14px/1.45 Inter,system-ui,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 71% 31%,rgba(95,230,255,.18),transparent 24%),
    radial-gradient(circle at 22% 78%,rgba(22,133,255,.13),transparent 32%),
    linear-gradient(110deg,#01070c 0%,#061321 47%,#01070c 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.11;
  background-image:
    linear-gradient(rgba(95,230,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,230,255,.16) 1px,transparent 1px);
  background-size:58px 58px;
  animation:gridMove 34s linear infinite;
}
.stage{
  width:min(1290px,calc(100vw - 54px));
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-rows:82px 1fr;
  position:relative;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  height:82px;
  position:relative;
  z-index:3;
}
.mark{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#f4fbff;
  text-decoration:none;
  font-size:28px;
  letter-spacing:-.055em;
}
.mark img{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 22px rgba(95,230,255,.55);
  animation:logoPulse 4s ease-in-out infinite;
}
.mark span span{color:#2aa8ff}
.panel-btn{
  position:relative;
  overflow:hidden;
  padding:14px 26px;
  border:1px solid rgba(160,226,255,.32);
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  background:rgba(8,19,31,.76);
  box-shadow:inset 0 0 24px rgba(95,230,255,.06),0 14px 46px rgba(0,0,0,.24);
}
.panel-btn:after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -70%;
  width:54%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);
  animation:sweep 5.2s ease-in-out infinite;
}
.hero{
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:minmax(470px,.92fr) minmax(420px,1.08fr);
  gap:28px;
  align-items:center;
  padding:0 0 32px;
}
.copy{align-self:center;margin-top:-14px;position:relative;z-index:2}
.eyebrow{
  margin:0 0 24px;
  color:#65dfff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.copy h1{
  max-width:650px;
  margin:0 0 20px;
  font-size:clamp(50px,5.2vw,72px);
  line-height:.98;
  font-weight:300;
  letter-spacing:-.075em;
}
.copy h1 span{
  display:block;
  color:var(--blue);
  text-shadow:0 0 30px rgba(37,127,255,.36);
}
.lead{
  max-width:590px;
  margin:0;
  color:#c4d3dc;
  font-size:17px;
  line-height:1.62;
}
.solution-strip{
  max-width:650px;
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.solution-strip article{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:116px;
  padding:16px 14px 14px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(11,36,53,.86),rgba(2,9,15,.66));
  box-shadow:inset 0 0 28px rgba(95,230,255,.05),0 18px 54px rgba(0,0,0,.22);
  animation:cardFloat 5.8s ease-in-out infinite;
}
.solution-strip article:nth-child(2){animation-delay:.25s}
.solution-strip article:nth-child(3){animation-delay:.5s}
.solution-strip article:nth-child(4){animation-delay:.75s}
.solution-strip article:before{
  content:"";
  position:absolute;
  inset:-80% auto -80% -76%;
  width:76%;
  z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(95,230,255,.18),transparent);
  transform:skewX(-22deg);
  animation:sweepCard 7s ease-in-out infinite;
}
.solution-strip i{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:12px;
  border:1px solid rgba(160,226,255,.48);
  border-radius:50%;
  position:relative;
  background:radial-gradient(circle,rgba(95,230,255,.16),rgba(3,12,20,.16) 58%,transparent 60%);
  box-shadow:0 0 18px rgba(95,230,255,.12),inset 0 0 14px rgba(95,230,255,.08);
}
.solution-strip span{display:block;color:#f3fbff;font-size:15px;font-weight:850}
.solution-strip small{display:block;margin-top:3px;color:#91aab7;font-size:11px;line-height:1.35}
.radar:after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;background:#8fcfff;transform-origin:left center;animation:radarSpin 2.8s linear infinite}
.radar:before{content:"";position:absolute;inset:9px;border:1px solid #8fcfff;border-radius:50%}
.chess:before{content:"♟";position:absolute;inset:0;display:grid;place-items:center;color:#c8efff;font-size:18px}
.bars:before{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:16px;background:linear-gradient(90deg,transparent 0 8%,#5fdcff 8% 24%,transparent 24% 38%,#5fdcff 38% 56%,transparent 56% 70%,#5fdcff 70% 84%,transparent 84%)}
.profile:before{content:"";position:absolute;left:8px;top:7px;width:12px;height:12px;border:1px solid #d9f8ff;border-radius:50%}
.profile:after{content:"";position:absolute;left:6px;bottom:7px;width:18px;height:10px;border:1px solid #d9f8ff;border-bottom:0;border-radius:20px 20px 0 0}
.visual{
  position:relative;
  height:min(650px,calc(100vh - 132px));
  min-height:470px;
  overflow:visible;
}
.photo-plane{
  position:absolute;
  inset:8% 0 6% 6%;
  border:1px solid rgba(95,230,255,.13);
  border-radius:38px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),transparent 34%),
    radial-gradient(circle at 67% 38%,rgba(95,230,255,.20),transparent 17%),
    radial-gradient(circle at 35% 78%,rgba(22,133,255,.17),transparent 30%),
    linear-gradient(120deg,rgba(3,12,20,.95),rgba(8,42,66,.36),rgba(3,12,20,.90));
  box-shadow:inset 0 0 120px rgba(0,0,0,.82),0 0 120px rgba(95,230,255,.10);
  transform:perspective(900px) rotateY(-8deg) rotateX(3deg);
}
.orbit{
  position:absolute;
  border:1px solid rgba(68,187,255,.18);
  border-radius:50%;
  animation:spin 48s linear infinite;
}
.orbit-a{width:min(540px,38vw);height:min(540px,38vw);right:20px;top:6px}
.orbit-b{width:min(760px,55vw);height:230px;right:-22px;top:260px;transform:rotate(-14deg);animation-duration:55s}
.orbit-c{width:min(440px,32vw);height:min(710px,74vh);right:78px;top:-10px;transform:rotate(11deg);animation-duration:62s}
.neural-head{
  position:absolute;
  right:min(146px,11vw);
  top:clamp(38px,8vh,82px);
  width:min(300px,25vw);
  height:min(300px,25vw);
  min-width:230px;
  min-height:230px;
  display:grid;
  place-items:center;
  border-radius:50%;
  filter:drop-shadow(0 0 38px rgba(95,230,255,.46));
  animation:float 5.8s ease-in-out infinite;
}
.neural-head:before,.neural-head:after,.aura{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(95,230,255,.22);
  border-radius:50%;
  animation:ripple 3.2s ease-out infinite;
}
.neural-head:after{inset:-12%;animation-delay:.9s}
.aura{inset:-24%;animation-delay:1.8s;opacity:.35}
.neural-head img{
  width:72%;
  height:72%;
  object-fit:contain;
  border-radius:50%;
  filter:saturate(1.08) contrast(1.06) drop-shadow(0 0 18px rgba(95,230,255,.44));
}
.scan{
  position:absolute;
  left:42px;
  right:42px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 20px var(--cyan);
  animation:scan 3.8s ease-in-out infinite;
}
.map-field{
  position:absolute;
  left:-8px;
  right:8px;
  bottom:44px;
  height:210px;
  opacity:.84;
}
.map-field svg{width:100%;height:100%;overflow:visible}
.coast{fill:none;stroke:#72dfff;stroke-width:1.25;opacity:.58}
.coast.faint{opacity:.24}
.nodes circle{fill:#67e7ff;filter:drop-shadow(0 0 8px #67e7ff);animation:pulse 2s ease-in-out infinite}
.nodes circle:nth-child(2n){animation-delay:.4s}
.nodes circle:nth-child(3n){animation-delay:.8s}
.links path{fill:none;stroke:#2e91ff;stroke-width:.8;opacity:.42}
@keyframes gridMove{to{background-position:58px 58px}}
@keyframes logoPulse{50%{transform:scale(1.05);filter:drop-shadow(0 0 22px rgba(95,230,255,.9))}}
@keyframes sweep{0%,58%{left:-70%}78%,100%{left:122%}}
@keyframes sweepCard{0%,62%{left:-76%;opacity:0}72%{opacity:1}92%,100%{left:132%;opacity:0}}
@keyframes cardFloat{50%{transform:translateY(-3px)}}
@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes scan{0%,100%{top:22%;opacity:.22}50%{top:78%;opacity:1}}
@keyframes ripple{0%{transform:scale(.72);opacity:.55}100%{transform:scale(1.38);opacity:0}}
@keyframes pulse{50%{r:7;opacity:.55}}
@media(max-height:760px) and (min-width:1101px){
  .copy h1{font-size:clamp(44px,4.7vw,62px)}
  .solution-strip article{min-height:102px;padding:12px}
  .visual{height:min(560px,calc(100vh - 120px))}
}
@media(max-width:1100px){
  html,body{overflow:auto}
  .stage{width:min(760px,calc(100vw - 32px));display:block}
  .nav{height:76px}
  .hero{min-height:auto;grid-template-columns:1fr;padding:20px 0 38px}
  .copy h1{font-size:48px}
  .solution-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual{min-height:420px;height:430px}
}
@media(max-width:640px){
  .mark span{display:none}
  .copy h1{font-size:38px}
  .solution-strip{grid-template-columns:1fr}
  .visual{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}