.gradient-border {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    conic-gradient(
      from 71.79deg at 50.14% 54.58%,
      #01023d -14.87deg,
      #4a63c8 76.31deg,
      #0e1f73 152.21deg,
      #8fa4ff 248.67deg,
      #01023d 345.13deg,
      #4a63c8 436.31deg
    );
}

.bglll {
  box-shadow: 0px 4px 10.9px 0px rgba(111, 111, 111, 0.62);
}

.numberGradient-border {
  background: linear-gradient(
    200.69deg,
    #cba3ff -0.76%,
    #ffffff 9.75%,
    #e3cdff 24.54%,
    #4c3cea 98.57%
  );
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0px 4px 15.8px 0px rgba(0, 0, 0, 0.94);
  padding: 1px;
}

/* sliders */
.swiper {
  overflow: visible !important;
  /* height:100% used to stretch this to a distant ancestor's height,
     forcing every review card to ~730px tall regardless of its actual
     (2-4 line) content and leaving a huge empty gap above the arrows.
     overflow:visible already keeps the scaled-up active slide from being
     clipped, so the container can just size to its real content. */
  height: auto;
}

/* swiper-bundle.min.css itself sets .swiper-wrapper and .swiper-slide to
   height:100%, which keeps stretching them to a distant ancestor even
   after the override above - breaking that chain here too. Scoped to this
   carousel only so swiper1 keeps its own (working) sizing. */
.swiper.swiper-horizontal .swiper-wrapper,
.swiper.swiper-horizontal .swiper-slide {
  height: auto;
}

/* Same height:100% chain also caps .swiper2 (Nivelul 1/2/3) at a frozen
   height, clipping the chip/coin video once it's back in normal flow
   instead of being absolutely positioned. Letting height resize to content
   here means every level's slide is only as tall as it needs to be. */
.swiper2 .swiper-wrapper,
.swiper2 .swiper-slide {
  height: auto;
}

.swiper-button-prev,
.swiper-button-next {
  width: 90px;
  height: 45px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-slide {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.swiper .swiper-slide-active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 2;
}

.swiper .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.9);
  opacity: 0.7;
}

#comments .swiper {
  margin-top: 100px;
}

@media (min-width: 768px) {
  #comments .swiper {
    margin-top: 130px;
  }
}

/* md:aspect-[16/9] never got compiled into output.css, so the container has no
   height at all (mobile has no aspect-ratio fallback) and the video collapses to 0px */
#video-container {
  aspect-ratio: 16 / 9;
}

/* bg-heroBg / bg-heroMobBg point to ../img/heroBg.jpg and ../img/heroMobBg1.jpg,
   neither of which exists — plain white background, like it originally rendered */
.bg-heroBg,
.bg-heroMobBg {
  background-image: none;
  background-color: #fff;
}

/* modal background image is missing on disk (../img/modalMobBG.jpg, ../img/modalDeskBG.jpg),
   so replace it with the site's own dark-blue gradient instead of leaving it transparent */
#modalOverlay .modal-content {
  background-image: linear-gradient(160deg, #01023d 0%, #0a145a 55%, #14297a 100%);
}

/* steps phone slider */
.stepsPhoneSlider {
  position: relative;
  width: 190px;
  aspect-ratio: 874 / 1859;
  filter: drop-shadow(0 0 25px rgba(122, 230, 255, 0.45))
    drop-shadow(0 0 60px rgba(74, 99, 200, 0.35));
}

@media (min-width: 768px) {
  .stepsPhoneSlider {
    width: 240px;
  }
}

.stepsPhoneSlider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: stepsPhoneFade 9s ease-in-out infinite;
}

.stepsPhoneSlider img:nth-child(1) {
  animation-delay: 0s;
}

.stepsPhoneSlider img:nth-child(2) {
  animation-delay: 3s;
}

.stepsPhoneSlider img:nth-child(3) {
  animation-delay: 6s;
}

@keyframes stepsPhoneFade {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* slider1 */
.swiper1 {
  overflow: visible !important;
  height: 100%;
}

.swiper-button-prev1,
.swiper-button-next1 {
  width: 28px;
  height: 52px;
  z-index: 100;
}

.swiper-button-prev1::after,
.swiper-button-next1::after {
  display: none;
}

.swiper-slide {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* loader */
.loader {
  position: relative;

  width: 90px;
  height: 90px;

  margin: 0 auto 20px;
}

.loader span {
  position: absolute;
  inset: 0;

  border: 2px solid transparent;
  border-top-color: #2a7ce6;
  border-radius: 50%;

  animation: orbit 2.2s linear infinite;

  box-shadow:
    0 0 12px rgba(42, 124, 230, 0.25),
    0 0 25px rgba(42, 124, 230, 0.18);
}

.loader span:nth-child(2) {
  inset: 8px;

  animation-duration: 1.5s;
  animation-direction: reverse;

  border-top-color: #53a6ff;
}

.loader span:nth-child(3) {
  inset: 16px;

  animation-duration: 1s;

  border-top-color: #8bc5ff;
}

.loader::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 14px;
  height: 14px;

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

  border-radius: 50%;

  background: #2a7ce6;

  box-shadow:
    0 0 15px #2a7ce6,
    0 0 35px rgba(42, 124, 230, 0.7);

  animation: pulseCenter 1.5s ease-in-out infinite;
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulseCenter {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.8;
  }
}

.step {
  display: flex;
  align-items: center;
  gap: 14px;

  color: rgba(255, 255, 255, 0.55);

  transition: 0.35s;
}

.step.active {
  color: #fff;
}

.step.done {
  color: #fff;
}

.dot {
  width: 16px;
  height: 16px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  transition: 0.35s;
}

.step.active .dot {
  background: #2a7ce6;

  box-shadow: 0 0 18px rgba(42, 124, 230, 0.8);

  animation: pulse 0.8s infinite;
}

.step.done .dot {
  position: relative;

  background: #22c55e;
}

.step.done .dot::after {
  content: "✓";

  position: absolute;

  inset: 0;

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

  color: white;
  font-size: 11px;
  font-weight: 700;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* modal */
#modalOverlay {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

#modalOverlay.show {
  opacity: 1;
  visibility: visible;
}

#modalOverlay .modal-content {
  transform: scale(0.95) translateY(15px);
  opacity: 0;

  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease;
}

#modalOverlay.show .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* loader */
.loader {
  position: relative;

  width: 90px;
  height: 90px;

  margin: 0 auto 20px;
}

.loader span {
  position: absolute;
  inset: 0;

  border: 2px solid transparent;
  border-top-color: #2a7ce6;
  border-radius: 50%;

  animation: orbit 2.2s linear infinite;

  box-shadow:
    0 0 12px rgba(42, 124, 230, 0.25),
    0 0 25px rgba(42, 124, 230, 0.18);
}

.loader span:nth-child(2) {
  inset: 8px;

  animation-duration: 1.5s;
  animation-direction: reverse;

  border-top-color: #53a6ff;
}

.loader span:nth-child(3) {
  inset: 16px;

  animation-duration: 1s;

  border-top-color: #8bc5ff;
}

.loader::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 14px;
  height: 14px;

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

  border-radius: 50%;

  background: #2a7ce6;

  box-shadow:
    0 0 15px #2a7ce6,
    0 0 35px rgba(42, 124, 230, 0.7);

  animation: pulseCenter 1.5s ease-in-out infinite;
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulseCenter {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.8;
  }
}

.step {
  display: flex;
  align-items: center;
  gap: 14px;

  color: rgba(255, 255, 255, 0.55);

  transition: 0.35s;
}

.step.active {
  color: #fff;
}

.step.done {
  color: #fff;
}

.dot {
  width: 16px;
  height: 16px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  transition: 0.35s;
}

.step.active .dot {
  background: #2a7ce6;

  box-shadow: 0 0 18px rgba(42, 124, 230, 0.8);

  animation: pulse 0.8s infinite;
}

.step.done .dot {
  position: relative;

  background: #22c55e;
}

.step.done .dot::after {
  content: "✓";

  position: absolute;

  inset: 0;

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

  color: white;
  font-size: 11px;
  font-weight: 700;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.loader {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.loader.hide {
  opacity: 0;
  transform: scale(0.8);
}

.loader-success {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 90px;
  height: 90px;

  margin: 0 auto 20px;

  opacity: 0;
  transform: scale(0.7);

  transition: 0.35s;

  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(0.7);

  pointer-events: none;
}

.loader-success.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.loader-success svg {
  width: 90px;
  height: 90px;
}

.success-circle {
  fill: none;

  stroke: #22c55e;
  stroke-width: 3;

  stroke-dasharray: 151;
  stroke-dashoffset: 151;

  animation: drawCircle 0.45s ease forwards;
}

.success-check {
  fill: none;

  stroke: #22c55e;
  stroke-width: 4;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 36;
  stroke-dashoffset: 36;

  animation: drawCheck 0.35s ease 0.35s forwards;
}

@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.loader-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
}

.loader-error {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 90px;
  height: 90px;

  margin: 0 auto 20px;

  opacity: 0;

  transition: 0.35s;

  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(0.7);

  pointer-events: none;
}

.loader-error.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.loader-error svg {
  width: 90px;
  height: 90px;
}

.error-circle {
  fill: none;

  stroke: #ef4444;
  stroke-width: 3;

  stroke-dasharray: 151;
  stroke-dashoffset: 151;

  animation: drawCircle 0.45s ease forwards;
}

.error-cross {
  fill: none;

  stroke: #ef4444;
  stroke-width: 4;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 52;
  stroke-dashoffset: 52;

  animation: drawCheck 0.35s ease 0.35s forwards;
}

/* output.css is a static pre-built file and doesn't contain every class
   used in the page (arbitrary-value gradients, borders and shadows on the
   Diagnostic/Strategie/Parteneriat cards). Re-declared here by hand instead
   of via Tailwind classes.
   Note: the accent band behind "Nivelul 1/2/3" (.infoAccentBand) is left
   without a height on purpose - the heading/paragraph text in that section
   is text-black, designed for a white background. Giving the band real
   height covers it in dark blue and makes the black text unreadable. */

/* the arrow sits at a fixed height inside the testimonials carousel, but
   slides differ (a light photo up top vs a dark blue card) - a plain white
   arrow blends into whichever slide happens to be light there, looking
   like it "disappears". A drop-shadow keeps it visible on any background. */
.swiper-button-prev1 img,
.swiper-button-next1 img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

.stepCard {
  border-color: rgba(74, 99, 200, 0.7);
  box-shadow:
    0 0 20px rgba(74, 99, 200, 0.35),
    0 0 50px rgba(74, 99, 200, 0.22),
    0 0 120px rgba(74, 99, 200, 0.12);
}

.icon-badge {
  box-shadow: 0 0 25px rgba(106, 127, 219, 0.45);
}

/* SVG has height="100%" with no CSS height override, which some mobile
   browsers resolve against a distant stretched ancestor instead of the
   icon's own intrinsic size, blowing the icon (and its card) up to fill
   the screen. Give it an explicit height matching its Tailwind width. */
.icon-badge svg {
  height: 32px;
}

@media (min-width: 768px) {
  .icon-badge svg {
    height: 36px;
  }
}

/* form validation feedback */
.field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.form-error-msg {
  display: none;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 10px 14px;
  margin-top: 14px;
}

.form-error-msg.show {
  display: block;
}