/* =========================================================
   PRICE SPECTRUM
========================================================= */

.price-spectrum{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  color:#111827;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(79,124,255,.13),
      transparent 27%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgba(111,74,255,.075),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #FAFCFF 0%,
      #F2F6FF 47%,
      #E8EFFD 100%
    );
}


/* =========================================================
   BIG BACKGROUND ENERGY
========================================================= */

.price-energy{
  position:absolute;

  z-index:-3;

  width:850px;
  height:850px;

  right:-350px;
  top:48%;

  transform:translateY(-50%);

  pointer-events:none;

  animation:
    priceEnergyFloat 18s ease-in-out infinite alternate;
}


.price-energy::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.96) 0%,
      rgba(187,205,255,.42) 17%,
      rgba(95,135,255,.18) 35%,
      rgba(91,74,255,.07) 55%,
      transparent 72%
    );

  filter:blur(24px);

  animation:
    priceEnergyBreath 7s ease-in-out infinite;
}


/* flowing shapes */
.price-energy-wave{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:
    54% 46% 58% 42% /
    43% 56% 44% 57%;

  border:1px solid rgba(49,95,214,.12);

  transform:translate(-50%,-50%);
}


.wave-a{
  width:760px;
  height:440px;

  animation:
    priceWaveA 18s ease-in-out infinite alternate;
}


.wave-b{
  width:490px;
  height:710px;

  border-color:rgba(90,73,255,.075);

  animation:
    priceWaveB 24s ease-in-out infinite alternate;
}


/* central light */
.price-energy-core{
  position:absolute;

  width:18px;
  height:18px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 18px #fff,
    0 0 45px rgba(79,124,255,.50),
    0 0 95px rgba(97,76,255,.20);

  animation:
    priceCorePulse 5s ease-in-out infinite;
}


/* =========================================================
   BACKGROUND ANIMATIONS
========================================================= */

@keyframes priceEnergyFloat{

  from{
    transform:
      translateY(-50%)
      translate3d(-25px,-15px,0);
  }

  to{
    transform:
      translateY(-50%)
      translate3d(45px,30px,0);
  }

}


@keyframes priceEnergyBreath{

  0%,100%{
    transform:
      translate(-50%,-50%)
      scale(.90);

    opacity:.58;
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.10);

    opacity:1;
  }

}


@keyframes priceWaveA{

  from{
    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.96);

    border-radius:
      54% 46% 58% 42% /
      43% 56% 44% 57%;
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(-4deg)
      scale(1.04);

    border-radius:
      43% 57% 41% 59% /
      58% 42% 60% 40%;
  }

}


@keyframes priceWaveB{

  from{
    transform:
      translate(-50%,-50%)
      rotate(18deg)
      scale(.96);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(8deg)
      scale(1.06);
  }

}


@keyframes priceCorePulse{

  0%,100%{
    transform:
      translate(-50%,-50%)
      scale(.8);
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.25);
  }

}


/* =========================================================
   MOVING LIGHT ABOVE COLUMNS
========================================================= */

.price-light-runner{
  position:absolute;

  z-index:3;

  width:240px;
  height:2px;

  left:-300px;

  top:43%;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(79,124,255,.08),
      #6A96FF,
      rgba(255,255,255,.72),
      transparent
    );

  box-shadow:
    0 0 16px rgba(79,124,255,.28);

  animation:
    priceLightRunner 11s ease-in-out infinite;
}


@keyframes priceLightRunner{

  0%{
    left:-300px;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  65%{
    opacity:.9;
  }

  100%{
    left:110%;
    opacity:0;
  }

}


/* =========================================================
   HEAD
========================================================= */

.price-spectrum-head{
  position:relative;
  z-index:5;

  margin-bottom:80px;
}


.price-spectrum-head h2{
  max-width:1030px;

  margin:0;

  color:#111827;

  font-size:clamp(54px,7vw,104px);
  line-height:.89;

  font-weight:300;
  letter-spacing:-.07em;
}


.price-spectrum-head h2 span{
  color:#315FD6;
}


.price-spectrum-intro{
  max-width:670px;

  margin:35px 0 0;

  color:#65748A;

  font-size:17px;
  line-height:1.65;
}


/* =========================================================
   GRID
========================================================= */

.price-spectrum-grid{
  position:relative;
  z-index:5;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  border-top:
    1px solid rgba(49,95,214,.14);

  border-bottom:
    1px solid rgba(49,95,214,.14);
}


/* =========================================================
   ITEM
========================================================= */

.price-spectrum-item{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:700px;

  padding:45px 36px;

  border-right:
    1px solid rgba(49,95,214,.115);

  transition:
    background .45s ease,
    box-shadow .45s ease;
}


.price-spectrum-item:first-child{
  border-left:
    1px solid rgba(49,95,214,.115);
}


/* featured remains subtle */
.price-spectrum-item--main{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.64),
      rgba(232,240,255,.44)
    );
}


