/* PVA Pixel v3 — conflict fixes and service-specific pricing identities */

/* Fix the stretched fixed overlay: only the three buttons receive pointer events. */
.floating-contacts {
  position: fixed !important;
  inset: auto 18px 18px auto !important;
  width: max-content !important;
  height: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
.floating-contacts .floating-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  pointer-events: auto !important;
  background: rgba(9,11,13,.94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px);
}
.floating-contacts .floating-btn:hover { color: #090b0d !important; background: #fff !important; transform: translateY(-2px) !important; }

/* Keep service headings visible and aligned below the sticky navigation. */
.page-header {
  min-height: 360px !important;
  padding: 78px 0 72px !important;
  display: grid !important;
  align-items: center !important;
}
.page-header .container { position: relative !important; z-index: 2 !important; }
.page-header .page-icon { display: none !important; }
.page-header .page-title {
  display: block !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}
.page-header .page-subtitle { margin: 20px auto 0 !important; text-align: center !important; }

/* Replace the white glass block with a slim, integrated service-information band. */
.value-strip {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: #0b0e10 !important;
  border: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(255,255,255,.06) !important;
}
.value-strip-content {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.value-strip-item {
  min-height: 84px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.value-strip-item:last-child { border-right: 0 !important; }
.value-strip-item svg {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 8px !important;
  color: #d9ff43 !important;
  background: rgba(217,255,67,.09) !important;
  border: 1px solid rgba(217,255,67,.20) !important;
  border-radius: 9px !important;
}
.value-strip-item strong { display: block; color: #fff !important; font-size: 12px !important; }
.value-strip-item span { display: block; color: rgba(255,255,255,.48) !important; font-size: 9px !important; }

/* Softer, neutral actions. Service cards use their own accent only as a detail. */
.btn-primary {
  color: #fff !important;
  background: #151a1e !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
.btn-primary:hover { color: #090b0d !important; background: #fff !important; border-color: #fff !important; box-shadow: none !important; }
.navbar .btn-primary { background: rgba(255,255,255,.08) !important; }
.navbar .btn-primary::before { content: ''; width: 6px; height: 6px; background: #d9ff43; border-radius: 50%; }
.package-btn,
.starter-order-btn {
  position: relative;
  z-index: 2;
  color: #fff !important;
  background: #111519 !important;
  border: 1px solid #111519 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
.package-btn:hover,
.starter-order-btn:hover { color: #111519 !important; background: #fff !important; border-color: #111519 !important; }
.starter-view-btn { position: relative; z-index: 2; pointer-events: auto !important; }

/* Each homepage package gets the visual language of its platform. */
.starter-price-card:nth-child(1) { --home-accent:#E1306C; --home-tint:#FFF0F6; }
.starter-price-card:nth-child(2) { --home-accent:#242424; --home-tint:#F3F3F3; }
.starter-price-card:nth-child(3) { --home-accent:#00AEB8; --home-tint:#EAFDFD; }
.starter-price-card:nth-child(4) { --home-accent:#EA4335; --home-tint:#FFF1EF; }
.starter-price-card:nth-child(5) { --home-accent:#1877F2; --home-tint:#EDF5FF; }
.starter-price-card:nth-child(6) { --home-accent:#111111; --home-tint:#F3F4F4; }
.starter-price-card:nth-child(7) { --home-accent:#FF0000; --home-tint:#FFF0F0; }
.starter-price-card:nth-child(8) { --home-accent:#FF4500; --home-tint:#FFF2ED; }
.starter-price-card,
.starter-price-card.featured {
  color: #111519 !important;
  background: linear-gradient(180deg, var(--home-tint) 0, #fff 42%) !important;
  border: 1px solid color-mix(in srgb, var(--home-accent) 25%, #dfe4da) !important;
  border-top: 4px solid var(--home-accent) !important;
  box-shadow: 0 14px 40px rgba(9,11,13,.055) !important;
}
.starter-price-card h3,
.starter-price-card.featured h3,
.starter-price-card .starter-price strong,
.starter-price-card.featured .starter-price strong { color: #111519 !important; }
.starter-price-card .service-brand-icon { color: #fff !important; background: var(--home-accent) !important; box-shadow: none !important; }
.starter-price-card .starter-badge { color: var(--home-accent) !important; background: color-mix(in srgb, var(--home-accent) 10%, #fff) !important; }
.starter-price-card .starter-price { background: transparent !important; }
.starter-price-card .starter-price strong { color: var(--home-accent) !important; }
.starter-price-card .starter-order-btn { border-color: var(--home-accent) !important; }
.starter-price-card .starter-view-btn { color: #111519 !important; background: #fff !important; border-color: rgba(9,11,13,.16) !important; }
.starter-price-card:hover { transform: translateY(-6px) !important; border-color: var(--home-accent) !important; }

/* Shared per-service foundation; every page inherits its inline brand colors. */
.pricing-section.pricing-theme {
  --accent-soft: color-mix(in srgb, var(--service-accent) 11%, #fff);
  --accent-faint: color-mix(in srgb, var(--service-accent) 5%, #fff);
  background:
    radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--service-accent) 14%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--accent-faint), #f7f8f4 70%) !important;
}
.pricing-section.pricing-theme .pricing-tabs-wrap {
  background: rgba(255,255,255,.84) !important;
  border-color: color-mix(in srgb, var(--service-accent) 24%, #dce1d8) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--service-accent) 9%, transparent) !important;
}
.pricing-section.pricing-theme .pricing-tab.active {
  color: #fff !important;
  background: color-mix(in srgb, var(--service-accent) 82%, #111519) !important;
  box-shadow: none !important;
}
.pricing-section.pricing-theme .package-price-value { color: var(--service-accent) !important; -webkit-text-fill-color: currentColor !important; }
.pricing-section.pricing-theme .package-feature svg { color: var(--service-accent) !important; }
.pricing-section.pricing-theme .package-btn { border-color: var(--service-accent) !important; }
.pricing-section.pricing-theme .package-card.featured,
.pricing-section.pricing-theme .monthly-card.featured {
  color: #fff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--service-accent) 72%, #111519), #101418) !important;
  border-color: color-mix(in srgb, var(--service-accent) 65%, #111519) !important;
}
.pricing-section.pricing-theme .featured .package-price-value { color: #fff !important; }

/* Social: energetic creator cards with a brand-color top beam. */
.pricing-section.pricing-theme-social .package-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-soft), #fff 46%) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 42px rgba(9,11,13,.075) !important;
}
.pricing-section.pricing-theme-social .package-card::before { content:'' !important; display:block !important; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--service-accent),var(--service-accent-2)); }

/* Email: crisp inbox-style rows with a colored left rail. */
.pricing-section.pricing-theme-email .pricing-card-grid { gap: 12px !important; }
.pricing-section.pricing-theme-email .package-card {
  border: 1px solid #e1e5df !important;
  border-left: 5px solid var(--service-accent) !important;
  border-radius: 11px !important;
  background: linear-gradient(90deg, var(--accent-soft), #fff 38%) !important;
}

/* AI: dark glass workspace, illuminated by each model's brand color. */
.pricing-section.pricing-theme-ai {
  color: #fff !important;
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb,var(--service-accent) 38%,transparent), transparent 28rem),
    radial-gradient(circle at 90% 0%, color-mix(in srgb,var(--service-accent-2) 24%,transparent), transparent 24rem),
    #080b10 !important;
}
.pricing-section.pricing-theme-ai .section-title { color:#fff !important; }
.pricing-section.pricing-theme-ai .section-description { color:rgba(255,255,255,.55) !important; }
.pricing-section.pricing-theme-ai .pricing-tabs-wrap { background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.12) !important; backdrop-filter:blur(18px); }
.pricing-section.pricing-theme-ai .pricing-tabs { background:rgba(255,255,255,.06) !important; }
.pricing-section.pricing-theme-ai .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-ai .pricing-panel-description { color:rgba(255,255,255,.48) !important; }
.pricing-section.pricing-theme-ai .package-card,
.pricing-section.pricing-theme-ai .monthly-card { color:#fff !important; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important; border-color:rgba(255,255,255,.12) !important; box-shadow:none !important; }
.pricing-section.pricing-theme-ai .package-name,
.pricing-section.pricing-theme-ai .package-desc,
.pricing-section.pricing-theme-ai .package-feature { color:inherit !important; }

/* Creator: expressive gradient surfaces and alternating soft corners. */
.pricing-section.pricing-theme-creator .pricing-tabs-wrap { border-radius: 30px 14px 30px 14px !important; }
.pricing-section.pricing-theme-creator .package-card,
.pricing-section.pricing-theme-creator .monthly-card {
  background: linear-gradient(145deg,var(--accent-soft),#fff 52%,color-mix(in srgb,var(--service-accent-2) 8%,#fff)) !important;
  border-radius: 18px 32px 18px 32px !important;
}
.pricing-section.pricing-theme-creator .package-card:nth-child(even),
.pricing-section.pricing-theme-creator .monthly-card:nth-child(even) { border-radius:32px 18px 32px 18px !important; }

/* Messaging: friendly conversation-bubble cards. */
.pricing-section.pricing-theme-messaging .package-card { background:linear-gradient(180deg,var(--accent-soft),#fff) !important; border-radius:24px 24px 7px 24px !important; }
.pricing-section.pricing-theme-messaging .package-card:nth-child(even) { border-radius:24px 24px 24px 7px !important; }
.pricing-section.pricing-theme-messaging .pricing-tab.active { color:#111519 !important; background:var(--service-accent) !important; }

/* Developer: terminal grid and squared technical cards. */
.pricing-section.pricing-theme-developer {
  color:#fff !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #090d13 !important;
  background-size:24px 24px !important;
}
.pricing-section.pricing-theme-developer .section-title,
.pricing-section.pricing-theme-developer .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-developer .section-description,
.pricing-section.pricing-theme-developer .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-developer .pricing-tabs-wrap,
.pricing-section.pricing-theme-developer .package-card { color:#fff !important; background:#111821 !important; border-color:rgba(255,255,255,.12) !important; border-radius:8px !important; }
.pricing-section.pricing-theme-developer .package-name,
.pricing-section.pricing-theme-developer .package-desc,
.pricing-section.pricing-theme-developer .package-feature { color:inherit !important; }

/* Business: restrained corporate layout with a brand-color rule. */
.pricing-section.pricing-theme-business .pricing-tabs-wrap { border-radius:10px !important; }
.pricing-section.pricing-theme-business .package-card { border-radius:8px !important; border-top:4px solid var(--service-accent) !important; background:#fff !important; }

/* Ecommerce: ticket-like panels with dashed outlines. */
.pricing-section.pricing-theme-ecommerce .package-card { border:2px dashed color-mix(in srgb,var(--service-accent) 38%,#dce1d8) !important; border-radius:18px !important; background:linear-gradient(180deg,var(--accent-soft),#fff 52%) !important; }
.pricing-section.pricing-theme-ecommerce .pricing-tabs-wrap { border-style:dashed !important; border-width:2px !important; }

/* Finance: premium exchange dashboard. */
.pricing-section.pricing-theme-finance {
  color:#fff !important;
  background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--service-accent) 28%,transparent),transparent 25rem),#0a0d12 !important;
}
.pricing-section.pricing-theme-finance .section-title,
.pricing-section.pricing-theme-finance .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-finance .section-description,
.pricing-section.pricing-theme-finance .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-finance .pricing-tabs-wrap,
.pricing-section.pricing-theme-finance .package-card { color:#fff !important; background:linear-gradient(145deg,#171c23,#0f1318) !important; border-color:color-mix(in srgb,var(--service-accent) 42%,rgba(255,255,255,.1)) !important; }
.pricing-section.pricing-theme-finance .package-name,
.pricing-section.pricing-theme-finance .package-desc,
.pricing-section.pricing-theme-finance .package-feature { color:inherit !important; }

/* Entertainment: bold neon media cards. */
.pricing-section.pricing-theme-entertainment {
  color:#fff !important;
  background:radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--service-accent) 30%,transparent),transparent 25rem),#10121a !important;
}
.pricing-section.pricing-theme-entertainment .section-title,
.pricing-section.pricing-theme-entertainment .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-entertainment .section-description,
.pricing-section.pricing-theme-entertainment .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-entertainment .pricing-tabs-wrap { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; }
.pricing-section.pricing-theme-entertainment .package-card { color:#fff !important; background:linear-gradient(145deg,color-mix(in srgb,var(--service-accent) 20%,#141722),#141722) !important; border-color:rgba(255,255,255,.12) !important; border-radius:26px !important; }
.pricing-section.pricing-theme-entertainment .package-name,
.pricing-section.pricing-theme-entertainment .package-desc,
.pricing-section.pricing-theme-entertainment .package-feature { color:inherit !important; }

@media (max-width:900px) {
  .value-strip-content { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .value-strip-item:nth-child(2) { border-right:0 !important; }
  .value-strip-item:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.10) !important; }
}

@media (max-width:600px) {
  .floating-contacts { inset:auto 10px 10px auto !important; }
  .floating-contacts .floating-btn { flex-basis:40px !important; width:40px !important; height:40px !important; }
  .value-strip-content { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .value-strip-item { min-height:92px !important; display:grid !important; align-content:center !important; padding:12px !important; }
  .starter-actions { grid-template-columns:1fr !important; }
  .starter-actions .btn { width:100%; }
  .pricing-section.pricing-theme .pricing-tabs-wrap { border-radius:16px !important; }
  .page-header { min-height: 300px !important; padding: 54px 0 48px !important; }
}

@media (max-width:360px) {
  .value-strip-content { grid-template-columns:1fr !important; }
  .value-strip-item { min-height:70px !important; grid-template-columns:32px 1fr !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.10) !important; }
}