.spns-page {
  font-family: var(--spn-font);
  background: var(--spn-bg-page, #fff9f1);
  color: var(--spn-primary);
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased
}

.spns-page * {
  box-sizing: border-box
}

.spns-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px
}

.spns-hero {
  padding-top: 72px;
  padding-bottom: 86px;
  position: relative
}

.spns-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 64px;
  align-items: center
}

.spns-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--spn-bg-light);
  color: var(--spn-primary);
  padding: 7px 15px;
  border-radius: 100px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 24px;
  animation: spnsSlideUp .6s ease both
}

.spns-badge-new {
  background: var(--spn-accent);
  color: var(--spn-primary);
  padding: 3px 8px;
  border-radius: 7px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1
}

.spns-hero-title {
  font-family: var(--spn-font);
  font-size: clamp(2.65rem, 5.2vw, 4.5rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.035em;
  color: var(--spn-primary);
  margin: 0 0 24px !important;
  animation: spnsSlideUp .7s .08s ease both
}

.spns-hero-title em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(120deg, var(--spn-accent) 0%, #7df5a6 45%, #66e8c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none
}

.spns-lede {
  font-size: 1.18rem;
  color: var(--spn-text-muted);
  max-width: 540px;
  margin: 0 0 36px !important;
  line-height: 1.58;
  animation: spnsSlideUp .7s .16s ease both
}

.spns-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: spnsSlideUp .7s .24s ease both
}

.spns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  border-radius: 100px;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1;
  padding: 16px 28px;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease
}

.spns-btn-primary {
  background: var(--spn-primary);
  color: #fff !important;
  box-shadow: 0 12px 26px -14px rgba(9, 15, 171, .7)
}

.spns-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -16px rgba(9, 15, 171, .75);
  background: var(--spn-primary-dark)
}

.spns-btn-secondary {
  background: transparent;
  color: var(--spn-primary) !important;
  border: 1.5px solid var(--spn-primary)
}

.spns-btn-secondary:hover {
  background: var(--spn-primary);
  color: #fff !important;
  transform: translateY(-2px)
}

.spns-hero-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spnsSlideUp .85s .16s ease both
}

.spns-hero-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

.spns-hero-picture img {
  display: block;
  width: 100%;
  max-width: 500px;
  max-height: 480px;
  height: auto;
  object-fit: contain
}

.spns-atm-illustration {
  position: relative;
  height: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center
}

.spns-atm-screen {
  width: 300px;
  height: 200px;
  background: linear-gradient(135deg, var(--spn-primary), var(--spn-primary-dark));
  border-radius: 24px;
  padding: 30px;
  color: #fff;
  position: relative;
  box-shadow: var(--shadow-lg);
  z-index: 2
}

.spns-atm-line {
  width: 64px;
  height: 4px;
  background: rgba(255, 255, 255, .35);
  border-radius: 99px;
  margin-bottom: 20px
}

.spns-atm-amount {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1
}

.spns-atm-tick {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: var(--spn-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spn-primary);
  font-weight: 900
}

.spns-atm-card {
  position: absolute;
  bottom: 56px;
  right: 22px;
  width: 200px;
  height: 120px;
  background: linear-gradient(135deg, #ffb627, #e08a00);
  border-radius: 16px;
  padding: 20px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(-6deg);
  z-index: 3
}

.spns-atm-chip {
  width: 34px;
  height: 26px;
  background: rgba(255, 255, 255, .35);
  border-radius: 6px;
  margin-bottom: 30px
}

.spns-atm-num {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .12em
}

.spns-atm-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--spn-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: var(--shadow-md)
}

.spns-atm-arrow:after {
  content: '↓';
  color: var(--spn-primary);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1
}

.spns-section {
  padding-top: 80px;
  padding-bottom: 80px
}

.spns-section-title {
  font-family: var(--spn-font);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--spn-title-weight, 400);
  letter-spacing: -.025em;
  line-height: 1.02;
  color: var(--spn-primary);
  margin: 0 0 16px !important
}

.spns-section-sub {
  font-size: 1.1rem;
  color: var(--spn-text-muted);
  max-width: 630px;
  margin: 0 0 48px !important;
  line-height: 1.55
}

.spns-section-title--light {
  color: #fff
}

.spns-section-sub--light {
  color: rgba(255, 255, 255, .72)
}

