/* ===========================================================================
   Pruvio Marketing Theme — Global Design System Override
   Loads AFTER page-level inline <style> so these rules win in the cascade.
   Uses !important to defeat class-based inline rules and ensure a consistent
   black + Pruvio-blue glass aesthetic across every marketing page.
   =========================================================================== */

:root {
  --pv-bg: #000000;
  --pv-accent: #3B82F6;
  --pv-accent-2: #2563EB;
  --pv-text: #FFFFFF;
  --pv-text-muted: rgba(255, 255, 255, 0.55);
  --pv-text-soft: rgba(255, 255, 255, 0.42);
  --pv-text-faint: rgba(255, 255, 255, 0.25);
  --pv-border-soft: rgba(255, 255, 255, 0.12);
  --pv-border-hair: rgba(255, 255, 255, 0.07);
  --pv-serif: Georgia, 'Times New Roman', serif;
  --pv-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --pv-radius-pill: 9999px;
  --pv-radius-card: 20px;
  --pv-radius-input: 12px;
  --pv-shadow-blue: 0 0 16px rgba(59, 130, 246, 0.4);
  --pv-shadow-blue-strong: 0 0 32px rgba(59, 130, 246, 0.55);
}

/* --- Base layout & color ------------------------------------------------- */

html {
  background: var(--pv-bg) !important;
}

body {
  background: var(--pv-bg) !important;
  color: var(--pv-text) !important;
  font-family: var(--pv-sans) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill any stray light/gray backgrounds that inline styles set on sections. */
section,
main,
header,
.container,
.wrapper,
.content,
.page,
.section,
.hero,
.stats,
.features,
.industries,
.pricing,
.team-section,
.social-proof,
.cta-section,
.testimonials,
.faq,
.faq-section,
.integrations,
.how-it-works,
.why-pruvio {
  background-color: transparent !important;
}

/* Subtle radial-mesh glow on major section containers */
.hero,
.cta-section {
  background-image:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(59,130,246,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(37,99,235,0.13) 0%, transparent 65%) !important;
}

/* Slow cinematic drift on the hero radial-mesh backgrounds. */
@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Breathing glow on the centered orb — preserves the -50%,-50% centering. */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.hero,
.hero-section,
.cta-section {
  background-size: 200% 200% !important;
  animation: bgShift 12s ease infinite !important;
}

.hero-orb {
  animation: glowPulse 4s ease-in-out infinite !important;
}

/* Hero grid texture */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  z-index: 0;
}
.hero { position: relative !important; }
.hero > * { position: relative; z-index: 1; }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3,
.hero-headline, .section-headline, .feature-headline,
.price-name, .price-amount, .proof-statement {
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pv-text) !important;
  letter-spacing: -0.03em !important;
  line-height: 0.9 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

h4, h5, h6 {
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pv-text) !important;
  letter-spacing: -0.02em !important;
}

p, li, span, small, label, figcaption, blockquote,
.hero-sub, .section-sub, .feature-copy, .feature-desc,
.price-period, .price-features li, .industry-desc,
.step-desc, .team-card-desc, .footer-col a, .stat-label,
.feature-visual .label, .callout-tag {
  font-family: var(--pv-sans) !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
}

p, .hero-sub, .section-sub, .feature-copy, .feature-desc, .team-card-desc,
.industry-desc, .step-desc {
  color: var(--pv-text-muted) !important;
}

strong, b { color: var(--pv-text) !important; font-weight: 500 !important; }

a { color: var(--pv-accent); }

/* --- Utility: Glass ------------------------------------------------------ */

