/* ======================
   BASE & TOKENS
   ====================== */
   
/* Prevent flash of unstyled content + smooth entry animations */
.spectra-pricing-section{
  opacity: 0;
  animation: fadeInContent 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.pp-intro,
.pp-section-title,
.pricing-card,
.pp-section,
.pp-faq details{
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered delays for cards */
.pricing-card:nth-child(1){ animation-delay: 0.2s; }
.pricing-card:nth-child(2){ animation-delay: 0.3s; }
.pricing-card:nth-child(3){ animation-delay: 0.4s; }
.pricing-card:nth-child(4){ animation-delay: 0.5s; }
.pricing-card:nth-child(5){ animation-delay: 0.6s; }

/* Sections with delays */
.pp-intro{ animation-delay: 0.1s; }
.pp-section:nth-of-type(1){ animation-delay: 0.7s; }
.pp-section:nth-of-type(2){ animation-delay: 0.8s; }
.pp-section:nth-of-type(3){ animation-delay: 0.9s; }

/* FAQ items staggered */
.pp-faq details:nth-child(1){ animation-delay: 1s; }
.pp-faq details:nth-child(2){ animation-delay: 1.05s; }
.pp-faq details:nth-child(3){ animation-delay: 1.1s; }
.pp-faq details:nth-child(4){ animation-delay: 1.15s; }
.pp-faq details:nth-child(5){ animation-delay: 1.2s; }
.pp-faq details:nth-child(6){ animation-delay: 1.25s; }
.pp-faq details:nth-child(7){ animation-delay: 1.3s; }

@keyframes fadeInContent {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

*, *::before, *::after{ 
  box-sizing: border-box; 
  margin: 0;
}

.sr-only{ 
  position: absolute !important; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0; 
}

:focus-visible{ 
  outline: 3px solid rgba(124,112,255,.9); 
  outline-offset: 3px;
  transition: outline-offset 160ms ease;
}

:root{
  /* colors & fx */
  --bg: radial-gradient(ellipse at 50% 0%, #0d0a1f 0%, #070512 40%, #030208 100%);
  --card-bg: linear-gradient(145deg, rgba(22,18,42,.75) 0%, rgba(15,12,30,.85) 100%);
  --card-bg-premium: linear-gradient(145deg, rgba(30,24,55,.72) 0%, rgba(20,15,40,.82) 100%);
  --accent: #6c5ce7; 
  --accent-2: #00b894;
  --text: #e6e9ff; 
  --muted: #b8c0e0;

  /* layout */
  --content-width: 1140px;
  --card-radius: 24px;
  --pp-border: rgba(108,92,231,.2);
  --pp-dim: #9fa8d0;

  /* shadows */
  --shadow-1: 0 4px 16px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.25);
  --shadow-2: 0 20px 50px rgba(0,0,0,.5), 0 8px 20px rgba(108,92,231,.08);
  --shadow-glow: 0 0 40px rgba(108,92,231,.25);
  --shadow-neon: 0 0 30px rgba(108,92,231,.45), 0 0 60px rgba(108,92,231,.25);
  --shadow-ultra: 0 30px 80px rgba(0,0,0,.65), 0 0 80px rgba(108,92,231,.3), inset 0 1px 0 rgba(255,255,255,.08);
  
  /* transitions */
  --transition: 340ms cubic-bezier(.25,.95,.4,1);
  --transition-bounce: 480ms cubic-bezier(.34,1.56,.64,1);
  --transition-elastic: 600ms cubic-bezier(.68,-0.55,.265,1.55);
  
  /* spacing */
  --gap-xs: clamp(8px, 1vw, 12px);
  --gap-sm: clamp(12px, 1.5vw, 18px);
  --gap-md: clamp(18px, 2.5vw, 28px);
  --gap-lg: clamp(28px, 4vw, 48px);
  
  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ======================
   LAYOUT
   ====================== */
.spectra-pricing-section{
  background: var(--bg);
  padding: clamp(48px, 8vw, 80px) clamp(16px, 3vw, 24px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* Animated mesh gradient overlay */
.spectra-pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(108,92,231,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(74,58,168,.12) 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(45,35,95,.1) 0%, transparent 50%);
  will-change: transform, opacity;
  animation: meshShift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes meshShift {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Floating orbs for depth */
.spectra-pricing-section::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: -150px;
  right: -150px;
  background: radial-gradient(circle, rgba(108,92,231,.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  animation: orbFloat 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-80px, 80px); }
}

.spectra-pricing-wrapper{
  max-width: 1240px; 
  margin: 0 auto;
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gap-md);
  align-items: stretch;
  padding-block: var(--gap-sm);
  position: relative;
  z-index: 1;
}

/* Section scaffolding (shared) */
.pp-section{ 
  margin-block: var(--gap-lg);
  scroll-margin-top: 80px;
}

.pp-container{ 
  max-width: var(--content-width); 
  margin-inline: auto; 
  padding-inline: clamp(16px, 3vw, 28px);
}

.pp-section-head{ 
  display: grid; 
  place-items: center; 
  gap: 12px; 
  text-align: center; 
  margin-bottom: var(--gap-md);
}

.pp-title{ 
  margin: 0; 
  font-weight: 900; 
  letter-spacing: -.02em; 
  line-height: 1.1;
  text-wrap: balance;
}

.pp-title--lg{ 
  font-size: clamp(26px, 3vw, 38px);
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-title--center{ 
  text-align: center; 
}

.pp-title--bar{ 
  position: relative; 
  padding-bottom: 14px;
}

.pp-title--bar::after{
  content: ""; 
  display: block; 
  height: 3px; 
  width: clamp(80px, 15vw, 180px); 
  margin: 16px auto 0; 
  border-radius: 999px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(108,92,231,.3) 10%,
    #6c5ce7 30%,
    #a78bfa 50%,
    #6c5ce7 70%,
    rgba(108,92,231,.3) 90%,
    transparent 100%
  );
  box-shadow: 0 2px 16px rgba(108,92,231,.25),
              0 0 40px rgba(108,92,231,.15);
  position: relative;
  overflow: hidden;
  opacity: 0.85;
}

.pp-title--bar::after::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: shimmerSlide 4s ease-in-out infinite;
}

@keyframes shimmerSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.pp-subtitle{ 
  max-width: 68ch; 
  margin: 0 auto; 
  color: var(--pp-dim); 
  font-size: clamp(1rem, .8vw + .85rem, 1.12rem); 
  line-height: 1.65; 
  opacity: .92;
  text-wrap: pretty;
}

/* Eyebrow */
.pp-eyebrow{
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  padding: 8px 16px; 
  border: 1.5px solid var(--pp-border);
  border-radius: 999px; 
  background: linear-gradient(135deg, rgba(108,92,231,.2) 0%, rgba(74,58,168,.15) 100%);
  color: var(--pp-dim); 
  text-transform: uppercase; 
  letter-spacing: .12em; 
  font-weight: 800; 
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.pp-eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  animation: eyebrowShine 4s ease-in-out infinite;
}

@keyframes eyebrowShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ======================
   PRICING CARDS
   ====================== */
.pricing-title{
  grid-column: 1 / -1; 
  text-align: center;
  font-size: clamp(32px, 4vw, 46px); 
  font-weight: 900; 
  color: var(--text);
  margin-bottom: 12px; 
  letter-spacing: -.03em;
  line-height: 1.1;
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-wrap: balance;
}

.pricing-card{
  position: relative; 
  background: var(--card-bg);
  border-radius: var(--card-radius); 
  border: 1px solid rgba(108,92,231,.28);
  box-shadow: var(--shadow-2); 
  padding: 0;
  transform: translateY(10px); 
  opacity: 0;
  will-change: transform, opacity;
  transition: transform var(--transition-bounce), 
              box-shadow .4s ease, 
              border-color var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

/* Card header section */
.pricing-card::before {
  content: "";
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(135deg, rgba(108,92,231,.15) 0%, rgba(74,58,168,.08) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Card sections */
.pricing-card > * {
  position: relative;
  z-index: 1;
}

.card-header {
  padding: 24px 28px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(108,92,231,.15);
}

.card-body {
  padding: 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-footer {
  padding: 0 28px 28px;
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pricing-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-ultra);
  border-color: rgba(108,92,231,.5);
}

.pricing-card:hover::before {
  opacity: 1;
}

/* Animated border glow on hover */
.pricing-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(108,92,231,0) 0%, 
    rgba(108,92,231,.15) 50%,
    rgba(108,92,231,0) 100%);
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity var(--transition-elastic);
}

.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card:hover::after {
  opacity: 1;
}

.pricing-card.recommended{ 
  border-color: rgba(108,92,231,.3); 
  box-shadow: 0 16px 48px rgba(108,92,231,.25), var(--shadow-glow);
}

.pricing-card.fade-in{ 
  will-change: opacity, transform;
  animation: cardIn 1000ms var(--delay, 0ms) cubic-bezier(.25,.95,.4,1) forwards; 
}

@keyframes cardIn{
  0% { 
    opacity: 0; 
    transform: translateY(24px) scale(.96); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.pricing-card:hover,
.pricing-card:focus-within{ 
  transform: translateY(-12px) scale(1.02); 
  box-shadow: var(--shadow-2), var(--shadow-neon); 
  border-color: rgba(108,92,231,.4);
  outline: none; 
}

/* Ribbon(s) */
.pricing-card .ribbon,
.ribbon-pluginad{
  align-self: center; 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translate(-50%, 0);
  transform-origin: center top; 
  color: #fff; 
  padding: 10px 24px; 
  font-weight: 800; 
  font-size: 12px;
  border-radius: 0 0 12px 12px; 
  box-shadow: 
    0 12px 32px rgba(0,0,0,.6), 
    0 4px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2); 
  z-index: 10; 
  pointer-events: none; 
  user-select: none;
  white-space: nowrap; 
  max-width: calc(100% - 32px); 
  overflow: hidden; 
  text-overflow: ellipsis;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  will-change: transform;
  animation: ribbonWave 5s ease-in-out infinite;
  position: relative;
  transition: transform var(--transition-elastic);
}

@keyframes ribbonWave {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 3px); }
}

.pricing-card:hover .ribbon,
.pricing-card:hover .ribbon-pluginad {
  transform: translate(-50%, -2px);
}

.pricing-card .ribbon::after,
.ribbon-pluginad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
  animation: ribbonShimmer 4s linear infinite;
}

@keyframes ribbonShimmer {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(250%); }
}

.pricing-card .ribbon{ 
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4bc9 100%);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.pricing-card .ribbon.ribbon-alt{ 
  background: linear-gradient(135deg, #d63031 0%, #e17055 100%);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.ribbon-pluginad{ 
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Card content */
.card-title{ 
  margin: 0 0 8px; 
  font-size: clamp(22px, 2.2vw, 26px); 
  font-weight: 900; 
  letter-spacing: -.02em; 
  text-align: center; 
  background: linear-gradient(135deg, #e6e9ff 0%, #b8c0e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.25;
  text-wrap: balance;
  filter: drop-shadow(0 2px 8px rgba(108,92,231,.2));
}

.card-subtitle {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  opacity: .85;
  line-height: 1.5;
}

.price{
  position: relative; 
  text-align: center; 
  color: var(--muted);
  margin: 0 0 24px; 
  font-size: 15px; 
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(108,92,231,.08) 0%, rgba(74,58,168,.04) 100%);
  border-radius: 16px;
  border: 1px solid rgba(108,92,231,.15);
}

.discounted{ 
  color: #fff;
  font-size: clamp(42px, 4.2vw, 56px); 
  font-weight: 800; 
  letter-spacing: -.04em;
  display: block;
  line-height: .95;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #e8e4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 12px rgba(108,92,231,.3);
}

.price-period {
  font-size: 12px;
  color: var(--muted);
  opacity: .65;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.old-price{ 
  color: #e17055; 
  text-decoration: line-through; 
  font-size: 16px;
  font-weight: 600;
  opacity: .75;
  margin-top: 8px;
}

.old-price:empty{ 
  display: none; 
}

.card-features{ 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-card li{ 
  display: flex; 
  gap: 12px; 
  align-items: flex-start; 
  color: rgba(230,233,255,.95);
  font-size: 15px; 
  line-height: 1.65;
  padding: 0;
  transition: transform 220ms var(--transition-bounce), 
              color 200ms ease;
  transform-origin: left center;
}

.pricing-card li:hover {
  transform: translateX(4px);
  color: #fff;
}

.icon{ 
  color: #00b894 !important; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  flex: 0 0 22px; 
  width: 22px; 
  height: 22px;
  margin-top: 2px;
  background: linear-gradient(135deg, rgba(0,184,148,.15) 0%, rgba(0,184,148,.08) 100%);
  border-radius: 6px;
  filter: drop-shadow(0 2px 6px rgba(0,184,148,.25));
  will-change: transform;
  transition: transform 350ms var(--transition-elastic),
              filter 300ms ease,
              background 250ms ease;
}

.pricing-card li:hover .icon {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(0,184,148,.4));
  background: linear-gradient(135deg, rgba(0,184,148,.25) 0%, rgba(0,184,148,.15) 100%);
}

.icon svg{ 
  width: 18px; 
  height: 18px; 
  display: block; 
  fill: currentColor;
}

/* "Näita rohkem" */
.more-details-li{ 
  margin-top: 12px; 
  padding: 0;
}

.more-details{ 
  display: block; 
  width: 100%;
}

.more-summary{
  cursor: pointer; 
  color: #fff; 
  font-weight: 800; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 12px 18px; 
  border-radius: 14px; 
  margin: 10px auto 0; 
  text-align: center; 
  line-height: 1.3; 
  min-height: 48px;
  will-change: transform;
  transition: background .24s ease, 
              transform var(--transition-elastic), 
              box-shadow .24s ease; 
  user-select: none; 
  border: 2px solid rgba(108,92,231,.5);
  background: linear-gradient(135deg, rgba(108,92,231,.15) 0%, rgba(74,58,168,.1) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}

/* Animated shine effect */
.more-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.more-summary:hover::before {
  transform: translateX(200%);
}

.more-summary:hover{ 
  background: linear-gradient(135deg, rgba(108,92,231,.3) 0%, rgba(74,58,168,.2) 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(108,92,231,.4), var(--shadow-glow);
  border-color: rgba(108,92,231,.7);
}

.more-summary:focus-visible{ 
  box-shadow: 0 0 0 4px rgba(92,77,239,.28), 0 6px 20px rgba(92,77,239,.25);
}

.more-summary::-webkit-details-marker{ 
  display: none;
}

.more-summary::marker{ 
  content: "";
}

/* CTA */
.card-actions{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-top: 16px;
}

.btn-main,
.btn-main-premium{
  color: #fff; 
  padding: 10px 20px; 
  border-radius: 10px; 
  text-decoration: none; 
  font-weight: 800;
  font-size: 13px;
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: 6px;
  transition: transform var(--transition-elastic), 
              box-shadow .26s ease, 
              filter .26s ease; 
  min-height: 40px; 
  max-height: 40px;
  box-sizing: border-box;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
}

.btn-main::before,
.btn-main-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}

/* Ripple effect on click */
.btn-main::after,
.btn-main-premium::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.btn-main:active::after,
.btn-main-premium:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

.btn-main:hover::before,
.btn-main-premium:hover::before {
  opacity: 1;
}

.btn-main{ 
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4bc9 100%);
  box-shadow: 0 3px 12px rgba(108,92,231,.3);
  border: 1px solid rgba(255,255,255,.15);
}

.btn-main:hover{ 
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(108,92,231,.4);
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.2);
}

@keyframes buttonPulse {
  0%, 100% { 
    box-shadow: 
      0 24px 60px rgba(108,92,231,.5), 
      0 8px 20px rgba(108,92,231,.45);
  }
  50% { 
    box-shadow: 
      0 24px 60px rgba(108,92,231,.65), 
      0 8px 20px rgba(108,92,231,.6),
      0 0 80px rgba(108,92,231,.3);
  }
}

.btn-main:focus-visible{ 
  outline: none; 
  box-shadow: 0 0 0 4px rgba(92,77,239,.35), 0 16px 40px rgba(92,77,239,.35);
  animation: focusPulse 1s ease-in-out infinite;
}

@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(92,77,239,.35), 0 16px 40px rgba(92,77,239,.35); }
  50% { box-shadow: 0 0 0 6px rgba(92,77,239,.5), 0 16px 40px rgba(92,77,239,.5); }
}

.btn-main-premium{ 
  background: linear-gradient(135deg, #7c72d6 0%, #6c5ce7 100%);
  color: #fff; 
  box-shadow: 0 3px 12px rgba(108,92,231,.25);
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18);
}

.btn-main-premium:hover{ 
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(108,92,231,.35);
  filter: brightness(1.08);
}

@keyframes buttonPulseOrange {
  0%, 100% { box-shadow: 0 20px 50px rgba(255,159,10,.5), 0 4px 12px rgba(255,159,10,.38); }
  50% { box-shadow: 0 20px 50px rgba(255,159,10,.7), 0 4px 12px rgba(255,159,10,.55), 0 0 40px rgba(255,159,10,.3); }
}

.btn-main-premium:focus-visible{ 
  outline: none; 
  box-shadow: 0 0 0 4px rgba(255,159,10,.4), 0 16px 40px rgba(255,159,10,.4);
}



/* Responsive card tweaks */
@media (max-width: 1024px){ 
  .card-title{ font-size: 20px; } 
  .discounted{ font-size: 30px; }
  .pricing-card{ padding: 24px 22px 20px; }
}

@media (max-width: 768px){ 
  .btn-main, .btn-main-premium{ width: 100%; margin-top: 15px; }
  .pricing-card:hover{ 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-1); 
  }
}

/* Featured / Recommended visuals */
.spectra-pricing-section .pricing-card.recommended{
  position: relative; 
  z-index: 3;
  background: var(--card-bg-premium);
  border: 2px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 36px rgba(0,0,0,.28), 
              0 24px 72px rgba(92,77,239,.28),
              var(--shadow-glow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.spectra-pricing-section .pricing-card.recommended::before{
  content: ""; 
  position: absolute; 
  inset: -3px; 
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, 
    rgba(92,77,239,.3) 0%, 
    rgba(138,107,255,.2) 50%, 
    rgba(92,77,239,.3) 100%);
  z-index: -1;
  opacity: .6;
  filter: blur(20px);
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: .5; transform: scale(.98); }
  50% { opacity: .75; transform: scale(1.02); }
}

@media (min-width: 992px){
  .spectra-pricing-section .pricing-card.recommended{ 
    transform: translateY(-12px) scale(1.03);
    margin-bottom: 16px;
  }
  .spectra-pricing-section .pricing-card.recommended:hover,
  .spectra-pricing-section .pricing-card.recommended:focus-within{ 
    transform: translateY(-18px) scale(1.04);
  }
}

.spectra-pricing-section .pricing-card.recommended:hover,
.spectra-pricing-section .pricing-card.recommended:focus-within{
  box-shadow: 0 20px 56px rgba(0,0,0,.35), 
              0 32px 96px rgba(92,77,239,.38),
              var(--shadow-glow);
  border-color: rgba(255,255,255,.28);
}
.spectra-pricing-section .pricing-card.recommended .ribbon{ 
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%); 
  color: #fff; 
  letter-spacing: .04em; 
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-weight: 900;
}

