/* =========================================================
   VITA UNIKA — KINETIC HERO ACTIONS V37

   NOT two traditional buttons.

   Rest:
   floating orb + centered typography

   Hover:
   orb blooms into the entire action surface
   ========================================================= */


/* =========================================================
   STAGE
   ========================================================= */

html body .vita-hero-v15
.v15-actions.v37-actions{

  position:relative !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,250px) !important;

  justify-content:center !important;

  gap:24px !important;

  width:auto !important;
  max-width:none !important;

  margin:
    0
    auto !important;

  padding:0 !important;

  border:0 !important;

  background:none !important;

  box-shadow:none !important;

  overflow:visible !important;
}


/* subtle central gold point */

html body .vita-hero-v15
.v37-actions::before{

  content:"" !important;

  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:3px !important;
  height:3px !important;

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

  border-radius:50% !important;

  background:#b48d42 !important;

  opacity:.55 !important;

  box-shadow:
    0 0 0 5px
    rgba(180,141,66,.035) !important;

  pointer-events:none !important;
}


/* =========================================================
   ACTION
   transparent at rest
   ========================================================= */

html body .vita-hero-v15
.v37-action{

  --mx:50%;
  --my:50%;

  position:relative !important;

  isolation:isolate !important;

  overflow:visible !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:250px !important;
  height:74px !important;

  min-width:250px !important;
  min-height:74px !important;

  margin:0 !important;

  padding:0 !important;

  border:0 !important;

  border-radius:22px !important;

  background:transparent !important;

  box-shadow:none !important;

  color:#132725 !important;

  text-decoration:none !important;

  transform:
    translate3d(0,0,0) !important;

  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    color .45s ease !important;
}


/* Kill every old Hero CTA pseudo */

html body .vita-hero-v15
.v37-action::before{

  content:"" !important;

  position:absolute !important;

  inset:-8px !important;

  z-index:-2 !important;

  display:block !important;

  width:auto !important;
  height:auto !important;

  padding:0 !important;
  margin:0 !important;

  border-radius:26px !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      180px circle
      at var(--mx) var(--my),

      rgba(11,121,120,.12),

      transparent 68%
    ) !important;

  opacity:0 !important;

  filter:
    blur(10px);

  transition:
    opacity .55s ease !important;
}


html body .vita-hero-v15
.v37-action::after{

  content:"" !important;

  position:absolute !important;

  left:50% !important;
  bottom:4px !important;

  width:0 !important;
  height:1px !important;

  z-index:5 !important;

  display:block !important;

  padding:0 !important;
  margin:0 !important;

  background:
    linear-gradient(
      90deg,

      transparent,

      #b48d42,

      #0b7978,

      transparent
    ) !important;

  transform:
    translateX(-50%) !important;

  opacity:0 !important;

  transition:
    width .75s cubic-bezier(.16,1,.3,1),
    opacity .35s ease !important;

  pointer-events:none !important;
}


/* =========================================================
   TYPOGRAPHY
   actually centered in full 250px action
   ========================================================= */

html body .vita-hero-v15
.v37-action__label{

  position:absolute !important;

  z-index:6 !important;

  left:50% !important;
  top:50% !important;

  margin:0 !important;
  padding:0 !important;

  font-size:16.5px !important;

  line-height:1 !important;

  font-weight:500 !important;

  letter-spacing:-.025em !important;

  white-space:nowrap !important;

  text-align:center !important;

  color:inherit !important;

  transform:
    translate3d(-50%,-50%,0) !important;

  transition:
    color .45s ease,
    transform .7s cubic-bezier(.16,1,.3,1),
    letter-spacing .7s cubic-bezier(.16,1,.3,1) !important;
}


/* =========================================================
   ORB
   ========================================================= */