.glass {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

.glass-blue {
  background: rgba(59, 130, 246, 0.15) !important;
  -webkit-backdrop-filter: blur(50px) !important;
  backdrop-filter: blur(50px) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow:
    0 4px 24px rgba(59, 130, 246, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* --- Navbar -------------------------------------------------------------- */

nav {
  position: fixed !important;
  top: 16px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  z-index: 9999 !important;
  width: calc(100% - 32px);
  max-width: 1160px;
  height: 60px !important;
  padding: 0 22px !important;
  border-radius: var(--pv-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

/* Announcement bars sit above the page but below the floating nav pill. */
#app-launch-banner,
#signup-nudge-banner {
  z-index: 9998 !important;
}

nav + * { padding-top: 92px; }
body { padding-top: 0; }

.logo-icon,
.nav-logo-icon {
  border-radius: 8px !important;
  background: var(--pv-accent) !important;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.5) !important;
  color: #fff !important;
}

.logo-text, .nav-logo {
  color: var(--pv-text) !important;
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

.nav-link, .nav-links a, nav a {
  color: var(--pv-text) !important;
  font-family: var(--pv-sans) !important;
  font-weight: 400 !important;
}
.nav-link:hover, .nav-links a:hover { color: #fff !important; background: transparent !important; }

.nav-cta, .nav-signin {
  border-radius: var(--pv-radius-pill) !important;
  padding: 9px 20px !important;
  font-weight: 500 !important;
  font-family: var(--pv-sans) !important;
  font-size: 14px !important;
}
.nav-cta {
  background: var(--pv-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  box-shadow: var(--pv-shadow-blue) !important;
}
.nav-cta:hover {
  background: var(--pv-accent-2) !important;
  box-shadow: var(--pv-shadow-blue-strong) !important;
}
.nav-signin {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* --- Buttons ------------------------------------------------------------- */

.btn-primary, .cta-primary, .cta-btn, .hero-cta, .price-btn,
button.primary, .submit-btn, [type="submit"],
.industry-modal-cta, .store-btn {
  border-radius: var(--pv-radius-pill) !important;
  font-family: var(--pv-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.btn-primary, .cta-primary, .cta-btn, .hero-cta,
button.primary, .submit-btn, [type="submit"], .industry-modal-cta {
  background: var(--pv-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  box-shadow: var(--pv-shadow-blue) !important;
  text-shadow: none !important;
}
.btn-primary:hover, .cta-primary:hover, .cta-btn:hover, .hero-cta:hover,
button.primary:hover, .submit-btn:hover, [type="submit"]:hover, .industry-modal-cta:hover {
  background: var(--pv-accent-2) !important;
  box-shadow: var(--pv-shadow-blue-strong) !important;
  transform: translateY(-1px);
}

.btn-secondary, .cta-secondary, button.secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--pv-radius-pill) !important;
  font-family: var(--pv-sans) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .cta-secondary:hover, button.secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* --- Badges / pills ------------------------------------------------------ */

.badge, .hero-badge, .section-label, .section-badge, .pill,
.callout-tag, .proof-badge, .feature-label, .popular-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--pv-radius-pill) !important;
  padding: 4px 14px !important;
  font-size: 10px !important;
  font-family: var(--pv-sans) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--pv-text) !important;
  text-shadow: none !important;
}

.popular-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #fff !important;
}

/* --- Cards --------------------------------------------------------------- */

.feature-card, .industry-card, .team-card, .price-card,
.card, .stat-card, .proof-item, .testimonial,
.feature-visual, .industry-modal {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--pv-radius-card) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  color: var(--pv-text) !important;
}

.features-grid {
  border: none !important;
  background: transparent !important;
  gap: 16px !important;
}

.feature-card:hover, .industry-card:hover, .team-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
}

.feature-icon, .team-card-icon, .industry-emoji, .step-num {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.25) !important;
}

.feature-title, .team-card-title, .industry-name, .step-title {
  color: var(--pv-text) !important;
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

/* --- Stats --------------------------------------------------------------- */

.stats { border: none !important; }

.stat, .proof-item {
  text-align: center;
}

.stat-num, .proof-num {
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pv-text) !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

.stat-label, .proof-label {
  color: var(--pv-text-soft) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Pricing ------------------------------------------------------------- */

.price-card {
  padding: 32px 24px !important;
}

.price-card.popular, .price-card.featured, .price-card.highlighted {
  background: rgba(59, 130, 246, 0.15) !important;
  -webkit-backdrop-filter: blur(50px) !important;
  backdrop-filter: blur(50px) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  outline: 1.5px solid var(--pv-accent) !important;
  outline-offset: -1.5px;
  box-shadow:
    0 4px 24px rgba(59, 130, 246, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.price-name {
  color: var(--pv-text-soft) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-style: normal !important;
  font-family: var(--pv-sans) !important;
  font-weight: 500 !important;
}

.price-amount {
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pv-text) !important;
  font-size: clamp(40px, 5vw, 56px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

.price-features li {
  color: var(--pv-text-muted) !important;
  border-bottom: 1px solid var(--pv-border-hair) !important;
}
.price-features li::before { color: var(--pv-accent) !important; }

.price-btn {
  display: block;
  text-align: center;
  padding: 12px 20px !important;
}
.price-card .price-btn:not(.popular .price-btn) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}
.price-card.popular .price-btn,
.price-card.featured .price-btn,
.price-card.highlighted .price-btn {
  background: var(--pv-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  box-shadow: var(--pv-shadow-blue) !important;
}

/* --- Inputs / forms ------------------------------------------------------ */

input, select, textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: var(--pv-radius-input) !important;
  font-family: var(--pv-sans) !important;
  font-weight: 400 !important;
  padding: 12px 14px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

input::placeholder, textarea::placeholder, select::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* --- Footer -------------------------------------------------------------- */

footer {
  background: #000 !important;
  border-top: 1px solid var(--pv-border-hair) !important;
  color: var(--pv-text-faint) !important;
}

footer * { color: var(--pv-text-faint) !important; }
footer a { color: var(--pv-text-faint) !important; }
footer a:hover { color: var(--pv-text) !important; }
footer h4, footer .footer-col h4 {
  color: var(--pv-text) !important;
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.footer-bottom { border-top-color: var(--pv-border-hair) !important; }

/* --- Social proof bar ---------------------------------------------------- */

.social-proof-bar {
  background: transparent !important;
  border-top: 1px solid var(--pv-border-hair) !important;
  border-bottom: 1px solid var(--pv-border-hair) !important;
}
.social-proof-bar-inner { color: var(--pv-text) !important; font-weight: 400 !important; }
.social-proof-bar-inner .proof-dot { background: var(--pv-accent) !important; }

/* --- Industry modal ------------------------------------------------------ */

.industry-modal {
  background: rgba(15, 20, 30, 0.85) !important;
}
.industry-modal-title {
  font-family: var(--pv-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #fff !important;
}
.industry-modal-features li { border-bottom-color: var(--pv-border-hair) !important; }
.industry-modal-features li::before { background: var(--pv-accent) !important; }

/* --- Scroll-triggered fade-in ------------------------------------------- */

.pv-reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.pv-reveal.pv-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  -webkit-filter: blur(0);
}

/* Existing .reveal hook used on some pages */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  -webkit-filter: blur(0);
}

/* --- Misc cleanup -------------------------------------------------------- */

/* Drop fancy orange-stroke accent on hero H1 */
h1 .accent {
  -webkit-text-stroke: 0 !important;
  color: var(--pv-accent) !important;
  text-shadow: 0 0 24px rgba(59, 130, 246, 0.35) !important;
}

/* Tables, hr */
hr { border-color: var(--pv-border-hair) !important; }
table { color: var(--pv-text) !important; }
th, td { border-color: var(--pv-border-hair) !important; }

/* Body noise overlay (from index.html) — keep but soften */
body::before { opacity: 0.25 !important; }