/* PartyPro marketing site — recreated from "PartyPro Site.dc.html" */

html, body { margin: 0; padding: 0; background: #ffffff; }
* { box-sizing: border-box; }
a { color: #7c3aed; text-decoration: none; }
a:hover { color: #ff3d8b; }
::selection { background: #ff3d8b; color: #fff; }

@keyframes pp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  color: #221046;
  overflow-x: hidden;
}

/* ---- hover behaviours (were style-hover="" in the design) ---- */
.nav-link:hover { background: #f5edff; color: #7c3aed; }
.btn-primary:hover { background: #6d28d9; }
.btn-pink:hover { background: #e62d78; transform: translateY(-2px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.26); }
.skip-btn:hover { background: rgba(255,255,255,.2); }
.btn-outline-purple:hover { background: #f5edff; }
.btn-navy:hover { background: #3d1c74; }

.trade-card { transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s; transform-style: preserve-3d; }
.trade-card:hover { transform: translateY(-8px) rotateX(6deg) rotateY(-4deg); box-shadow: 0 30px 60px rgba(124,58,237,.16); }

.app-window { transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.app-window:hover { transform: rotateX(0deg) rotateY(0deg) !important; }

.phone-device { transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.phone-device:hover { transform: rotateY(0deg) rotateX(0deg) !important; }

.tab-btn { transition: background .2s, color .2s; }

button { font-family: inherit; }

.lead-note { transition: color .2s; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .nav-links { display: none !important; }
  .hero-h1 { font-size: 56px !important; }
  .section-h2 { font-size: 38px !important; }
  .trade-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .cta-h2 { font-size: 40px !important; }
}
@media (max-width: 620px) {
  .hero-h1 { font-size: 40px !important; }
  .hero-p { font-size: 18px !important; }
  .section-h2 { font-size: 30px !important; }
  .trade-grid { grid-template-columns: 1fr !important; }
  .nav-cta-hide { display: none !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
}