html body .vita-hero-v15
.v37-action__orb{

  position:absolute !important;

  z-index:3 !important;

  top:50% !important;

  width:58px !important;
  height:58px !important;

  min-width:58px !important;
  min-height:58px !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:50% !important;

  transform:
    translate3d(0,-50%,0) !important;

  overflow:hidden !important;

  transition:
    width .78s cubic-bezier(.16,1,.3,1),
    height .78s cubic-bezier(.16,1,.3,1),
    left .78s cubic-bezier(.16,1,.3,1),
    right .78s cubic-bezier(.16,1,.3,1),
    border-radius .78s cubic-bezier(.16,1,.3,1),
    background .55s ease,
    border-color .55s ease,
    box-shadow .7s cubic-bezier(.16,1,.3,1) !important;
}


/* =========================================================
   ICON
   ========================================================= */

html body .vita-hero-v15
.v37-action__icon{

  position:absolute !important;

  top:50% !important;

  width:58px !important;
  height:58px !important;

  display:grid !important;

  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  transform:
    translateY(-50%) !important;

  transition:
    transform .78s cubic-bezier(.16,1,.3,1),
    color .45s ease !important;
}


html body .vita-hero-v15
.v37-action__icon svg{

  width:20px !important;
  height:20px !important;

  display:block !important;

  margin:0 !important;

  transition:
    transform .75s cubic-bezier(.16,1,.3,1) !important;
}


/* =========================================================
   BOOK — ORB STARTS LEFT
   ========================================================= */

html body .vita-hero-v15
.v37-action--book
.v37-action__orb{

  left:0 !important;

  right:auto !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      145deg,
      #0b7978,
      #0b8885
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.16),

    0 9px 24px
    rgba(11,121,120,.14) !important;

  animation:
    vitaOrbBreathe
    4.8s
    ease-in-out
    infinite;
}


html body .vita-hero-v15
.v37-action--book
.v37-action__icon{

  left:0 !important;

  color:#ffffff !important;
}


/* pulse halo */

html body .vita-hero-v15
.v37-action--book
.v37-action__orb::before{

  content:"";

  position:absolute;

  inset:4px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:inherit;

  pointer-events:none;

  opacity:.65;

  transition:
    opacity .5s ease;
}


/* =========================================================
   SERVICES — ORB STARTS RIGHT
   ========================================================= */

html body .vita-hero-v15
.v37-action--services
.v37-action__orb{

  right:0 !important;

  left:auto !important;

  color:#0b7978 !important;

  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid
    rgba(11,121,120,.22) !important;

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.96),

    0 7px 22px
    rgba(19,39,37,.045) !important;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


html body .vita-hero-v15
.v37-action--services
.v37-action__icon{

  right:0 !important;

  color:#0b7978 !important;
}


/* =========================================================
   DESKTOP INTERACTION
   ========================================================= */

