/* ==========================================================================
   PRISMA SMM — Landing page
   New public landing: hero, features, services preview, pricing, CTA, footer.
   ========================================================================== */

.pr-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 600px at 80% -10%, var(--prisma-primary-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--prisma-secondary-soft), transparent 60%),
    var(--prisma-bg);
  background-attachment: fixed;
  color: var(--prisma-text);
}

/* ---- Landing navbar ---- */
.pr-lnav {
  position: sticky;
  top: 0;
  z-index: var(--prisma-z-navbar);
  display: flex;
  align-items: center;
  gap: var(--prisma-space-4);
  padding: var(--prisma-space-3) var(--prisma-space-6);
  background: color-mix(in srgb, var(--prisma-bg) 68%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--prisma-border) 70%, transparent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: padding var(--prisma-duration-fast) var(--prisma-ease), background var(--prisma-duration) var(--prisma-ease), box-shadow var(--prisma-duration) var(--prisma-ease);
}
.pr-lnav.is-scrolled {
  padding: var(--prisma-space-2) var(--prisma-space-6);
  background: color-mix(in srgb, var(--prisma-bg) 82%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}
.pr-lnav-brand svg { transition: filter var(--prisma-duration) var(--prisma-ease); }
.pr-lnav-brand:hover svg { filter: drop-shadow(0 0 10px rgba(139,92,246,0.45)); }
.pr-lnav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--prisma-space-3);
  color: var(--prisma-text);
  font-weight: var(--prisma-font-weight-bold);
  font-size: var(--prisma-font-size-lg);
  margin-right: auto;
}
.pr-lnav-brand:hover { color: var(--prisma-text); }
.pr-lnav-links { display: flex; align-items: center; gap: var(--prisma-space-2); }
.pr-lnav-links a {
  padding: 8px 14px;
  border-radius: var(--prisma-radius-md);
  color: var(--prisma-text-secondary);
  font-size: var(--prisma-font-size-sm);
  font-weight: var(--prisma-font-weight-medium);
  transition: all var(--prisma-duration-fast) ease;
}
.pr-lnav-links a:hover { color: var(--prisma-text); background: var(--prisma-surface-hover); }
.pr-lnav-actions { display: flex; align-items: center; gap: var(--prisma-space-2); }
@media (max-width: 767.98px) {
  .pr-lnav-links { display: none; }
}

/* ---- Hero ---- */
.pr-hero {
  position: relative;
  padding: var(--prisma-space-12) var(--prisma-space-6) var(--prisma-space-10);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.pr-hero-glass {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--prisma-space-8) var(--prisma-space-6);
  background: color-mix(in srgb, var(--prisma-surface) 65%, transparent);
  border: 1px solid var(--prisma-glass-border);
  border-radius: var(--prisma-radius-2xl);
  backdrop-filter: var(--prisma-blur-lg);
  -webkit-backdrop-filter: var(--prisma-blur-lg);
  box-shadow: var(--prisma-shadow-glass);
}
.pr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--prisma-space-2);
  padding: 6px 14px;
  background: var(--prisma-primary-soft);
  color: var(--prisma-primary);
  border: 1px solid var(--prisma-primary-soft);
  border-radius: var(--prisma-radius-pill);
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-semibold);
  margin-bottom: var(--prisma-space-5);
}
.pr-hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  font-weight: var(--prisma-font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 auto var(--prisma-space-5);
  max-width: 820px;
}
.pr-hero h1 .pr-text-gradient {
  background: var(--prisma-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pr-hero-sub {
  max-width: 640px;
  margin: 0 auto var(--prisma-space-8);
  color: var(--prisma-text-secondary);
  font-size: var(--prisma-font-size-lg);
  line-height: 1.6;
}
.pr-hero-cta { display: flex; align-items: center; justify-content: center; gap: var(--prisma-space-3); flex-wrap: wrap; }
.pr-hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--prisma-space-8);
  margin-top: var(--prisma-space-12);
  flex-wrap: wrap;
}
.pr-hero-stat { text-align: center; }
.pr-hero-stat strong { display: block; font-size: 32px; font-weight: var(--prisma-font-weight-bold); letter-spacing: -0.02em; background: var(--prisma-gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-hero-stat span { font-size: var(--prisma-font-size-sm); color: var(--prisma-text-muted); }

/* Glow orbs — candy mesh */
.pr-hero::before, .pr-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  transition: transform 0.8s var(--prisma-ease);
}
.pr-hero::before { width: 720px; height: 720px; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,0.28), transparent 65%); top: -280px; left: -80px; opacity: 0.9; }
.pr-hero::after { width: 640px; height: 640px; background: radial-gradient(circle at 70% 70%, rgba(59,130,246,0.24), rgba(34,211,238,0.18) 55%, transparent 70%); top: -220px; right: -60px; opacity: 0.9; }
.pr-hero-mesh {
  position: absolute;
  inset: -20%;
  background: var(--prisma-gradient-mesh);
  opacity: 0.04;
  filter: blur(48px);
  animation: pr-hue 14s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes pr-hue { 0%{filter: blur(48px) hue-rotate(0deg);} 100%{filter: blur(48px) hue-rotate(360deg);} }

/* ---- Sections ---- */
.pr-section { padding: var(--prisma-space-12) var(--prisma-space-6); }
.pr-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--prisma-space-10); }
.pr-section-kicker {
  display: inline-block;
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--prisma-primary);
  margin-bottom: var(--prisma-space-3);
}
.pr-section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: var(--prisma-font-weight-bold); letter-spacing: -0.02em; margin-bottom: var(--prisma-space-3); }
.pr-section-desc { color: var(--prisma-text-muted); font-size: var(--prisma-font-size-lg); line-height: 1.6; }