.spns-steps-box {
  background: var(--spn-primary);
  color: #fff;
  border-radius: 32px;
  padding: 80px 60px;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg)
}

.spns-steps-box:before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 255, 141, .28), transparent 70%);
  pointer-events: none
}

.spns-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 34px;
  position: relative;
  z-index: 1
}

.spns-step {
  position: relative;
  padding-top: 18px
}

.spns-step-num {
  font-size: 4rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: var(--spn-accent);
  letter-spacing: -.055em;
  margin-bottom: 12px
}

.spns-step-num:after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: #fff;
  margin-top: 12px;
  border-radius: 99px
}

.spns-step h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px !important;
  color: #fff;
  letter-spacing: -.01em
}

.spns-step p {
  font-size: .96rem;
  color: rgba(255, 255, 255, .78);
  margin: 0 !important;
  line-height: 1.55
}

.spns-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px
}

.spns-why-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(9, 15, 171, .08);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow: 0 2px 8px rgba(9, 15, 171, .03)
}

.spns-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(9, 15, 171, .16)
}

.spns-why-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--spn-bg-light);
  color: var(--spn-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px
}

.spns-why-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.spns-why-card h3 {
  font-size: 1.23rem;
  font-weight: 700;
  margin: 0 0 8px !important;
  color: var(--spn-primary);
  letter-spacing: -.01em
}

.spns-why-card p {
  font-size: .96rem;
  color: var(--spn-text-muted);
  margin: 0 !important;
  line-height: 1.55
}

.spns-faq-wrap {
  max-width: 800px;
  margin: 0 auto
}

.spns-faq-item {
  background: #fff;
  border-radius: 16px;
  margin: 0 0 12px;
  border: 1px solid rgba(9, 15, 171, .08);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease
}

.spns-faq-item[open] {
  border-color: var(--spn-primary);
  box-shadow: 0 10px 26px -20px rgba(9, 15, 171, .3)
}

.spns-faq-item summary {
  padding: 24px 28px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--spn-primary)
}

.spns-faq-item summary::-webkit-details-marker {
  display: none
}

.spns-faq-item summary:after {
  content: '+';
  font-size: 1.6rem;
  font-weight: 400;
  transition: transform .25s ease;
  color: var(--spn-primary)
}

.spns-faq-item[open] summary:after {
  transform: rotate(45deg)
}

.spns-faq-answer {
  padding: 0 28px 24px;
  color: var(--spn-text-muted);
  font-size: .98rem;
  line-height: 1.6
}

.spns-faq-answer p {
  margin: 0 0 12px !important
}

.spns-faq-answer p:last-child {
  margin-bottom: 0 !important
}

.spns-final-cta {
  background: linear-gradient(135deg, var(--spn-primary), var(--spn-primary-dark));
  color: #fff;
  border-radius: 32px;
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg)
}

.spns-final-cta:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .14) 0, transparent 42%), radial-gradient(circle at 80% 80%, rgba(141, 255, 141, .24) 0, transparent 42%);
  pointer-events: none
}

.spns-final-cta h2 {
  position: relative;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--spn-title-weight, 400);
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0 0 16px !important;
  color: #fff
}

.spns-final-cta p {
  position: relative;
  font-size: 1.12rem;
  margin: 0 auto 32px !important;
  opacity: .9;
  max-width: 720px;
  line-height: 1.55;
  color: #fff
}

.spns-store-row {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap
}

.spns-store-btn {
  background: rgba(255, 255, 255, .12);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 12px 22px;
  border-radius: 14px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease
}

.spns-store-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .35)
}

.spns-store-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.spns-store-icon svg {
  width: 23px;
  height: 23px
}

.spns-store-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1
}

.spns-store-text small {
  font-size: .72rem;
  opacity: .72;
  font-weight: 600
}

@keyframes spnsSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(min-width:992px) {
  .spns-steps-box {
    padding: 88px 60px 86px !important
  }

  .spns-steps-box:before {
    content: '' !important;
    position: absolute !important;
    top: 56px !important;
    right: 58px !important;
    width: 104px !important;
    height: 104px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 28px !important;
    background: transparent !important;
    box-shadow: 0 0 0 24px rgba(255, 255, 255, .045), 0 0 0 48px rgba(255, 255, 255, .025) !important;
    transform: rotate(12deg) !important;
    pointer-events: none !important
  }

  .spns-steps-box:after {
    content: '' !important;
    position: absolute !important;
    top: 78px !important;
    right: 174px !important;
    width: 58px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: var(--spn-accent) !important;
    opacity: .9 !important;
    transform: rotate(-18deg) !important;
    pointer-events: none !important
  }

  .spns-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 92px !important;
    row-gap: 64px !important;
    align-items: start !important
  }

  .spns-step {
    padding-top: 20px !important
  }

  .spns-step-num {
    margin-bottom: 14px !important
  }

  .spns-step-num:after {
    margin-top: 14px !important
  }
}