.spectra-pricing-section .pricing-card.recommended .price{ 
  margin: 10px 0 20px; 
  padding-top: 16px; 
  font-size: 16px; 
  color: var(--muted);
}

.spectra-pricing-section .pricing-card.recommended .price .discounted{ 
  color: #eaf1ff; 
  font-weight: 900; 
  font-size: clamp(34px, 3vw, 42px); 
  letter-spacing: -.02em; 
  text-shadow: 0 4px 16px rgba(234,241,255,.25);
}

.spectra-pricing-section .pricing-card.recommended .price .old-price{ 
  color: rgba(255,160,160,.9); 
  font-weight: 700;
}

.spectra-pricing-section .pricing-card.recommended .more-summary{ 
  background: linear-gradient(135deg, rgba(92,77,239,.22) 0%, rgba(92,77,239,.14) 100%);
  border-color: rgba(92,77,239,.4);
}

.spectra-pricing-section .pricing-card.recommended .more-summary:hover{ 
  background: linear-gradient(135deg, rgba(92,77,239,.32) 0%, rgba(92,77,239,.22) 100%);
  box-shadow: 0 8px 24px rgba(92,77,239,.3);
}
.spectra-pricing-section .pricing-card.recommended .btn-main-premium{
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  padding: 16px 28px; 
  font-size: 16px; 
  font-weight: 900; 
  border-radius: 14px;
  background: linear-gradient(135deg, #6aa6ff 0%, #8a5bff 50%, #ff6a3d 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.22), 
              0 8px 28px rgba(106,166,255,.28);
  transform: translateZ(0); 
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), 
              box-shadow .26s ease, 
              filter .26s ease; 
  line-height: 1.3; 
  min-height: 54px;
  letter-spacing: .01em;
  border:0;
}

