/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


:root{
  --edge-bleed: 8px;
  --edge-bleed-bottom: 8px;
}


.vks-partner-badge{
  position: fixed;
    inset-block-start: 97%;
    right: calc(max(0px, env(safe-area-inset-right)) - var(--edge-bleed));
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: auto;
}

.vks-partner-badge a{
  display: block;
  background: none;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.vks-partner-badge a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.vks-partner-badge img{
  display: block;
  height: 75px;
  width: auto;
}

/* Tume taust – kui sul on dark mode klass body peal */
.dark .vks-partner-badge a{ background:#151a1f; border-color:#00000033; }

/* Mobiil: vii badge paremasse alla nurka, et mitte katta sisu */
@media (max-width: 768px){
  .vks-partner-badge{
    inset-block-start: auto;
    bottom: calc(max(1px, env(safe-area-inset-bottom)) - var(--edge-bleed-bottom));
    right: calc(max(1px, env(safe-area-inset-right)) - var(--edge-bleed));
    transform: none;
  }
  .vks-partner-badge img{ height: 50px; }
  .vks-partner-badge a{  }
}

/* Kui mõni teemaelemendi z-index katab märgi, tõsta veelkord */
.site-header, .main-header-bar{ z-index: 50; } /* näide */
.vks-partner-badge{ z-index: 99999; }































/* ================================
   KV Hero – Landing (no big box)
   ================================ */

.kv-hero{
  --kv-accent: #7C5CFF;
  --kv-accent-soft: #C084FC;
  --kv-accent-green: #4ADE80;
  --kv-text: #E5E7EB;
  --kv-text-muted: #9CA3AF;
  --kv-border-soft: #5a03ef3b;
  --kv-card-bg: rgba(15,23,42,0.92);
  --kv-radius-md: 18px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 13vh, 132px) 16px clamp(80px, 11vh, 120px);
  color: var(--kv-text);
  background:
    radial-gradient(circle at 0% 0%, #4C1D95 0, transparent 55%),
    radial-gradient(circle at 100% 8%, #0EA5E9 0, transparent 55%),
    radial-gradient(circle at 50% 100%, #115E59 0, transparent 60%),
    linear-gradient(180deg, #050316 0%, #02010B 70%, #02010B 100%);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* diagonaalne “agentuuri” muster – väga õrn */
.kv-hero::before{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:0.18;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(15,23,42,0.0) 0,
      rgba(31,41,55,0.95) 1px,
      rgba(15,23,42,0.0) 9px
    );
  mix-blend-mode: soft-light;
}

.kv-hero__container{
  position:relative;
  max-width: 1120px;
  margin: 0 auto;
  z-index: 1;
}

/* Header-plokk – aga mitte kastis */
.kv-hero__head{
  max-width: 720px;
}

/* Eyebrow + lint reas */
.kv-hero__meta{
  display:flex;
  align-items:center;
  gap: 16px;
  margin-bottom: 12px;
}

.kv-hero__eyebrow{
  margin:0;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(199,210,254,0.9);
}

/* Tasuta haldus – väike pill, mitte kast ümber kõige */
.kv-ribbon{
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:#ECFEFF;
  background: linear-gradient(135deg, var(--kv-accent), var(--kv-accent-soft));
  box-shadow: 0 8px 22px rgba(88,80,227,0.7);
  white-space: nowrap;
  display:none;
}

/* Pealkiri */
.kv-hero__title{
  margin: 0 0 12px 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size: clamp(32px, 4.6vw, 46px);
}

@supports (-webkit-background-clip:text) or (background-clip:text){
  .kv-hero__title{
    --kv-grad: linear-gradient(100deg,#60A5FA 0%,#A855F7 40%,#22D3EE 88%);
    --kv-speed: 18s;

    background-image:
      radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 60%),
      var(--kv-grad);
    background-size: 100% 100%, 200% 200%;
    background-position: top center, 0% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
      0 0 10px rgba(59,130,246,0.18),
      0 14px 40px rgba(8,47,73,0.55);
    -webkit-text-stroke: .3px rgba(15,23,42,0.9);
    animation:
      kv-fade-up .8s ease-out forwards .05s,
      kv-grad-pan var(--kv-speed) linear infinite;
  }
}

/* Tekst */
.kv-hero__subtitle{
  max-width: 640px;
  margin: 0;
  margin-top: 10px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--kv-text-muted);
  opacity: 0;
  transform: translateY(16px);
  animation: kv-fade-up .8s ease-out forwards .16s;
}

/* CTA-d */
.kv-hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  margin-top: clamp(22px, 3.6vw, 30px);
  margin-bottom: clamp(22px, 3.6vw, 30px)
}

.kv-btn{
  --pad-y: 14px;
  --pad-x: 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  min-height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(148,163,184,0.55);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .18s ease,
    border-color .22s ease;
  color: var(--kv-text);
  font-size: 14px;
}

.kv-btn:focus-visible{
  outline: 2px solid #E5E7EB;
  outline-offset: 3px;
}

.kv-btn--primary{
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg,#7C5CFF,#C084FC);
  color:#F9FAFB;
  box-shadow: 0 16px 38px #5a03ef3d;
  border: none;
}

.kv-btn--primary::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.75) 18%,
      rgba(255,255,255,0.0) 40%);
  opacity:0;
  transform: translate3d(-60%,0,0) rotate(6deg);
  pointer-events:none;
}