.spns-why-icon i,
.spns-why-icon span {
  font-size: 24px;
  line-height: 1;
  color: currentColor
}

.spns-why-icon svg {
  display: block
}

.spns-breadcrumbs {
  padding-top: 26px;
  padding-bottom: 0;
  font-size: .9rem;
  color: var(--spn-text-muted)
}

.spns-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important
}

.spns-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--spn-text-muted);
  line-height: 1.35
}

.spns-breadcrumbs li+li:before {
  content: '›';
  color: var(--spn-primary);
  opacity: .6;
  font-weight: 800
}

.spns-breadcrumbs a {
  color: var(--spn-primary);
  font-weight: 700;
  text-decoration: none !important
}

.spns-breadcrumbs a:hover {
  text-decoration: underline !important
}

.spns-breadcrumbs [aria-current=page] {
  color: var(--spn-text-muted);
  font-weight: 500
}

.spns-breadcrumbs+.spns-hero {
  padding-top: 44px
}

.spns-hero-breadcrumbs {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 24px !important;
  font-family: var(--spn-font) !important;
  animation: spnsSlideUp .6s ease both !important
}

.spns-hero-breadcrumbs ol {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: .9rem !important;
  line-height: 1.2 !important
}

.spns-hero-breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--spn-text-muted) !important;
  font-weight: 700 !important
}

.spns-hero-breadcrumbs li:not(:last-child)::after {
  content: '›' !important;
  margin-left: 8px !important;
  color: var(--spn-primary) !important;
  opacity: .55 !important;
  font-weight: 800 !important
}

.spns-hero-breadcrumbs a {
  color: var(--spn-primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: opacity .2s ease !important
}

.spns-hero-breadcrumbs a:hover {
  opacity: .75 !important
}

.spns-hero-breadcrumb-current {
  background: var(--spn-bg-light) !important;
  color: var(--spn-primary) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-weight: 800 !important
}

.spns-hero-title em,
.spns-hero h1 em {
  font-style: italic !important;
  font-weight: 500 !important;
  color: transparent !important;
  background: linear-gradient(120deg, var(--spn-accent) 0%, #7df5a6 45%, #66e8c8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important
}

.spns-page .spns-hero-title em,
.spns-page .spns-hero h1 em {
  font-style: italic !important;
  font-weight: 500 !important;
  color: transparent !important;
  background: linear-gradient(115deg, #78ee7f 0%, var(--spn-accent) 55%, #72e894 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important
}
@media(min-width:992px){.spns-steps-box:before{content:''!important;position:absolute!important;top:54px!important;right:58px!important;width:230px!important;height:72px!important;background:url('https://www.selfpay.ro/wp-content/uploads/2026/05/Logo_Selpay_horizontal_white-scaled.png') center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;opacity:.18!important;pointer-events:none!important;z-index:1!important}.spns-steps-box:after{display:none!important;content:none!important}.spns-steps-box .spns-section-title,.spns-steps-box .spns-section-sub,.spns-steps-grid{position:relative!important;z-index:2!important}}.spns-store-row{position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important}.spns-store-btn{min-width:160px!important;height:54px!important;padding:8px 18px!important;border-radius:10px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.26)!important;color:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;text-decoration:none!important;box-shadow:none!important;backdrop-filter:blur(10px)!important;transition:transform .2s ease,background-color .2s ease,border-color .2s ease!important}.spns-store-btn:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.42)!important;box-shadow:none!important}.spns-store-btn .spn-store-icon{font-size:1.55rem!important;line-height:1!important;color:#fff!important;flex-shrink:0!important}.spns-store-text{display:flex!important;flex-direction:column!important;text-align:left!important;line-height:1.05!important;color:#fff!important;font-size:1rem!important;font-weight:700!important}.spns-store-text small{font-size:.58rem!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.02em!important;opacity:.72!important;font-weight:700!important;color:#fff!important;margin-bottom:3px!important}