/* ==========================================================================
   IBTDI V53 — Hero inspired by the supplied vertical-light reference
   Dark edges, translucent columns, a focused blue beam and lower-stage glow.
   ========================================================================== */

.ibtdi_hero_future{
  --v53-blue:#536dff;
  --v53-blue-bright:#7186ff;
  --v53-ink:#020207;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 51% 34%,rgba(53,58,180,.20),transparent 32%),
    linear-gradient(90deg,#010104 0%,#050510 22%,#09091c 51%,#050510 78%,#010104 100%)!important;
}

/* Fine stars with quieter density near the reading area. */
.ibtdi_hero_future:before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:
    radial-gradient(circle at 4% 17%,rgba(255,255,255,.86) 0 1px,transparent 1.5px),
    radial-gradient(circle at 11% 49%,rgba(202,214,255,.72) 0 1px,transparent 1.5px),
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.60) 0 1px,transparent 1.5px),
    radial-gradient(circle at 25% 74%,rgba(202,214,255,.76) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 12%,rgba(255,255,255,.70) 0 1px,transparent 1.5px),
    radial-gradient(circle at 43% 43%,rgba(202,214,255,.52) 0 1px,transparent 1.5px),
    radial-gradient(circle at 56% 21%,rgba(255,255,255,.68) 0 1px,transparent 1.5px),
    radial-gradient(circle at 65% 67%,rgba(202,214,255,.74) 0 1px,transparent 1.5px),
    radial-gradient(circle at 74% 12%,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 41%,rgba(202,214,255,.56) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 20%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    radial-gradient(circle at 96% 73%,rgba(202,214,255,.66) 0 1px,transparent 1.5px)!important;
  opacity:.74!important;
  transform:none!important;
  filter:none!important;
  animation:v53Stars 5.8s ease-in-out infinite alternate!important;
  pointer-events:none;
}

/* Central atmospheric blue wash. */
.ibtdi_hero_future:after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:auto!important;
  background:
    radial-gradient(ellipse at 56% 42%,rgba(72,78,220,.24),transparent 31%),
    radial-gradient(ellipse at 50% 83%,rgba(82,103,255,.28),transparent 35%),
    linear-gradient(90deg,transparent 10%,rgba(55,60,158,.05) 50%,transparent 90%)!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  animation:v53Ambient 9s ease-in-out infinite alternate!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none;
}

.future_hero_shell{
  min-height:1050px;
  padding-top:72px!important;
  overflow:hidden;
  border-color:rgba(143,151,255,.12)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 22%),
    rgba(1,1,6,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 42px 110px rgba(0,0,0,.40)!important;
  backdrop-filter:none!important;
}

/* Vertical translucent architecture from the supplied reference. */
.future_hero_shell:before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 74px,
      rgba(104,111,255,.025) 75px,
      rgba(104,111,255,.075) 119px,
      rgba(104,111,255,.018) 120px,
      rgba(255,255,255,0) 164px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.64) 0%,
      rgba(0,0,0,.24) 17%,
      rgba(44,45,128,.12) 37%,
      rgba(65,67,180,.18) 54%,
      rgba(35,36,108,.11) 72%,
      rgba(0,0,0,.26) 84%,
      rgba(0,0,0,.66) 100%
    )!important;
  opacity:1!important;
  animation:v53Columns 13s ease-in-out infinite alternate!important;
  pointer-events:none;
}

/* Lower blue stage light behind the browser mockup. */
.future_hero_shell:after{
  content:"";
  position:absolute;
  z-index:0;
  right:-4%;
  bottom:-29%;
  left:-4%;
  width:auto;
  height:68%;
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(194,200,255,.82) 0%,rgba(105,120,255,.58) 8%,rgba(69,82,231,.38) 25%,rgba(34,40,132,.18) 49%,transparent 70%);
  filter:blur(12px);
  opacity:.94;
  pointer-events:none;
}

.hero_horizon_scene{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

/* A soft floor of blue light, not the previous perspective grid. */
.hero_horizon_scene:before{
  content:"";
  position:absolute;
  top:auto;
  right:5%;
  bottom:-9%;
  left:5%;
  height:43%;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(128,140,255,.48),rgba(80,94,244,.22) 29%,rgba(27,31,103,.07) 54%,transparent 72%);
  transform:none;
  opacity:.9;
  -webkit-mask-image:none;
  mask-image:none;
  filter:blur(7px);
}

.hero_horizon_scene:after{
  content:"";
  position:absolute;
  top:auto;
  right:17%;
  bottom:42%;
  left:17%;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(129,141,255,.25),rgba(231,233,255,.86) 50%,rgba(129,141,255,.25),transparent);
  box-shadow:0 0 18px rgba(115,129,255,.68),0 0 60px rgba(77,93,255,.34);
  opacity:.9;
}

/* Repurpose the old eclipse node into the reference's vertical light beam. */
.horizon_eclipse{
  position:absolute;
  top:-9%;
  right:36%;
  width:210px;
  height:77%;
  border-radius:50%;
  transform:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(72,86,255,.04) 13%,rgba(88,108,255,.36) 45%,rgba(183,192,255,.82) 50%,rgba(84,103,255,.35) 56%,rgba(72,86,255,.04) 87%,transparent 100%);
  box-shadow:none;
  filter:blur(13px);
  opacity:.88;
  animation:v53Beam 5.6s ease-in-out infinite alternate;
}