.kv-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 52px rgba(88,80,227,0.9);
}

.kv-btn--primary:hover::before{
  opacity:0.9;
  animation: kv-shine 1.1s ease-out forwards;
}

.kv-btn--ghost{
  background: rgba(15,23,42,0.7);
  color: #E5E7EB;
  backdrop-filter: blur(10px);
}

.kv-btn--ghost:hover{
  transform: translateY(-2px);
  background: rgba(15,23,42,0.9);
  box-shadow: 0 14px 34px rgba(15,23,42,0.9);
}

.kv-btn__icon{
  width:18px;
  height:18px;
}

/* KPI-d – vabas ruumis, mitte kastis */
.kv-kpis{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  margin: clamp(28px, 4vw, 34px) 0 0 0;
  padding:0 !important;
  list-style:none;
}

.kv-kpis li{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  align-items:center;
  padding: 10px 14px;
  min-width: 220px;
  border-radius: 14px;
  border:1px solid var(--kv-border-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,255,0.18), transparent 60%),
    linear-gradient(145deg, rgba(15,23,42,0.95), rgba(15,23,42,0.9));
  box-shadow: 0 18px 46px rgba(15,23,42,0.95);
  overflow: hidden;
}

/* Beam */
.kv-kpis li::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(120deg,
      transparent 0,
      rgba(148,163,255,0.28) 24%,
      rgba(56,189,248,0.2) 40%,
      transparent 70%);
  opacity:0;
  transform: translate3d(-22%,0,0);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
}

.kv-kpis li:hover::before{
  opacity:.85;
  transform: translate3d(6%,0,0);
}

.kv-kpi__icon{
  grid-row: 1 / span 2;
  width:22px;
  height:22px;
  color: var(--kv-accent-green);
  filter:
    drop-shadow(0 0 10px rgba(74,222,128,0.6))
    drop-shadow(0 0 20px rgba(56,189,248,0.45));
}

.kv-kpis strong{
  font-size: 1.05rem;
  line-height: 1.15;
}

.kv-kpis span{
  font-size: .85rem;
  color: var(--kv-text-muted);
}

/* Eeliste kaardid – need võivad olla kastid, aga eraldi hero tekstist */
.kv-hero__features{
  margin-top: clamp(26px, 4vw, 34px);
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

@media (max-width: 960px){
  .kv-hero__features{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width: 640px){
  .kv-hero__features{
    grid-template-columns: minmax(0,1fr);
  }
}

.kv-card{
  position:relative;
  padding: 20px 18px 18px 18px;
  border-radius: var(--kv-radius-md);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,255,0.2), transparent 58%),
    linear-gradient(145deg, var(--kv-card-bg), rgba(15,23,42,0.96));
  border: 1px solid var(--kv-border-soft);
  box-shadow: 0 22px 60px rgba(15,23,42,0.96);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(16px);
  animation: kv-fade-up .65s ease-out forwards;
}

.kv-card:nth-child(1){ animation-delay: .20s; }
.kv-card:nth-child(2){ animation-delay: .26s; }
.kv-card:nth-child(3){ animation-delay: .32s; }

.kv-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from 200deg,
      rgba(124,92,255,0.0),
      rgba(124,92,255,0.45),
      rgba(56,189,248,0.40),
      rgba(148,163,255,0.35),
      rgba(124,92,255,0.0)
    );
  opacity:0;
  filter: blur(10px);
  transform: scale(1.05);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
  z-index:0;
}