@media(hover:hover) and (pointer:fine){


  /* small magnetic lift */

  html body .vita-hero-v15
  .v37-action:hover{

    transform:
      translate3d(
        var(--mag-x,0px),
        calc(var(--mag-y,0px) - 3px),
        0
      ) !important;
  }


  html body .vita-hero-v15
  .v37-action:hover::before{

    opacity:1 !important;
  }


  html body .vita-hero-v15
  .v37-action:hover::after{

    width:74% !important;

    opacity:.8 !important;
  }


  /* =====================================================
     BOOK BLOOM
     teal orb becomes entire surface
     ===================================================== */

  html body .vita-hero-v15
  .v37-action--book:hover{

    color:#ffffff !important;
  }


  html body .vita-hero-v15
  .v37-action--book:hover
  .v37-action__orb{

    width:250px !important;
    height:74px !important;

    left:0 !important;

    border-radius:22px !important;

    background:

      radial-gradient(
        190px circle
        at var(--mx) var(--my),

        rgba(255,255,255,.24),

        transparent 65%
      ),

      linear-gradient(
        120deg,
        #08716f,
        #0b8986
      ) !important;

    box-shadow:

      inset 0 1px 0
      rgba(255,255,255,.18),

      0 20px 42px
      rgba(11,121,120,.20),

      0 0 0 5px
      rgba(11,121,120,.035) !important;

    animation:none !important;
  }


  html body .vita-hero-v15
  .v37-action--book:hover
  .v37-action__icon{

    transform:
      translate3d(6px,-50%,0)
      scale(1.05) !important;
  }


  html body .vita-hero-v15
  .v37-action--book:hover
  .v37-action__label{

    color:#ffffff !important;

    letter-spacing:-.015em !important;

    transform:
      translate3d(-42%,-50%,0) !important;
  }


  /* =====================================================
     SERVICES BLOOM
     frosted orb grows from right
     ===================================================== */

  html body .vita-hero-v15
  .v37-action--services:hover{

    color:#0b7978 !important;
  }


  html body .vita-hero-v15
  .v37-action--services:hover
  .v37-action__orb{

    width:250px !important;
    height:74px !important;

    right:0 !important;

    border-radius:22px !important;

    background:

      radial-gradient(
        180px circle
        at var(--mx) var(--my),

        rgba(11,121,120,.12),

        transparent 66%
      ),

      linear-gradient(
        135deg,
        rgba(255,255,255,.98),
        rgba(242,250,249,.96)
      ) !important;

    border-color:
      rgba(11,121,120,.34) !important;

    box-shadow:

      inset 0 1px 0
      rgba(255,255,255,1),

      0 18px 38px
      rgba(19,39,37,.08),

      0 0 0 5px
      rgba(180,141,66,.035) !important;
  }


  html body .vita-hero-v15
  .v37-action--services:hover
  .v37-action__icon{

    transform:
      translate3d(-6px,-50%,0)
      scale(1.05) !important;
  }


  html body .vita-hero-v15
  .v37-action--services:hover
  .v37-action__label{

    color:#087573 !important;

    transform:
      translate3d(-58%,-50%,0) !important;
  }


  /* icon micro reaction */

  html body .vita-hero-v15
  .v37-action:hover
  .v37-action__icon svg{

    transform:
      scale(1.08) !important;
  }

}


/* =========================================================
   PRESS
   ========================================================= */

html body .vita-hero-v15
.v37-action:active{

  transform:
    scale(.975) !important;

  transition-duration:
    .12s !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

html body .vita-hero-v15
.v37-action:focus-visible{

  outline:
    2px solid #b48d42 !important;

  outline-offset:
    5px !important;
}


/* =========================================================
   PRIMARY ORB LOOP
   ========================================================= */

@keyframes vitaOrbBreathe{

  0%,
  100%{

    box-shadow:

      inset 0 1px 0
      rgba(255,255,255,.16),

      0 8px 22px
      rgba(11,121,120,.12),

      0 0 0 0
      rgba(11,121,120,0);
  }


  50%{

    box-shadow:

      inset 0 1px 0
      rgba(255,255,255,.20),

      0 11px 28px
      rgba(11,121,120,.17),

      0 0 0 7px
      rgba(11,121,120,.035);
  }

}


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

@media(max-width:760px){

  html body .vita-hero-v15
  .v15-actions.v37-actions{

    grid-template-columns:
      250px !important;

    gap:8px !important;
  }


  html body .vita-hero-v15
  .v37-action{

    width:250px !important;
    min-width:250px !important;

    height:66px !important;
    min-height:66px !important;
  }


  html body .vita-hero-v15
  .v37-action__orb{

    width:52px !important;
    height:52px !important;

    min-width:52px !important;
    min-height:52px !important;
  }


  html body .vita-hero-v15
  .v37-action__icon{

    width:52px !important;
    height:52px !important;
  }


  html body .vita-hero-v15
  .v37-action__label{

    font-size:15.5px !important;
  }

}


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

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

  html body .vita-hero-v15
  .v37-action,

  html body .vita-hero-v15
  .v37-action::before,

  html body .vita-hero-v15
  .v37-action::after,

  html body .vita-hero-v15
  .v37-action__orb,

  html body .vita-hero-v15
  .v37-action__icon,

  html body .vita-hero-v15
  .v37-action__label{

    animation:none !important;

    transition:none !important;
  }

}