/* =========================================================
   LOCAL MOVING LIGHT
========================================================= */

.price-spectrum-item::before{
  content:"";

  position:absolute;

  z-index:-1;

  width:350px;
  height:250px;

  left:-170px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(79,124,255,.15),
      rgba(79,124,255,.04) 48%,
      transparent 72%
    );

  filter:blur(60px);

  opacity:.35;

  transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    opacity .45s ease;
}


/* light sweep */
.price-spectrum-item::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:-60%;

  width:34%;

  transform:skewX(-14deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      rgba(79,124,255,.035),
      transparent
    );

  opacity:0;

  pointer-events:none;
}


/* =========================================================
   CONTENT
========================================================= */

.price-spectrum-content{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  min-height:100%;
}


.price-spectrum-type{
  margin-bottom:45px;

  color:#315FD6;

  font-size:10px;
  font-weight:900;

  letter-spacing:.17em;
}


/* =========================================================
   TITLE
========================================================= */

.price-spectrum-content h3{
  max-width:390px;

  margin:0 0 20px;

  color:#111827;

  font-size:clamp(35px,3.1vw,49px);
  line-height:.95;

  font-weight:400;
  letter-spacing:-.055em;

  transition:
    color .35s ease,
    transform .5s cubic-bezier(.22,1,.36,1);
}


.price-spectrum-lead{
  max-width:420px;

  margin:0 0 35px;

  color:#65748A;

  font-size:15px;
  line-height:1.65;
}


/* =========================================================
   LIST
========================================================= */

.price-spectrum-list{
  display:grid;

  gap:0;

  margin:0;
  padding:0;

  list-style:none;

  border-top:
    1px solid rgba(49,95,214,.10);
}


.price-spectrum-list li{
  position:relative;

  display:grid;

  grid-template-columns:18px minmax(0,1fr);

  gap:13px;

  align-items:center;

  padding:15px 0;

  border-bottom:
    1px solid rgba(49,95,214,.085);

  color:#4F5D70;

  font-size:14px;
  line-height:1.45;

  transition:
    color .3s ease,
    padding-left .4s cubic-bezier(.22,1,.36,1);
}


/* animated marker */
.price-spectrum-list li > span{
  position:relative;

  width:7px;
  height:7px;

  border-radius:50%;

  border:1px solid #315FD6;

  background:#F2F6FF;

  box-shadow:
    0 0 0 4px rgba(49,95,214,.035);

  transition:
    background .3s ease,
    box-shadow .3s ease,
    transform .35s ease;
}


/* tiny core */
.price-spectrum-list li > span::before{
  content:"";

  position:absolute;

  width:2px;
  height:2px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#315FD6;
}


/* =========================================================
   PRICE BOTTOM
========================================================= */

.price-spectrum-bottom{
  margin-top:auto;

  padding-top:52px;
}


/* =========================================================
   PRICE
========================================================= */

.price-spectrum-price{
  display:flex;
  align-items:flex-end;

  gap:8px;
}


.price-spectrum-price > span{
  margin-bottom:8px;

  color:#7C899C;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
}


.price-spectrum-price strong{
  color:#111827;

  font-size:clamp(47px,4.4vw,66px);
  line-height:.78;

  font-weight:950;
  letter-spacing:-.075em;
}


.price-spectrum-price small{
  margin-bottom:5px;

  color:#315FD6;

  font-size:16px;
  font-weight:900;
}


/* =========================================================
   BUTTON
========================================================= */

.price-spectrum-btn{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  width:100%;

  margin-top:34px;

  padding-top:20px;

  border-top:
    1px solid rgba(49,95,214,.12);

  color:#111827;

  font-size:12px;
  font-weight:900;
}


.price-spectrum-arrow{
  display:grid;
  place-items:center;

  width:47px;
  height:47px;

  flex:0 0 auto;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #315FD6,
      #526FFF,
      #7558FF
    );

  box-shadow:
    0 11px 28px rgba(49,95,214,.22);

  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.price-spectrum-item:hover{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.80),
      rgba(234,241,255,.57)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78);
}