.horizon_eclipse:before{
  content:"";
  position:absolute;
  inset:0 44%;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(119,139,255,.08),rgba(204,210,255,.96) 61%,rgba(117,131,255,.22));
  box-shadow:0 0 24px rgba(128,145,255,.82),0 0 70px rgba(77,97,255,.50);
}

.horizon_eclipse:after{
  content:"";
  position:absolute;
  right:50%;
  bottom:-12%;
  width:270px;
  height:160px;
  border:0;
  border-radius:50%;
  transform:translateX(50%);
  background:radial-gradient(ellipse,rgba(222,224,255,.94) 0%,rgba(112,128,255,.48) 18%,rgba(70,83,223,.20) 43%,transparent 70%);
  box-shadow:none;
  filter:blur(12px);
}

/* The supplied concept has no orbital circles. */
.horizon_orbit,
.horizon_axis{
  display:none!important;
}

.future_hero_content,
.future_browser_mockup,
.future_star,
.future_label{
  position:relative;
  z-index:2!important;
}

.future_hero_content{
  text-shadow:0 3px 24px rgba(0,0,0,.62);
}

.future_hero_content .ibtdi_eyebrow{
  color:#f2f3ff!important;
  background:rgba(12,12,29,.52)!important;
  border-color:rgba(166,170,255,.23)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 15px 38px rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
}

.future_browser_mockup{
  margin-top:36px!important;
  border-color:rgba(202,205,255,.30)!important;
  box-shadow:
    0 38px 100px rgba(0,0,0,.43),
    0 0 0 1px rgba(142,151,255,.10),
    0 -25px 95px rgba(85,99,255,.18)!important;
}

/* Cursor-like labels inspired by the two colored names in the reference. */
.future_label{
  position:absolute!important;
  padding:6px 11px!important;
  color:#fff!important;
  font-size:11px!important;
  background:#7451e9!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
  backdrop-filter:none!important;
}

.future_label:before{
  content:"";
  position:absolute;
  top:-7px;
  right:-5px;
  width:0;
  height:0;
  border-right:7px solid transparent;
  border-bottom:12px solid #fff;
  transform:rotate(-22deg);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}

.future_label:after{display:none!important;}
.future_label_one{top:28%!important;left:4%!important;right:auto!important;background:#34a51d!important;}
.future_label_two{top:29%!important;right:4%!important;left:auto!important;background:#7d4be8!important;}
.future_label_three{display:inline-flex!important;top:48%!important;left:5%!important;right:auto!important;background:#d49a26!important;}
.future_label_four{top:48%!important;right:12%!important;left:auto!important;background:#276bd7!important;}

@keyframes v53Stars{
  from{opacity:.50;}
  to{opacity:.82;}
}

@keyframes v53Ambient{
  from{opacity:.78;}
  to{opacity:1;}
}

@keyframes v53Columns{
  from{background-position:0 0,0 0;}
  to{background-position:12px 0,0 0;}
}

@keyframes v53Beam{
  from{opacity:.70;filter:blur(15px) brightness(.92);}
  to{opacity:1;filter:blur(11px) brightness(1.12);}
}

@media(max-width:1199px){
  .horizon_eclipse{right:30%;width:180px;}
  .future_label{display:none!important;}
}

@media(max-width:767px){
  .ibtdi_hero_future{
    background:
      radial-gradient(ellipse at 54% 37%,rgba(53,58,180,.17),transparent 39%),
      linear-gradient(90deg,#010104 0%,#080817 50%,#010104 100%)!important;
  }
  .future_hero_shell{min-height:980px;padding-top:70px!important;}
  .future_hero_shell:before{
    background:
      repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 45px,
        rgba(104,111,255,.035) 46px,
        rgba(104,111,255,.075) 77px,
        transparent 78px,
        transparent 108px
      ),
      linear-gradient(90deg,rgba(0,0,0,.54),rgba(52,54,153,.15) 50%,rgba(0,0,0,.54))!important;
  }
  .horizon_eclipse{
    top:-4%;
    right:22%;
    width:135px;
    height:71%;
    opacity:.68;
  }
  .hero_horizon_scene:before{right:-18%;bottom:-4%;left:-18%;height:38%;}
  .hero_horizon_scene:after{right:2%;bottom:35%;left:2%;}
  .future_hero_shell:after{right:-35%;bottom:-22%;left:-35%;height:58%;}
  .future_hero_content .ibtdi_eyebrow{backdrop-filter:none;}
  .future_browser_mockup{
    margin-top:35px!important;
    box-shadow:0 29px 72px rgba(0,0,0,.40),0 -17px 70px rgba(85,99,255,.14)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .ibtdi_hero_future:before,
  .ibtdi_hero_future:after,
  .future_hero_shell:before,
  .horizon_eclipse{
    animation:none!important;
  }
}