/* MANTIS ESTUDIO — V8.3 SEAMLESS AURORA
   Visual goal: continuous, fresh sky-blue environment with no hard horizontal seams.
   Preserves layout/content; refines color, depth and carousel transitions only. */

:root{
  --page-sky:#98e4f5;
  --page-sky-soft:#d9f7ff;
  --page-sky-deep:#73d4ed;
  --navy:#123e5f;
  --ink:#173f5a;
  --muted:#3f687f;
}

html,body{
  background:#98e4f5;
}

/* Header: slightly more vivid, still executive. */
.site-header{
  background:linear-gradient(100deg,rgba(161,232,248,.98) 0%,rgba(111,211,238,.98) 48%,rgba(171,235,249,.98) 100%) !important;
  border-bottom-color:rgba(24,157,203,.28) !important;
  box-shadow:0 10px 32px rgba(18,119,164,.11) !important;
}
.site-header.scrolled{
  background:linear-gradient(100deg,rgba(151,227,246,.98) 0%,rgba(101,204,235,.98) 48%,rgba(161,232,248,.98) 100%) !important;
}

/* Hero and story become one continuous visual field. */
.hero{
  background:
    radial-gradient(ellipse at 50% 8%,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 24%,rgba(245,253,255,.96) 48%,rgba(205,244,252,.91) 76%,rgba(174,235,248,.98) 100%),
    linear-gradient(180deg,#a0e5f5 0%,#e6faff 42%,#aeeaf7 100%) !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.hero::before{
  width:860px !important;
  height:860px !important;
  background:radial-gradient(circle,rgba(24,184,226,.27),rgba(24,184,226,0) 69%) !important;
  animation:mantisAuroraDrift 13s ease-in-out infinite alternate;
}
.hero::after{
  background-image:
    linear-gradient(rgba(8,145,190,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,145,190,.065) 1px,transparent 1px) !important;
  opacity:.82;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.08),black 17%,black 83%,rgba(0,0,0,.08)) !important;
}

.story-wrap{
  position:relative;
  isolation:isolate;
  margin-top:-2px !important;
  padding-top:0 !important;
  padding-bottom:48px !important;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 17% 35%,rgba(86,211,239,.24),transparent 35%),
    radial-gradient(ellipse at 82% 44%,rgba(79,141,221,.11),transparent 38%),
    linear-gradient(180deg,#aeeaf7 0%,#bceff9 18%,#d8f7fc 58%,#eafaff 100%) !important;
  border:0 !important;
}
.story-wrap::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:640px;
  height:640px;
  border-radius:50%;
  top:-300px;
  left:18%;
  background:radial-gradient(circle,rgba(255,255,255,.36),rgba(255,255,255,0) 70%);
  filter:blur(2px);
  animation:mantisAuroraDrift 15s ease-in-out infinite alternate-reverse;
  pointer-events:none;
}
.story-wrap::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:84px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(234,250,255,0),rgba(238,252,255,.82));
}

/* The carousel is no longer a bordered 'block'. */
.story-shell{
  background:transparent !important;
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.story-slide{
  background:transparent !important;
}
.story-slide::before{
  background:
    radial-gradient(ellipse at 78% 48%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.14) 24%,transparent 52%),
    radial-gradient(ellipse at 23% 48%,rgba(77,203,234,.11),transparent 42%),
    linear-gradient(110deg,rgba(175,236,249,.86) 0%,rgba(201,244,252,.88) 49%,rgba(215,242,252,.88) 100%) !important;
  opacity:1 !important;
  filter:none !important;
}
.story-slide::after{
  display:none !important;
  content:none !important;
}
.story-kicker{color:#087fae !important;opacity:1 !important}
.story-slide h2{color:#123e5f !important}
.story-slide p{color:#365f77 !important;font-weight:550}
.story-tags span{
  color:#285d79 !important;
  border-color:rgba(16,143,190,.23) !important;
  background:rgba(255,255,255,.64) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
.story-cta{color:#0d6f9f !important}
.story-dot{border-color:rgba(19,104,157,.52) !important}
.story-dot.active{background:#138fc4 !important;box-shadow:0 0 0 4px rgba(19,143,196,.09)}
.story-arrow{
  border-color:rgba(20,120,169,.20) !important;
  background:rgba(255,255,255,.70) !important;
  color:#0d6f9f !important;
  box-shadow:0 8px 24px rgba(36,103,143,.08) !important;
  backdrop-filter:blur(10px);
}
.story-arrow:hover{
  background:rgba(255,255,255,.92) !important;
  transform:translateY(-2px);
}

/* The long progress line was the strongest visible 'cut'. Dots already communicate state. */
.story-progress{
  display:none !important;
}

/* Visual mark: translucent, integrated, not a separate white rectangle. */
.story-brandmark{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.60),rgba(255,255,255,.25) 48%,rgba(255,255,255,.12) 100%) !important;
  border-color:rgba(42,151,193,.13) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46),0 22px 54px rgba(38,112,153,.08) !important;
}
.story-brandmark::before,.story-brandmark::after{
  border-color:rgba(34,144,188,.12) !important;
}

/* Keep the rest of the page in the same live palette, but with bright reading zones. */
.specialties,.capabilities,.about{
  border-top:0 !important;
  background:linear-gradient(90deg,#9ce4f5 0%,#c6f2fb 8%,#f2fcff 19%,#fff 34%,#fff 66%,#f2fcff 81%,#c6f2fb 92%,#9ce4f5 100%) !important;
}
.platform-band,.method,.contact{
  border-top:0 !important;
  background:linear-gradient(90deg,#91def2 0%,#c2eff9 9%,#eafaff 20%,#f7fdff 36%,#f7fdff 64%,#eafaff 80%,#c2eff9 91%,#91def2 100%) !important;
}
.method-v81{
  background:
    radial-gradient(circle at 12% 20%,rgba(48,198,235,.14),transparent 32%),
    radial-gradient(circle at 89% 78%,rgba(78,124,219,.10),transparent 34%),
    linear-gradient(90deg,#91def2 0%,#c2eff9 10%,#ecfbff 25%,#f9feff 50%,#ecfbff 75%,#c2eff9 90%,#91def2 100%) !important;
}

/* Subtle animation gives freshness without turning the site into a tech demo. */
@keyframes mantisAuroraDrift{
  0%{transform:translate3d(-12px,-4px,0) scale(1)}
  100%{transform:translate3d(18px,10px,0) scale(1.035)}
}

@media(max-width:900px){
  .hero{
    background:linear-gradient(180deg,#a6e7f6 0%,#f6fdff 48%,#b8ecf8 100%) !important;
  }
  .story-wrap{
    margin-top:-1px !important;
    background:linear-gradient(180deg,#b8ecf8 0%,#d8f7fc 60%,#effcff 100%) !important;
  }
  .story-slide::before{
    background:linear-gradient(155deg,rgba(190,241,251,.94),rgba(224,249,254,.94)) !important;
  }
}

@media(max-width:680px){
  .story-wrap{padding-bottom:30px !important}
  .story-shell{border-radius:20px !important;box-shadow:none !important}
  .story-brandmark{display:none !important}
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.story-wrap::before{animation:none !important}
}