/* Hero — soft blue / indigo / violet mesh (twingp.com family) */
    .cosmos {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      animation: cosmosBreathe 22s ease-in-out infinite alternate;
      border-radius: inherit;
      background: linear-gradient(160deg, #eef4ff 0%, #e8eeff 40%, #f3e8ff 100%);
    }
    @keyframes cosmosBreathe {
      0% { transform: scale(1); }
      100% { transform: scale(1.03); }
    }
    #galaxyCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.85;
      filter: blur(0.2px);
    }
    .cosmos-nebula {
      position: absolute;
      border-radius: 50%;
      filter: blur(64px);
      opacity: 0.55;
      mix-blend-mode: normal;
      animation: nebulaDrift 28s ease-in-out infinite alternate;
    }
    .cosmos-nebula--1 {
      width: 78%;
      height: 58%;
      top: -5%;
      left: -5%;
      background: radial-gradient(ellipse at 40% 50%, rgba(0,122,255,0.45) 0%, rgba(99,102,241,0.22) 45%, transparent 72%);
    }
    .cosmos-nebula--2 {
      width: 70%;
      height: 55%;
      bottom: -8%;
      right: -8%;
      background: radial-gradient(ellipse at 60% 40%, rgba(139,92,246,0.4) 0%, rgba(99,102,241,0.22) 50%, transparent 75%);
      animation-delay: -10s;
      animation-duration: 34s;
    }
    .cosmos-nebula--3 {
      width: 52%;
      height: 48%;
      top: 28%;
      left: 28%;
      background: radial-gradient(circle at 50% 50%, rgba(168,231,186,0.35) 0%, rgba(207,233,245,0.3) 40%, transparent 70%);
      animation-delay: -16s;
      animation-duration: 26s;
    }
    .cosmos-nebula--4 {
      width: 58%;
      height: 42%;
      top: 52%;
      left: -8%;
      background: radial-gradient(ellipse, rgba(243,228,138,0.28) 0%, transparent 70%);
      animation-delay: -6s;
      animation-duration: 30s;
    }
    .cosmos-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 55%;
      height: 48%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.8) 0%, rgba(0,122,255,0.2) 30%, rgba(139,92,246,0.15) 55%, transparent 75%);
      filter: blur(40px);
      animation: corePulse 9s ease-in-out infinite alternate;
    }
    @keyframes nebulaDrift {
      0% { transform: translate(0, 0) scale(1) rotate(0deg); }
      25% { transform: translate(4%, -3%) scale(1.06) rotate(3deg); }
      50% { transform: translate(-3%, 4%) scale(0.96) rotate(-2deg); }
      75% { transform: translate(2%, 2%) scale(1.03) rotate(1deg); }
      100% { transform: translate(-2%, -1%) scale(1.01) rotate(-1deg); }
    }
    @keyframes corePulse {
      0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    }
    .cosmos-dust {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(0,122,255,0.45), transparent),
        radial-gradient(1px 1px at 78% 18%, rgba(99,102,241,0.4), transparent),
        radial-gradient(2px 2px at 48% 82%, rgba(139,92,246,0.35), transparent),
        radial-gradient(1px 1px at 90% 68%, rgba(0,122,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 28% 58%, rgba(99,102,241,0.35), transparent);
      background-size: 100% 100%;
      opacity: 0.8;
      animation: dustDrift 40s linear infinite;
    }
    @keyframes dustDrift {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-3%, -2%); }
    }

    /* Pricing — light hero-matched cards */
    .pricing-scroll {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 12px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #c4b5fd transparent;
    }
    .pricing-scroll::-webkit-scrollbar { height: 6px; }
    .pricing-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, #c4b5fd, #93c5fd);
      border-radius: 999px;
    }
    .pricing-plan {
      flex: 0 0 min(85vw, 300px);
      scroll-snap-align: start;
      background: #fff;
      border: 1.5px solid transparent;
      border-radius: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, #c4b5fd, #93c5fd, #f0abfc);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      box-shadow: 0 16px 40px rgba(124, 92, 252, 0.1);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .pricing-plan:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 48px rgba(124, 92, 252, 0.16);
    }
    .pricing-plan--featured {
      box-shadow: 0 18px 50px rgba(124, 92, 252, 0.18);
    }
    .pricing-plan-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 5px 11px;
      border-radius: 999px;
      background: linear-gradient(135deg, #7c5cfc 0%, #5b7cfa 100%);
      color: #fff;
    }
    .pricing-plan-name {
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.02em;
    }
    .pricing-plan-tagline {
      margin: 0 0 16px;
      font-size: 14px;
      color: #64748b;
      line-height: 1.45;
    }
    .pricing-plan-price {
      font-size: 28px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pricing-lock-icon {
      font-size: 1rem;
      color: #94a3b8;
    }
    .pricing-plan-price-note {
      font-size: 13px;
      color: #94a3b8;
      margin: 0 0 20px;
    }
    .pricing-plan-features {
      list-style: none;
      padding: 0;
      margin: 0;
      flex: 1;
    }
    .pricing-plan-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #334155;
    }
    .pricing-plan-features li i.fa-check {
      color: #7c5cfc;
      margin-top: 3px;
      flex-shrink: 0;
    }
    .pricing-plan-features--locked {
      filter: blur(3px);
      user-select: none;
      pointer-events: none;
      opacity: 0.55;
    }
    .pricing-plan-lock-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.62);
      border-radius: 14px;
      padding: 16px;
      text-align: center;
      border: 1px solid rgba(196, 181, 253, 0.45);
    }
    .pricing-plan-lock-overlay i {
      font-size: 1.35rem;
      color: #7c5cfc;
    }
    .pricing-plan-lock-overlay span {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .pricing-plan-features-wrap {
      position: relative;
      margin-bottom: 20px;
      flex: 1;
      min-height: 180px;
    }
    .pricing-connect-btn {
      width: 100%;
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      background: linear-gradient(135deg, #7c5cfc 0%, #5b7cfa 100%);
      box-shadow: 0 10px 24px rgba(124, 92, 252, 0.28);
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .pricing-connect-btn:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
    }

    /* Store badges */
    .store-block-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 10px;
    }
    .store-block-label--live { color: #0f172a; }
    .store-badge-link {
      display: inline-block;
      transition: opacity 0.2s, transform 0.2s;
    }
    .store-badge-link:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      text-decoration: none;
    }
    .store-badge-locked {
      position: relative;
      display: inline-block;
      cursor: not-allowed;
      user-select: none;
    }
    .store-badge-locked img {
      height: 3rem;
      opacity: 0.45;
      filter: blur(1.5px) grayscale(30%);
      border-radius: 8px;
    }
    .store-badge-lock-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: rgba(15, 23, 42, 0.4);
      border-radius: 8px;
      border: 1px solid rgba(196, 181, 253, 0.25);
    }
    .store-badge-lock-overlay i {
      font-size: 14px;
      color: rgba(255,255,255,0.85);
    }
    .store-badge-lock-overlay span {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
    }

/* Mobile polish */
@media (max-width: 640px) {
  .pricing-plan {
    flex: 0 0 min(82vw, 280px);
    padding: 18px;
  }
  .pricing-plan-name { font-size: 18px; }
  .pricing-plan-price { font-size: 22px; }
  .pricing-plan-features li { font-size: 13px; }
  .store-badge-locked img,
  .store-badge-link img {
    height: 2.5rem !important;
  }
}