.spectra-pricing-section .pricing-card.recommended .btn-main-premium::after{
  content: ""; 
  position: absolute; 
  top: -120%; 
  left: -30%; 
  width: 60%; 
  height: 300%; 
  transform: rotate(18deg);
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,.4) 50%, 
    rgba(255,255,255,0) 100%);
  opacity: 0; 
  transition: opacity .3s ease, transform .6s ease;
}

.spectra-pricing-section .pricing-card.recommended .btn-main-premium:hover,
.spectra-pricing-section .pricing-card.recommended .btn-main-premium:focus-visible{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 48px rgba(0,0,0,.28), 
              0 12px 36px rgba(138,91,255,.32);
  filter: saturate(1.08) brightness(1.05);
}

.spectra-pricing-section .pricing-card.recommended .btn-main-premium:hover::after,
.spectra-pricing-section .pricing-card.recommended .btn-main-premium:focus-visible::after{ 
  opacity: .5; 
  transform: translateX(160%) rotate(18deg);
}

.spectra-pricing-section .pricing-card.recommended .btn-main-premium:focus-visible{ 
  outline: 3px solid rgba(138,91,255,.9); 
  outline-offset: 4px;
}
@media (max-width:768px){
  .spectra-pricing-section .pricing-card.recommended{ transform:none; box-shadow:0 8px 22px rgba(0,0,0,.20), 0 16px 46px rgba(92,77,239,.18); }
}

