/* Premium marketing design system (2026-08-14, Varun — "rapractice.com ko
   premium looks do, rich UI/UX, sadharan nahi") — shared across every
   rapractice.com-served public page (frontend/public/*.html) so the visual
   upgrade is applied once and reused, not redone per page. Purely additive
   utility classes + font import; a page that doesn't opt into a class keeps
   its existing look unchanged. Same --bg/--panel/--border/--ink/--accent
   token names every one of these pages already defines, so these rules read
   the SAME variables rather than inventing a parallel palette. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

body.premium-marketing{ font-family:'Inter', system-ui, sans-serif; }
.premium-marketing h1, .premium-marketing h2, .premium-marketing h3,
.premium-marketing .cta-btn, .premium-marketing .plan-price{
  font-family:'Space Grotesk', system-ui, sans-serif;
}

/* Animated gradient-mesh backdrop for a hero section -- CSS-only, no image
   assets, cheap to render. Sits behind content via negative z-index; a page
   just wraps its hero in <div class="mesh-bg">...</div>. */
.mesh-bg{ position:relative; overflow:hidden; }
.mesh-bg::before{
  content:''; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(63,169,245,.22), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(46,197,160,.18), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(155,126,222,.16), transparent 50%);
  filter:blur(40px); animation:meshDrift 22s ease-in-out infinite alternate;
}
.mesh-bg > *{ position:relative; z-index:1; }
@keyframes meshDrift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-2%,3%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){ .mesh-bg::before{ animation:none; } }

/* Gradient headline text -- use on the single most important phrase in a
   hero, not whole paragraphs (loses legibility/impact if overused). */
.gradient-text{
  background:linear-gradient(100deg, #7CC4FA, #5FDDBB 55%, #BBA3EE);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Elevated "glass" card -- soft depth + a faint accent-tinted border glow,
   replaces a flat var(--panel) card wherever real visual weight is wanted
   (pricing cards, feature highlights) without touching every existing
   .card/.feature-group globally. */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.55);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.glass-card:hover{
  transform:translateY(-3px);
  border-color:rgba(63,169,245,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 28px 54px -22px rgba(63,169,245,.28);
}

/* CTA button with a soft glow -- layer onto the existing .cta-btn class
   (adds shadow/weight only, doesn't change its color/sizing rules). */
.glow-btn{
  box-shadow:0 8px 24px -8px rgba(63,169,245,.55), 0 0 0 1px rgba(63,169,245,.15) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.glow-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -8px rgba(63,169,245,.7), 0 0 0 1px rgba(63,169,245,.25) inset; }

/* Scroll-reveal -- paired with shared/scroll_reveal.js. Starts hidden/offset,
   IntersectionObserver adds .revealed when it enters the viewport. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.revealed{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }