.pillow {
  background: linear-gradient(
    193.03deg,
    rgba(255, 255, 255, 0.1) 23.34%,
    rgba(255, 255, 255, 0.02) 88.96%
  );
  box-shadow: -1px -1px 5.8px 0px #8b8b8b3b inset;

  backdrop-filter: blur(14px);
}

.outline-btn {
  background: radial-gradient(
        45.39% 86.77% at 52.63% 121.84%,
        rgba(0, 255, 235, 0.5) 0%,
        rgba(2, 6, 3, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    linear-gradient(0deg, rgba(38, 38, 38, 0.002), rgba(38, 38, 38, 0.002));
  /* border-width: 1px; */
  /* border-radius: 10px; */
  /* border-style: solid; */
  /* border: 5px solid; */
  /* border-image: conic-gradient(from 90deg at 86% 55.17%, #00FFEB 0deg, rgba(0, 255, 235, 0) 179deg, rgba(153, 153, 153, 0) 360deg) 1; */
  /* border-image-source: conic-gradient(from 90deg at 86% 55.17%, #00FFEB 0deg, rgba(0, 255, 235, 0) 179deg, rgba(153, 153, 153, 0) 360deg),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)); */
}

.gradient-border {
  position: relative;
  border-radius: 16px;
  /* your radius */
  /* background: rgba(255, 255, 255, 0.05); */
  /* inner bg */
  padding: 16px;
  z-index: 1;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  /* Border thickness */
  border-radius: inherit;
  background: conic-gradient(
    from 90deg at 86% 55.17%,
    #00ffeb 0deg,
    rgba(0, 255, 235, 0) 179deg,
    rgba(153, 153, 153, 0) 360deg
  );

  /* Mask to make it behave like a border */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-cta {
  --r: 32px;
  /* corner radius */
  --pad: 28px 38px;
  /* inner padding */
  --outer: 1.5px;
  /* outer rim thickness */
  --inner-gap: 6px;
  /* gap from edge to neon ring */
  --inner: 1px;
  /* neon ring thickness */

  position: relative;
  border: none;
  border-radius: var(--r);
  padding: var(--pad);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: radial-gradient(
      120% 120% at 50% 95%,
      rgba(0, 255, 235, 0.25),
      rgba(0, 0, 0, 0) 45%
    ),
    linear-gradient(180deg, #143b74 0%, #0a2a54 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    /* top highlight */ inset 0 -8px 18px rgba(0, 0, 0, 0.35),
    /* inner depth */ 0 16px 40px rgba(0, 0, 0, 0.45);
  /* outer drop */
  overflow: hidden;
  isolation: isolate;
  /* ensures pseudo elements stack cleanly */
}

/* OUTER SOFT RIM */
.btn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--outer);
  background: #ffffff;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.1;
  pointer-events: none;
}

/* INNER NEON RING */
.btn-cta::after {
  content: "";
  position: absolute;
  inset: var(--inner-gap);
  border-radius: calc(var(--r) - var(--inner-gap));
  padding: var(--inner);
  background: conic-gradient(
    from 95deg at 20% 15%,
    rgba(0, 0, 0, 0) 0deg,
    #00ffeb 10deg,
    #00ffeb 20deg,
    #ffffff0a 150deg,
    #ffffff0a 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(0, 255, 235, 0.6));
  /* glow */
  pointer-events: none;
  opacity: 0.95;
}

/* optional: subtle star specks like the screenshot */
.btn-cta {
  background-image: radial-gradient(
      2px 2px at 40% 30%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 48% 24%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 52% 36%,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      1px 1px at 60% 40%,
      rgba(255, 255, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      120% 120% at 50% 95%,
      rgba(0, 255, 235, 0.8),
      rgba(0, 0, 0, 0) 30%
    ),
    linear-gradient(180deg, transparent 0%, transparent 100%);
  background-blend-mode: screen, screen, screen, screen, normal, normal;
}

.btn-solid {
  background: radial-gradient(
      2px 2px at 40% 30%,
      rgba(255, 255, 255, 0.5),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 48% 24%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 52% 36%,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      1px 1px at 60% 40%,
      rgba(255, 255, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      190% 300% at 105% 130%,
      rgba(0, 255, 235, 0.75),
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(180deg, transparent 0%, #0b2b57 70%, #0a2447 100%);
  background-blend-mode: screen, screen, screen, screen, screen, normal;
  /* background:
        radial-gradient(120% 120% at 50% 95%, rgba(0, 255, 235, .25), rgba(0, 0, 0, 0) 45%),
        linear-gradient(180deg, #143b74 0%, #0a2a54 100%); */

  /* background:
        radial-gradient(120% 120% at 50% 95%, rgba(0, 255, 235, .25), rgba(0, 0, 0, 0) 45%),
        linear-gradient(180deg, #143b74 0%, #0a2a54 100%); */
}

.cta-pill {
  --r: 40px;
  /* corner radius */
  --pad-y: 22px;
  /* vertical padding */
  --pad-x: 48px;
  /* horizontal padding */
  --outer: 1.5px;
  /* outer glossy rim thickness */
  --inner-gap: 10px;
  /* distance from edge to neon ring */
  --inner: 2px;
  /* neon ring thickness */

  position: relative;
  display: inline-block;
  border: 0;
  border-radius: var(--r);
  padding: var(--pad-y) var(--pad-x);
  color: #fff;
  font: 700 28px/1.1 system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(0.5px);
  -webkit-tap-highlight-color: transparent;

  /* inner fill + star specks */
  background: radial-gradient(
      2px 2px at 40% 30%,
      rgba(255, 255, 255, 0.5),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 48% 24%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 52% 36%,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      1px 1px at 60% 40%,
      rgba(255, 255, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      140% 120% at 25% 90%,
      rgba(0, 255, 235, 0.35),
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(180deg, #1c3b73 0%, #0b2b57 70%, #0a2447 100%);
  background-blend-mode: screen, screen, screen, screen, screen, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    /* top inner highlight */ inset 0 -14px 26px rgba(0, 0, 0, 0.35),
    /* inner depth */ 0 18px 42px rgba(0, 0, 0, 0.45);
  /* outer drop */
}

/* OUTER glossy rim */
.cta-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--outer);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.06)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.65;
  pointer-events: none;
}

/* INNER neon ring (with a tiny gap on the right edge) */
.cta-pill::after {
  content: "";
  position: absolute;
  inset: var(--inner-gap);
  border-radius: calc(var(--r) - var(--inner-gap));
  padding: var(--inner);
  background: conic-gradient(
    from 100deg at 86% 55%,
    rgba(0, 0, 0, 0) 0deg,
    #00ffeb 12deg,
    #00e6ff 110deg,
    rgba(0, 255, 235, 0) 270deg,
    rgba(0, 0, 0, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(0, 255, 235, 0.55));
  /* subtle glow */
  pointer-events: none;
}

/* Optional hover for a bit more pop */
.cta-pill:hover::after {
  filter: drop-shadow(0 0 10px rgba(0, 255, 235, 0.75));
}

.cta-pill:hover {
  transform: translateY(-1px);
  transition: transform 0.18s ease;
}

/* Responsive type sizing (optional) */
@media (max-width: 520px) {
  .cta-pill {
    font-size: 20px;
    --pad-x: 28px;
    --r: 32px;
  }
}

.big-number {
  font-size: 68px;
  background: linear-gradient(
    193.03deg,
    rgb(255 255 255 / 13%) 12.34%,
    #0000009e 100.96%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* color: linear-gradient(193.03deg, rgba(255, 255, 255, 0.08) 23.34%, rgba(255, 255, 255, 0) 88.96%); */

  /* white but very faint */
  /* OR use the same background color but low opacity: */
  /* color: rgba(14, 21, 37, 0.5); */
}

.card-bg {
  backdrop-filter: blur(34px);
  /* box-shadow: 10px 4px 14px 0px #FFFFFF05 inset;
    box-shadow: 0px 4px 4px 0px #00000040; */
  background-color: #1e27427d;
}

.card-bg-dark {
  background-color: #00000078;
}

.card-bg-dark-blur {
  box-shadow: 0px 4px 4px 0px #00000040;

  box-shadow: -1px -1px 5.8px 0px #8b8b8b3b inset;

  backdrop-filter: blur(34px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.47), rgba(0, 0, 0, 0.47)),
    radial-gradient(
        71.75% 71.75% at 60.92% 62.27%,
        rgba(62, 197, 255, 0.2) 0%,
        rgba(62, 197, 255, 0.03) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.card-bg-dark-blur2 {
  box-shadow: 0px 4px 4px 0px #00000040;

  box-shadow: -1px -1px 5.8px 0px #8b8b8b3b inset;

  backdrop-filter: blur(34px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.47), rgba(0, 0, 0, 0.47)),
    radial-gradient(
        71.75% 71.75% at 60.92% 62.27%,
        rgba(62, 197, 255, 0.2) 0%,
        rgba(62, 197, 255, 0.103) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.card-bg-dark-less-blur {
  box-shadow: 0px 4px 4px 0px #00000040;

  box-shadow: -1px -1px 5.8px 0px #8b8b8b3b inset;

  backdrop-filter: blur(34px);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.47), rgba(0, 0, 0, 0.822)),
    radial-gradient(
        41.75% 51.75% at 60.92% 62.27%,
        rgba(62, 197, 255, 0.2) 0%,
        rgba(62, 197, 255, 0.03) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.card-bg-dark-more-less-blur {
  box-shadow: 0px 4px 4px 0px #00000040;

  box-shadow: -1px -1px 5.8px 0px #8b8b8b3b inset;

  backdrop-filter: blur(24px);
  background: linear-gradient(140deg, rgba(0, 0, 0, 0.47), rgba(0, 0, 0, 0.822)),
    radial-gradient(
        41.75% 51.75% at 60.92% 62.27%,
        rgba(62, 197, 255, 0.2) 0%,
        rgba(62, 197, 255, 0.13) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.divide-gray {
  border-left: 1px solid;

  border-image-source: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.102885) 54.81%,
    rgba(255, 255, 255, 0) 100%
  );
}

badge {
  border: solid 1px;
  border-radius: 50px;
  width: fit-content;
  padding: 10px 18px;
}

badge > h6 {
  font-size: 14px !important;
}

.glass-card {
  @apply relative border border-white/15 backdrop-blur-[24px] bg-white/5 shadow-[0_12px_32px_rgba(0, 0, 0, 0.35)] rounded-[32px];
  background: radial-gradient(
      120% 200% at 50% 0%,
      rgb(0 0 0 / 22%),
      rgba(255, 255, 255, 0) 70%
    ),
    rgb(0 0 0 / 53%);
}

.pillow-badge {
  padding: 10px 18px;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  background: linear-gradient(#0e1930, #0e1930) padding-box,
    linear-gradient(135deg, #63d1ff, #5bbdfd, #52a7fc) border-box;
  border: 2px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s ease;
}