.price-spectrum-item:hover::before{
  opacity:.9;

  transform:
    translate(160px,120px)
    scale(1.18);
}


.price-spectrum-item:hover::after{
  animation:
    priceItemSweep .9s cubic-bezier(.22,1,.36,1);
}


@keyframes priceItemSweep{

  0%{
    left:-60%;
    opacity:0;
  }

  18%{
    opacity:1;
  }

  100%{
    left:125%;
    opacity:0;
  }

}


.price-spectrum-item:hover h3{
  color:#315FD6;

  transform:translateX(5px);
}


.price-spectrum-list li:hover{
  color:#202B3B;

  padding-left:5px;
}


.price-spectrum-list li:hover > span{
  transform:scale(1.3);

  background:#315FD6;

  box-shadow:
    0 0 0 7px rgba(49,95,214,.06),
    0 0 22px rgba(49,95,214,.32);
}


.price-spectrum-list li:hover > span::before{
  background:#fff;
}


.price-spectrum-btn:hover
.price-spectrum-arrow{

  transform:
    rotate(45deg)
    scale(1.07);

  box-shadow:
    0 14px 35px rgba(49,95,214,.30);
}


/* =========================================================
   LIST APPEARANCE AFTER REVEAL
========================================================= */

.price-spectrum-item.reveal
.price-spectrum-list li{

  opacity:0;

  transform:translateY(8px);
}


.price-spectrum-item.reveal.visible
.price-spectrum-list li{

  animation:
    priceListReveal .55s ease forwards;
}


.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(1){
  animation-delay:.18s;
}

.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(2){
  animation-delay:.24s;
}

.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(3){
  animation-delay:.30s;
}

.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(4){
  animation-delay:.36s;
}

.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(5){
  animation-delay:.42s;
}

.price-spectrum-item.reveal.visible
.price-spectrum-list li:nth-child(6){
  animation-delay:.48s;
}


@keyframes priceListReveal{

  from{
    opacity:0;

    transform:translateY(8px);
  }

  to{
    opacity:1;

    transform:none;
  }

}


/* =========================================================
   REVEAL
========================================================= */

.price-spectrum-item.reveal{
  opacity:0;

  transform:translateY(30px);

  filter:blur(4px);

  transition:
    opacity .8s ease,
    transform .95s cubic-bezier(.22,1,.36,1),
    filter .8s ease;
}


.price-spectrum-item.reveal.visible{
  opacity:1;

  transform:none;

  filter:blur(0);
}


.price-spectrum-item:nth-child(2){
  transition-delay:.08s;
}

.price-spectrum-item:nth-child(3){
  transition-delay:.16s;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .price-spectrum-grid{
    grid-template-columns:1fr;
  }


  .price-spectrum-item{
    min-height:auto;

    padding:45px 0;

    border-left:0;
    border-right:0;

    border-bottom:
      1px solid rgba(49,95,214,.11);
  }


  .price-spectrum-item:first-child{
    border-left:0;
  }


  .price-spectrum-item--main{
    background:transparent;
  }


  .price-spectrum-item:last-child{
    border-bottom:0;
  }


  .price-spectrum-content{
    min-height:auto;
  }


  .price-spectrum-bottom{
    margin-top:45px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .price-spectrum{
    padding:90px 0;
  }


  .price-spectrum-head{
    margin-bottom:55px;
  }


  .price-spectrum-head h2{
    font-size:clamp(46px,12vw,66px);
    line-height:.91;
  }


  .price-spectrum-intro{
    margin-top:25px;

    font-size:15px;
  }


  .price-spectrum-item{
    padding:36px 0;
  }


  .price-spectrum-type{
    margin-bottom:30px;
  }


  .price-spectrum-content h3{
    width:100%;
    max-width:100%;

    font-size:clamp(34px,9vw,44px);
  }


  .price-spectrum-lead{
    max-width:100%;

    font-size:14px;
  }


  .price-spectrum-list li{
    grid-template-columns:16px minmax(0,1fr);

    gap:10px;

    padding:14px 0;

    font-size:14px;
  }


  .price-spectrum-price strong{
    font-size:48px;
  }


  .price-energy{
    width:560px;
    height:560px;

    right:-430px;

    opacity:.65;
  }


  .price-light-runner{
    display:none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .price-energy,
  .price-energy::before,
  .price-energy-wave,
  .price-energy-core,
  .price-light-runner,
  .price-spectrum-item::after,
  .price-spectrum-list li{

    animation:none !important;
  }

}