/* Features grid */
.pr-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--prisma-space-5);
  max-width: var(--prisma-content-max);
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .pr-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .pr-features-grid { grid-template-columns: 1fr; }
}
.pr-feature {
  padding: var(--prisma-space-6);
  background: color-mix(in srgb, var(--prisma-surface) 72%, transparent);
  border: 1px solid var(--prisma-glass-border);
  border-radius: var(--prisma-radius-xl);
  backdrop-filter: var(--prisma-blur-md);
  -webkit-backdrop-filter: var(--prisma-blur-md);
  box-shadow: var(--prisma-shadow-sm);
  transition: all var(--prisma-duration) var(--prisma-ease);
  position: relative;
  overflow: hidden;
}
.pr-feature::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 200px at 0% 0%, var(--prisma-primary-soft), transparent 60%);
  opacity:0;
  transition: opacity var(--prisma-duration) var(--prisma-ease);
}
.pr-feature:hover { transform: translateY(-6px) scale(1.01); border-color: var(--prisma-border-hover); box-shadow: var(--prisma-shadow-float); }
.pr-feature:hover::before { opacity:1; }
.pr-feature:hover .pr-feature-icon { transform: rotate(6deg) scale(1.06); }
.pr-feature-icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--prisma-radius-lg);
  background: var(--prisma-primary-soft);
  color: var(--prisma-primary);
  margin-bottom: var(--prisma-space-4);
  transition: transform var(--prisma-duration) var(--prisma-ease-spring);
}
.pr-feature h3 { font-size: var(--prisma-font-size-lg); margin-bottom: var(--prisma-space-2); }
.pr-feature p { color: var(--prisma-text-secondary); font-size: var(--prisma-font-size-sm); margin: 0; line-height: 1.6; }

/* CTA band */
.pr-cta {
  max-width: var(--prisma-content-max);
  margin: 0 auto;
  padding: var(--prisma-space-10);
  text-align: center;
  background: var(--prisma-gradient-primary);
  border-radius: var(--prisma-radius-2xl);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pr-cta::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 45%, transparent 75%);
  transform: translateX(-120%);
  animation: pr-shimmer 3.2s infinite;
}
@keyframes pr-shimmer { 0%{transform:translateX(-120%);} 60%{transform:translateX(120%);} 100%{transform:translateX(120%);} }
.pr-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 300px at 15% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
              radial-gradient(400px 300px at 90% 100%, rgba(59, 130, 246, 0.5), transparent 60%);
}
.pr-cta h2 { color: #fff; font-size: clamp(26px, 3.5vw, 36px); font-weight: var(--prisma-font-weight-bold); letter-spacing: -0.02em; position: relative; z-index: 1; margin-bottom: var(--prisma-space-3); }
.pr-cta p { color: rgba(255, 255, 255, 0.85); font-size: var(--prisma-font-size-lg); position: relative; z-index: 1; margin-bottom: var(--prisma-space-6); }
.pr-cta .btn-light {
  background: #fff;
  color: var(--prisma-primary);
  border-color: transparent;
  font-weight: var(--prisma-font-weight-semibold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}
.pr-cta .btn-light:hover { transform: translateY(-2px); }
.pr-cta .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.pr-cta .btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Landing footer */
.pr-lfooter {
  margin-top: auto;
  padding: var(--prisma-space-10) var(--prisma-space-6) var(--prisma-space-6);
  border-top: 1px solid var(--prisma-border);
}
.pr-lfooter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--prisma-space-8);
  max-width: var(--prisma-content-max);
  margin: 0 auto var(--prisma-space-8);
}
.pr-lfooter-brand p { color: var(--prisma-text-muted); font-size: var(--prisma-font-size-sm); max-width: 320px; margin-top: var(--prisma-space-4); }
.pr-lfooter-col h4 { font-size: var(--prisma-font-size-sm); font-weight: var(--prisma-font-weight-semibold); margin-bottom: var(--prisma-space-4); text-transform: uppercase; letter-spacing: 0.06em; color: var(--prisma-text); }
.pr-lfooter-col a { display: block; color: var(--prisma-text-muted); font-size: var(--prisma-font-size-sm); padding: 4px 0; transition: color var(--prisma-duration-fast) ease; }
.pr-lfooter-col a:hover { color: var(--prisma-text); }
.pr-lfooter-bottom {
  max-width: var(--prisma-content-max);
  margin: 0 auto;
  padding-top: var(--prisma-space-6);
  border-top: 1px solid var(--prisma-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prisma-space-3);
  color: var(--prisma-text-muted);
  font-size: var(--prisma-font-size-xs);
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .pr-lfooter-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Candy reveals ---- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--prisma-duration-reveal) var(--prisma-ease), transform var(--prisma-duration-reveal) var(--prisma-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-visible[data-reveal="scale"] { transform: scale(1); }
.pr-feature[data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---- Ripple & magnetic ----
   NOTE: the .ripple styles moved to components.css — initRipple() runs on the
   dashboard too, where landing.css is not loaded (the orphan span used to
   inflate inline-flex buttons on every click). */
.btn.is-magnetic { transition: transform var(--prisma-duration-micro) var(--prisma-ease); }

/* ---- Count-up shimmer for stats ---- */
.pr-hero-stat strong.is-counting { filter: drop-shadow(0 0 10px rgba(139,92,246,0.35)); }