.kv-card:hover::before{
  opacity:.95;
  transform:scale(1.02);
}

.kv-card__icon{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-bottom: 12px;
  border-radius: 11px;
  color: var(--kv-accent-green);
  background: rgba(15,23,42,0.96);
  border: 1px solid rgba(74,222,128,0.6);
  box-shadow:
    0 0 12px rgba(74,222,128,0.65),
    0 12px 26px rgba(15,23,42,0.9);
}

.kv-card__title{
  position:relative;
  z-index:1;
  margin: 0 0 6px 0;
  font-size: clamp(18px, 2vw, 21px);
  letter-spacing: -0.01em;
}

.kv-card__text{
  position:relative;
  z-index:1;
  margin:0;
  font-size: 14px;
  line-height:1.7;
  color: var(--kv-text-muted);
}

/* Sädemed */
.kv-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background:
    radial-gradient(1.6px 1.6px at 16% 26%, #F9FAFB, transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 18%, #FBBF24, transparent 60%),
    radial-gradient(1.8px 1.8px at 78% 68%, #A855F7, transparent 60%),
    radial-gradient(1.4px 1.4px at 32% 82%, #7DD3FC, transparent 60%),
    radial-gradient(1.3px 1.3px at 90% 38%, #BFDBFE, transparent 60%);
  animation: kv-twinkle 7s ease-in-out infinite;
}

/* Scroll vihje */
.kv-scroll{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  width:26px;
  height:42px;
  border-radius:20px;
  border:1.5px solid rgba(148,163,184,0.8);
  background: radial-gradient(circle at 50% 0, rgba(148,163,255,0.3), transparent 60%);
  cursor:pointer;
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  box-shadow: 0 0 24px rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
}

.kv-scroll span{
  display:block;
  width:4px;
  height:8px;
  border-radius:2px;
  margin:6px auto 0;
  background:#E5E7EB;
  animation: kv-scroll 1.4s infinite;
}

.kv-scroll:focus-visible{
  outline: 2px solid #E5E7EB;
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 960px){
  .kv-hero{
    padding-top: clamp(88px, 12vh, 110px);
  }

  .kv-hero__meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .kv-ribbon{
    align-self:flex-start;
  }

  .kv-kpis{
    margin-top: 22px;
  }
}

@media (max-width: 640px){
  .kv-hero{
    padding-inline: 14px;
  }

  .kv-hero__eyebrow{
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .kv-hero__title{
    font-size: clamp(26px, 8vw, 30px);
  }

  .kv-kpis{
    flex-direction:column;
  }

  .kv-kpis li{
    min-width: 0;
    width: 100%;
  }
}

/* Animatsioonid */
@keyframes kv-fade-up{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

@keyframes kv-grad-pan{
  0%{ background-position: top center, 0% 50%; }
  100%{ background-position: top center, 200% 50%; }
}

@keyframes kv-twinkle{
  0%,100%{ opacity:.12; }
  50%{ opacity:.3; }
}

@keyframes kv-scroll{
  0%{ transform: translateY(0); opacity:1; }
  100%{ transform: translateY(14px); opacity:0; }
}

@keyframes kv-shine{
  0%{ transform: translate3d(-60%,0,0) rotate(6deg); }
  100%{ transform: translate3d(80%,0,0) rotate(6deg); }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .kv-hero__title,
  .kv-hero__subtitle,
  .kv-card{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .kv-sparkles,
  .kv-scroll span{
    animation: none;
  }
}



/* =========================================
   KV Hero – viimistlus
   ====================================== */

/* Taust: parempoolne sinine rahulikum, triibud õrnemaks */
.kv-hero{
  background:
    radial-gradient(circle at 0% 0%, #4C1D95 0, transparent 55%),
    radial-gradient(circle at 100% 8%, #0F766E 0, transparent 55%),
    radial-gradient(circle at 50% 100%, #0B1120 0, transparent 60%),
    linear-gradient(180deg, #050316 0%, #02010B 70%, #02010B 100%);
}

.kv-hero::before{
  opacity: 0.12;
}

/* Üldine vertikaalne rütm */
.kv-hero__head{
  margin-top: 12px;
}

.kv-hero__title{
  margin-bottom: 14px;
  font-size: clamp(34px, 4.8vw, 48px);
}

/* Eyebrow natuke kompaktsem ja rahulikum */
.kv-hero__eyebrow{
  letter-spacing: 0.22em;
  font-size: 10px;
  opacity: 0.9;
}

/* Põhitekst veidi kitsam – parem loetavus */
.kv-hero__subtitle{
  max-width: 600px;
  line-height: 1.7;
}



.kv-btn--primary:hover{
  box-shadow: 0 22px 46px rgba(88,80,227,0.9);
}

.kv-btn--ghost{
  border-color: #5a03ef;
}

/* KPI: vähem raskust, pisut kompaktsem kõrgus */
.kv-kpis{
  margin-top: clamp(22px, 3.2vw, 30px);
}





























.kv-kpis li{
  padding: 9px 13px;
  box-shadow: 0 14px 32px rgba(15,23,42,0.9);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,255,0.14), transparent 60%),
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.9));
}

.kv-kpi__icon{
  width: 20px;
  height: 20px;
}

/* Kaardid: rohkem õhku KPIdest, varju natuke tagasi */
.kv-hero__features{
  margin-top: clamp(28px, 4.4vw, 38px);
}

.kv-card{
  box-shadow: 0 18px 46px rgba(15,23,42,0.92);
}

/* Sädemed natuke tagasi, et tekst domineeriks */
.kv-sparkles{
  opacity: 0.18;
}

/* Mobiil: hero mitte liiga “tihe” */
@media (max-width: 640px){
  .kv-hero{
    padding-top: clamp(88px, 12vh, 110px);
    padding-bottom: clamp(70px, 10vh, 100px);
  }

  .kv-hero__subtitle{
    max-width: none;
  }
}

/* =========================================
   KV Hero – final agency polish
   ====================================== */

/* Lint peidetud kõigil vaadetel */
.kv-ribbon{
  display: none !important;
}

/* Taust: puhtalt lilla-sinine, ilma rohelise toonita */
.kv-hero{


  background:
radial-gradient(circle at 0% 0%, #4c1d9585 0, transparent 55%), radial-gradient(circle at 100% 10%, #1d4ed84d 0, transparent 55%), radial-gradient(circle at 50% 100%, #020617 0, transparent 60%), linear-gradient(180deg, #050316 0%, #02010B 70%, #02010B 100%);
  padding-top: 45px;
  padding-bottom: 135px;
}

/* Tekstiblokk peenem ja kitsam */
.kv-hero__head{
  max-width: 640px;
}

.kv-hero__title{
  font-weight: 700;                 /* varem 800 */
  letter-spacing: -0.02em;
  font-size: clamp(32px, 4.2vw, 44px);
  margin-bottom: 12px;
  text-shadow:
    0 0 6px rgba(59,130,246,0.18),
    0 10px 28px rgba(15,23,42,0.65); /* veidi tagasihoidlikum glow */
}

.kv-hero__subtitle{
  max-width: 580px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(148,163,184,0.96);
}

/* KPI-d – kergemad plaadid, ilma rohelise “neonita” */
.kv-kpis{
  margin-top: clamp(22px, 3vw, 30px);
}

.kv-kpis li{
  box-shadow: 0 14px 32px rgba(15,23,42,0.9);
  background:
    radial-gradient(circle at 0 0, rgba(129,140,248,0.24), transparent 60%),
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.9));
}

/* Ikoonid sinakad, mitte rohelised */
.kv-kpi__icon,
.kv-card__icon{
  color: var(--kv-accent-green);

}

/* Kaartide üldtoon – sügav lillakas-sinine, ilma rohelise cast’ita */
.kv-card{
  background:
    radial-gradient(circle at 0 0, rgba(129,140,248,0.22), transparent 58%),
    linear-gradient(145deg, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
  box-shadow: 0 18px 46px rgba(15,23,42,0.92);
}

/* Kaardi ikoon – sinine badge, mitte roheline */
.kv-card__icon{
  background: rgba(15,23,42,0.98);
  border-color: rgba(129,140,248,0.8);
  box-shadow:
    0 0 12px rgba(129,140,248,0.8),
    0 10px 24px rgba(15,23,42,0.9);
}

/* Sädemed veidi tagasi, et tekst oleks fookuses */
.kv-sparkles{
  opacity: 0.16;
}

/* Mobiilis hoia sama peenem stiil */
@media (max-width: 640px){
  .kv-hero__head{
    max-width: 100%;
  }

  .kv-hero__subtitle{
    max-width: none;
  }
}




/* Hero fireworks – raketid hero servades */
.kv-hero-fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0; /* sisu jääb peale – .kv-hero__container on juba z-index:1 */
}














































/* ======================
   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;
}