/* Equal feature block heights */
@media (min-width:1200px){ .spectra-pricing-section .pricing-card .card-features{ min-height:380px; } }
@media (min-width:992px) and (max-width:1199.98px){ .spectra-pricing-section .pricing-card .card-features{ min-height:360px; } }
@media (min-width:768px) and (max-width:991.98px){ .spectra-pricing-section .pricing-card .card-features{ min-height:300px; } }
@media (max-width:767.98px){ .spectra-pricing-section .pricing-card .card-features{ min-height:0; } }

/* ======================
   MODAL
   ====================== */
.pm-overlay[aria-hidden="true"]{ display: none; }

.pm-overlay{
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: radial-gradient(60% 80% at 50% 30%, rgba(10,12,28,.8), rgba(6,10,22,.94) 70%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height: 100vh; 
  min-height: 100dvh;
  padding-inline: clamp(18px, 2.5vw, 28px);
  padding-block: max(18px, var(--safe-top)) max(18px, var(--safe-bottom));
  overscroll-behavior: contain;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
}

.pm-overlay[aria-hidden="false"]{ 
  animation: overlayFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pm-dialog{
  width: min(1080px, 96vw);
  background: linear-gradient(145deg, rgba(15,20,35,.88), rgba(12,16,32,.92));
  border: 2px solid rgba(255,255,255,.14); 
  border-radius: 22px; 
  box-shadow: 0 28px 80px rgba(0,0,0,.65),
              0 8px 24px rgba(0,0,0,.45),
              var(--shadow-glow);
  padding: 32px 32px 26px; 
  color: var(--text); 
  position: relative;
  transform: translateY(32px) scale(0.94); 
  opacity: 0; 
  outline: none;
  display: flex; 
  flex-direction: column; 
 max-height: min(calc(var(--vh,1vh) * 90), 820px);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  will-change: transform, opacity;
}

.pm-overlay[aria-hidden="false"] .pm-dialog{ 
  animation: dialogSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.pm-head{ 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  text-align: center;
  flex-shrink: 0;
}

.pm-badge{ 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px 14px; 
  border-radius: 999px; 
  font-weight: 800; 
  font-size: 12px; 
  background: linear-gradient(135deg, var(--accent) 0%, #7a68ff 100%);
  color: #fff; 
  box-shadow: 0 8px 20px rgba(92,77,239,.3);
  letter-spacing: .06em;
}

.pm-title{ 
  margin: 0; 
  font-size: clamp(24px, 2.8vw, 30px); 
  font-weight: 900; 
  letter-spacing: -.02em;
  line-height: 1.2;
}

.pm-divider{ 
  height: 2px; 
  width: 100%; 
  margin: 18px 0 22px; 
  background: linear-gradient(90deg, transparent, rgba(92,77,239,.55) 20%, rgba(92,77,239,.55) 80%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(92,77,239,.25);
  flex-shrink: 0;
}

.pm-list{ 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 12px 20px; 
  margin: 0 0 16px; 
  padding: 0 6px 0 0;
  list-style: none; 
  flex: 1 1 auto; 
  min-height: 0; 
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; 
  overscroll-behavior: contain; 
  text-align: left;
}

.pm-list li{ 
  display: flex; 
  gap: 12px; 
  align-items: flex-start; 
  margin: 0; 
  padding: 10px 12px; 
  border-radius: 14px; 
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08);
  transition: transform 280ms var(--transition-elastic), 
              background 200ms ease,
              box-shadow 280ms ease;
  position: relative;
  overflow: hidden;
  height: max-content;
}

.pm-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 300ms cubic-bezier(.34,1.56,.64,1);
}

.pm-list li:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.pm-list li:hover {
  transform: scale(1.01);
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.15),
              0 4px 12px rgba(92,77,239,.15);
}

.pm-list .icon{ 
  flex: 0 0 20px; 
  width: 20px; 
  height: 20px; 
  margin-top: 2px; 
  color: var(--accent-2) !important;
}

.pm-footer{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  gap: 10px; 
  margin-top: 10px;
  flex-shrink: 0;
}

.pm-cta{ 
  min-width: 240px;
}

.pm-note{ 
  margin: 0; 
  color: var(--muted); 
  font-size: .95rem; 
  text-align: center;
  opacity: .9;
}

.pm-close{
  position: absolute; 
  right: 12px; 
  top: max(12px, calc(var(--safe-top) + 8px));
  background: rgba(255,255,255,.1); 
  border: 1.5px solid rgba(255,255,255,.2); 
  color: #fff;
  width: 42px; 
  height: 42px; 
  border-radius: 14px; 
  cursor: pointer; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  font-size: 20px;
  font-weight: 600;
}

.pm-close:hover{ 
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,255,255,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* Professional modal animations */
@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogSlideIn {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes overlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes dialogSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
}

/* Scroll lock + responsive modal grid */
html.pm-locked, body.pm-locked{ 
  height: 100%; 
  overflow: hidden; 
}

body.pm-locked{ 
  position: relative; 
}

/* Tablet landscape - 2 columns */
@media (max-width: 1024px){ 
  .pm-list{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 12px 16px;
  }
  
  .pm-dialog{
    width: min(92vw, 860px);
    padding: 28px 24px 22px;
  }
  
  .pm-title{ 
    font-size: clamp(22px, 3vw, 26px); 
  }
  
  .pm-badge{
    font-size: 11px;
    padding: 7px 12px;
  }
}

/* Tablet portrait - 2 columns, smaller spacing */
@media (max-width: 768px){ 
  .pm-overlay{ 
    padding-inline: 16px;
    padding-block: 16px;
  }
  
  .pm-dialog{
    width: min(94vw, 640px);
    padding: 24px 20px 18px;
    max-height: calc(100dvh - 32px);
    border-radius: 18px;
  }
  
  .pm-head{
    gap: 8px;
  }
  
  .pm-title{ 
    font-size: 22px; 
  }
  
  .pm-badge{
    font-size: 10px;
    padding: 6px 11px;
  }
  
  .pm-divider{
    margin: 16px 0 18px;
  }
  
  .pm-list{ 
    gap: 10px 14px;
  }
  
  .pm-list li{
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 14px;
  }
  
  .pm-list .icon{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  
  .pm-footer{
    gap: 8px;
    margin-top: 8px;
  }
  
  .pm-cta{
    min-width: 200px;
  }
  
  .pm-close{
    width: 38px;
    height: 38px;
    right: 10px;
    top: 10px;
    font-size: 18px;
  }
}

/* Mobile - single column */
@media (max-width: 640px){
  .pm-overlay{ 
    align-items: flex-start;
    padding-inline: 12px;
    padding-block: 12px;
  }
  
  .pm-dialog{
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px); 
    padding: 20px 16px 16px;
    border-radius: 16px;
    margin-top: 0;
  }
  
  .pm-head{
    gap: 6px;
    flex-shrink: 0;
  }
  
  .pm-title{ 
    font-size: 20px; 
    line-height: 1.25;
  }
  
  .pm-badge{
    font-size: 10px;
    padding: 6px 10px;
  }
  
  .pm-divider{
    margin: 14px 0 16px;
    height: 1.5px;
    flex-shrink: 0;
  }
  
  .pm-list{ 
    grid-template-columns: 1fr; 
    gap: 8px; 
    margin-bottom: 12px;
    padding-right: 4px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none;
  }
  
  .pm-list li{
    padding: 10px 12px;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  
  .pm-list li:hover {
    transform: scale(1.01);
  }
  
  .pm-list .icon{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }
  
  .pm-footer{
    gap: 8px;
    margin-top: 6px;
    flex-shrink: 0;
  }
  
  .pm-cta{ 
    width: 100%;
    min-width: auto;
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .pm-note{
    font-size: 13px;
    line-height: 1.4;
  }
  
  .pm-close{
    width: 36px;
    height: 36px;
    right: 8px;
    top: 8px;
    font-size: 17px;
    border-radius: 12px;
  }
}

/* Extra small mobile */
@media (max-width: 420px){
  .pm-overlay{
    padding-inline: 8px;
    padding-block: 8px;
  }
  
  .pm-dialog{
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    padding: 18px 14px 14px;
    border-radius: 14px;
    border-width: 1.5px;
  }
  
  .pm-head{
    gap: 4px;
  }
  
  .pm-title{
    font-size: 18px;
    line-height: 1.2;
  }
  
  .pm-badge{
    font-size: 9px;
    padding: 5px 9px;
  }
  
  .pm-divider{
    margin: 12px 0 14px;
  }
  
  .pm-list{
    gap: 7px;
    margin-bottom: 10px;
    padding-right: 2px;
  }
  
  .pm-list li{
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 10px;
  }
  
  .pm-list .icon{
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }
  
  .pm-footer{
    gap: 6px;
  }
  
  .pm-cta{
    padding: 13px 18px;
    font-size: 14px;
    min-height: 44px;
  }
  
  .pm-note{
    font-size: 12px;
    line-height: 1.35;
  }
  
  .pm-close{
    width: 32px;
    height: 32px;
    right: 6px;
    top: 6px;
    font-size: 16px;
    border-radius: 10px;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape){
  .pm-overlay{
    align-items: flex-start;
    padding-block: 12px;
  }
  
  .pm-dialog{
    max-height: calc(100dvh - 24px);
    padding: 16px 20px 14px;
  }
  
  .pm-head{
    gap: 6px;
  }
  
  .pm-title{
    font-size: 18px;
  }
  
  .pm-divider{
    margin: 12px 0 14px;
  }
  
  .pm-list{
    gap: 8px 12px;
  }
  
  .pm-list li{
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .pm-footer{
    margin-top: 8px;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  .pm-list li{
    padding: 12px 14px;
  }
  
  .pm-close{
    width: 44px;
    height: 44px;
  }
  
  @media (max-width: 640px){
    .pm-close{
      width: 40px;
      height: 40px;
    }
  }
}

/* Hide Astra above-header on mobile when modal open */
@media (max-width:921px){
  html.pm-locked #masthead .ast-mobile-header-wrap .ast-above-header-bar,
  html.pm-locked .ast-mobile-header-wrap .ast-above-header-bar{ display:none !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { 
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .pricing-card, 
  .btn-main, 
  .btn-main-premium,
  .pm-dialog,
  .pp-eyebrow,
  .ribbon,
  .more-summary,
  .trust-line,
  .icon { 
    animation: none !important;
  }
  
  .pricing-card{ 
    opacity: 1 !important; 
    transform: none !important;
  }
  
  .spectra-pricing-section::before,
  .spectra-pricing-section::after {
    animation: none !important;
  }
}

/* Print */
@media print{
  .ribbon, .btn-main, .pricing-title{ display: none !important; }
  .pricing-card{ 
    box-shadow: none !important; 
    background: #fff !important; 
    color: #000 !important; 
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* WP content lists reset */
.entry-content ul, .entry-content ol{ padding:revert; margin:revert; padding-left:0; }

/* ======================
   INTRO
   ====================== */
.pp-intro{ display:grid; place-items:center; gap:10px; margin:12px auto 18px; text-align:center; }
.pp-intro .pricing-title{ margin:0; }
.pp-lead{ max-width:70ch; margin:0 auto; color:var(--muted); font-size:clamp(.98rem,.6vw + .8rem,1.05rem); line-height:1.6; opacity:.95; }
@media (max-width:640px){ .pp-intro{ gap:8px; margin-bottom:14px; } .pp-lead{ line-height:1.55; } }

/* ======================
   SERVICES (accordion)
   ====================== */
.pp-services{ margin-block:clamp(16px,3.2vw,28px); }
.pp-services__container{ max-width:var(--content-width); margin-inline:auto; padding-inline:clamp(12px,2.4vw,24px); }
.svc-stack{ display:flex; flex-direction:column; gap:12px; }
.svc-acc{
  border:1px solid var(--pp-border); border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 6px 22px rgba(0,0,0,.16); overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.svc-acc:hover{ border-color:rgba(229,78,255,.38); box-shadow:0 14px 36px rgba(0,0,0,.24); }
.svc-acc > summary{
  list-style:none; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:16px 18px; cursor:pointer; user-select:none;
}
.svc-acc > summary::-webkit-details-marker{ display:none; }
.svc-title{ margin:0; font-size:clamp(18px,1.5vw,20px); font-weight:800; }
.svc-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.svc-badges .pill-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid var(--pp-border); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)); color:var(--pp-dim); }
.svc-arrow{ width:18px; height:18px; opacity:.85; transition:transform .25s ease; fill:#fff; }
.svc-acc[open] .svc-arrow{ transform:rotate(180deg); }
.svc-body{ padding:0 18px 18px; }
.svc-lead{ margin:0 0 10px; color:var(--muted); }
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.svc-list li{ display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.svc-list .icon{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:var(--accent-2); }
.svc-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.svc-actions .btn-main, .svc-actions .btn-main-premium{ min-height:44px; }
@media (max-width:560px){ .svc-acc > summary{ grid-template-columns:1fr auto; } .svc-badges{ display:none; } }

/* ======================
   PILL BADGE
   ====================== */
.pill-badge{
  --pill-bg-top:rgba(255,255,255,.08);
  --pill-bg-btm:rgba(255,255,255,.04);
  --pill-bd:var(--pp-border);
  --pill-fg:var(--text);

  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:12px; letter-spacing:.02em; line-height:1;
  color:var(--pill-fg); background:linear-gradient(180deg,var(--pill-bg-top),var(--pill-bg-btm));
  border:1px solid var(--pill-bd); text-decoration:none; white-space:nowrap;
  user-select:none; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pill-badge > svg{ width:14px; height:14px; display:block; fill:currentColor; opacity:.95; }
.pill-badge[href], .pill-badge[role="button"], .pill-badge.is-interactive{ cursor:pointer; }
.pill-badge:hover{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); }
.pill-badge:active{ transform:translateY(1px) scale(.98); }
.pill-badge:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(124,112,255,.35), 0 6px 16px rgba(0,0,0,.25); }
.pill-badge--accent{ --pill-bg-top:color-mix(in oklab, var(--accent) 86%, white 0%); --pill-bg-btm:color-mix(in oklab, #7a68ff 86%, white 0%); --pill-bd:rgba(92,77,239,.35); color:#fff; box-shadow:0 8px 18px rgba(92,77,239,.22); }
.pill-badge--success{ --pill-bg-top:color-mix(in oklab, var(--accent-2) 90%, white 0%); --pill-bg-btm:color-mix(in oklab, #27d67a 86%, white 0%); --pill-bd:rgba(46,204,113,.35); color:#05140c; }
.pill-badge--ghost{ --pill-bg-top:transparent; --pill-bg-btm:transparent; --pill-bd:rgba(255,255,255,.22); color:var(--muted); }
.pill-badge--inverted{ --pill-bg-top:#fff; --pill-bg-btm:#fff; --pill-bd:#fff; color:#0A0E1C; }
.pill-badge--sm{ padding:4px 8px; font-size:11px; gap:6px; }
.pill-badge--lg{ padding:8px 14px; font-size:13px; }
.pill-badge.is-active, .pill-badge[aria-current="true"]{ filter:saturate(1.06); box-shadow:0 8px 22px rgba(92,77,239,.24); border-color:rgba(255,255,255,.28); }
.pill-badge.price-badge{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.pill-badges{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:480px){ .pill-badge[data-full="true"]{ display:flex; justify-content:center; width:100%; } }
@media (prefers-reduced-motion:reduce){ .pill-badge{ transition:none !important; } }

/* ======================
   COMPARE TABLE
   ====================== */
.pp-compare .compare-legend{ display:none; }
.pp-compare .compare-table{
  width:100%; border-collapse:separate !important; border-spacing:0 12px !important;
  margin-bottom:12px;
  border: none;
}
.pp-compare thead th{
  border:1px solid var(--pp-border); border-radius:12px; padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));
  color:var(--pp-dim); font-size:12px; font-weight:800; text-align:left; letter-spacing:.02em;
}
.pp-compare tbody td,
.pp-compare tbody th{
  border:1px solid var(--pp-border); border-radius:12px; padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  line-height:1.3;
}
/* rõhuta funktsiooniveergu */
.pp-compare tbody td.cmp-feature{ font-weight:800; color:#fff; }
/* nurgad – lukusta ka siis, kui teema nullib */
.pp-compare tbody tr > td:first-of-type,
.pp-compare tbody tr > th:first-of-type{ border-top-left-radius:12px !important; border-bottom-left-radius:12px !important; }
.pp-compare tbody tr > td:last-of-type,
.pp-compare tbody tr > th:last-of-type{ border-top-right-radius:12px !important; border-bottom-right-radius:12px !important; }
/* “jah/ei” */
.pp-compare .cmp-cell{ text-align:center; font-weight:900; }
.pp-compare .cmp-cell.is-yes{ border-color:rgba(46,204,113,.42); background:linear-gradient(180deg,rgba(46,204,113,.14),rgba(46,204,113,.10)); color:#dff8ea; }
.pp-compare .cmp-cell.is-no{ border-style:dashed; color:var(--pp-dim); opacity:.9; }

@media (max-width:880px){
  .pp-compare .pp-container{ overflow-x:auto; }
  .pp-compare .compare-table{ min-width:720px; }
}
@media (max-width:720px){
  .pp-compare .pp-container{ overflow:initial; }
  .pp-compare .compare-legend{ display:flex; gap:8px; justify-content:center; margin:6px 0 8px; }
  .pp-compare thead{ display:none; }
  .pp-compare .compare-table{ min-width:0; border-spacing:0 12px !important; }
  .pp-compare tbody tr{ display:grid; grid-template-columns:1fr; gap:8px; padding:4px 0; }
  .pp-compare tbody td.cmp-feature{
    font-weight:900;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));
  }
  .pp-compare tbody td.cmp-cell{ display:flex; align-items:center; justify-content:space-between; position:relative; }
  .pp-compare tbody td.cmp-cell::before{ content:attr(data-th); font-weight:800; color:var(--pp-dim); margin-right:10px; display: flex; flex: auto; }
  .pp-compare tbody td.cmp-cell::after{ font-weight:900; }
}

/* ======================
   ADD-ONS / PROCESS / TECH / TESTIMONIALS / CTA / FAQ
   ====================== */
.addons{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.addon{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--pp-border); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  padding:10px 12px;
}
.pp-addons .addons{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px){ .pp-addons .addons{ grid-template-columns:1fr; } }
.pp-addons .price-badge{ white-space:nowrap; }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  border:1px solid var(--pp-border); border-radius:14px; padding:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.step .num{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px;
  font-weight:900; font-size:13px; color:#fff;
  background:rebeccapurple;
  box-shadow:0 8px 20px rgba(92,77,239,.25);
}
.pp-process .steps{ display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1024px){ .pp-process .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .pp-process .steps{ grid-template-columns:1fr; } }

.pp-tech .tech-list,
.pp-guarantee .guarantee-list,
.pp-payments .pay-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; margin:0; padding:0; }
@media (max-width:480px){
  .pp-tech .tech-list > li, .pp-guarantee .guarantee-list > li, .pp-payments .pay-list > li{ flex:1 1 auto; display:flex; justify-content:center; }
}

.pp-testimonials .logos{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; opacity:.9; }
.pp-testimonials .quotes{ display:grid; gap:12px; margin-top:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px){ .pp-testimonials .quotes{ grid-template-columns:1fr; } }
.pp-testimonials .quote{
  border:1px solid var(--pp-border); border-radius:16px; padding:12px; background:var(--card-bg); margin:0;
}
.pp-testimonials blockquote{ margin:0; }
.pp-testimonials figcaption{ margin-top:6px; opacity:.85; }

.pp-cta{ text-align:center; }
.pp-cta p{ margin:.2rem 0 .6rem; color:var(--muted); }
.pp-cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
@media (max-width:560px){ .pp-cta .cta-actions .btn-main{ width:100%; max-width:520px; } }

.pp-faq .faq-list{ display:grid; gap:10px; }
.pp-faq details.svc-acc{ border:1px solid var(--pp-border); border-radius:14px; overflow:hidden; }
.pp-faq details > summary{
  display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:12px 14px; gap:12px;
}
.pp-faq details > summary::-webkit-details-marker{ display:none; }
.pp-faq .svc-body{ padding:0 14px 12px; }
.pp-faq .svc-arrow{ transition:transform .2s ease; }
.pp-faq details[open] .svc-arrow{ transform:rotate(180deg); }

/* Utility divider */
.pm-divider{ height:1px; width:100%; margin:clamp(16px,2vw,22px) 0; background:linear-gradient(90deg,transparent,rgba(92,77,239,.38),transparent); border-radius:999px; }

/* Reduce motion for big grids */
@media (prefers-reduced-motion:reduce){
  .pp-compare .compare-table, .pp-addons .addons, .pp-process .steps, .pp-testimonials .quotes{ scroll-behavior:auto; }
  .pp-faq .svc-arrow{ transition:none !important; }
}




.btn-main .fa-brands{
  display:inline-block;
  margin-right:8px;
  font-size:1.1em;
  line-height:0;        /* eemaldab vertikaalse nihke */
  flex-shrink:0;
}