/* ═══════════════════════════════════════════════════════
   CrossEvents — Premium SaaS Landing
   ═══════════════════════════════════════════════════════ */

:root {
  --ce-primary: #5B2FE8;
  --ce-primary-dark: #4A22CC;
  --ce-primary-rgb: 91, 47, 232;
  --ce-secondary: #F5A623;
  --ce-success: #22C55E;
  --ce-whatsapp: #25D366;
  --ce-whatsapp-dark: #1EBE5A;
  --ce-dark: #1A1A2E;
  --ce-gray: #6B7280;
  --ce-gray-light: #9CA3AF;
  --ce-light: #F8FAFC;
  --ce-card: #FFFFFF;
  --ce-text: #1F2937;
  --ce-text-muted: #6B7280;
  --ce-border: #E5E7EB;
  --ce-radius: 14px;
  --ce-radius-lg: 20px;
  --ce-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ce-shadow: 0 4px 14px rgba(0,0,0,.06);
  --ce-shadow-lg: 0 10px 40px rgba(0,0,0,.08);
  --ce-shadow-primary: 0 8px 30px rgba(91,47,232,.18);
  --ce-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ce-text); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.fw-800 { font-weight: 800 !important; }
:focus-visible { outline: 2px solid var(--ce-primary); outline-offset: 2px; }

/* ═══ NAVBAR ═══ */
.navbar-ce {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background var(--ce-transition), box-shadow var(--ce-transition);
  padding: .55rem 0;
}
.navbar-ce.scrolled { background: rgba(255,255,255,.95); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.navbar-ce .navbar-brand { font-size: 1.2rem; letter-spacing: -.02em; }
.navbar-ce .navbar-brand img { height: 38px; width: auto; }
.navbar-ce .nav-link {
  font-weight: 500; color: var(--ce-dark); font-size: .92rem;
  padding: .45rem .75rem !important; border-radius: 8px;
  transition: var(--ce-transition);
}
.navbar-ce .nav-link:hover { color: var(--ce-primary); background: rgba(var(--ce-primary-rgb),.05); }

/* ═══ BUTTONS ═══ */
.btn-ce {
  background: var(--ce-primary); color: #fff; border: none;
  border-radius: var(--ce-radius); padding: .75rem 1.8rem;
  font-weight: 600; font-size: .95rem;
  transition: var(--ce-transition);
  box-shadow: var(--ce-shadow-primary);
}
.btn-ce:hover { background: var(--ce-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(91,47,232,.25); }
.btn-ce:active { transform: translateY(0); }
.btn-ce:focus-visible { box-shadow: 0 0 0 3px rgba(var(--ce-primary-rgb),.35); }

.btn-wa {
  background: var(--ce-whatsapp); color: #fff; border: none;
  border-radius: var(--ce-radius); padding: .75rem 1.8rem;
  font-weight: 600; font-size: .95rem;
  transition: var(--ce-transition);
  box-shadow: 0 4px 14px rgba(37,211,102,.2);
}
.btn-wa:hover { background: var(--ce-whatsapp-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.3); }
.btn-wa:active { transform: translateY(0); }

.btn-outline-ce {
  border: 2px solid var(--ce-primary); color: var(--ce-primary);
  border-radius: var(--ce-radius); padding: .7rem 1.6rem;
  font-weight: 600; background: transparent; transition: var(--ce-transition);
}
.btn-outline-ce:hover { background: var(--ce-primary); color: #fff; box-shadow: var(--ce-shadow-primary); transform: translateY(-2px); }

/* ═══ HERO ═══ */
.hero {
  background: linear-gradient(135deg, #4A22CC 0%, var(--ce-primary) 40%, #7C3AED 100%);
  color: #fff; padding: 6rem 0 5rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -40%; right: -15%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 80px; background: var(--ce-light);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero h1 { font-size: 2.8rem; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.hero h1 .highlight { color: var(--ce-secondary); }
.hero .lead { font-size: 1.15rem; opacity: .9; line-height: 1.7; }
.hero-bullets { list-style: none; padding: 0; }
.hero-bullets li { font-size: .98rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.hero-bullets li i { color: var(--ce-secondary); font-size: 1.1rem; }
@media(min-width: 992px) { .hero h1 { font-size: 3.4rem; } .hero { padding: 7rem 0 5.5rem; } }

/* Phone mockup */
.phone-mock {
  max-width: 280px; margin: 0 auto;
  background: linear-gradient(145deg, #1a1a2e, #16162a);
  border-radius: 32px; padding: 10px;
  box-shadow: 0 25px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
  position: relative; z-index: 1;
}
.phone-mock-inner {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border-radius: 24px; aspect-ratio: 9/18;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem; text-align: center; color: #fff;
}
.phone-mock-inner img { width: 72px; height: 72px; object-fit: contain; margin-bottom: .75rem; border-radius: 14px; }
.phone-mock-inner .mock-title { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; }
.phone-mock-inner .mock-items { list-style: none; padding: 0; margin: 0; font-size: .7rem; opacity: .8; }
.phone-mock-inner .mock-items li { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }

/* Social proof strip */
.social-proof { background: var(--ce-light); position: relative; z-index: 2; }
.proof-stat { text-align: center; padding: 1.25rem .5rem; }
.proof-stat .number { font-size: 1.5rem; font-weight: 800; color: var(--ce-primary); display: block; }
.proof-stat .label { font-size: .85rem; color: var(--ce-text-muted); }

/* ═══ SECTIONS ═══ */
.section { padding: 5.5rem 0; }
.section-alt { background: var(--ce-light); }
.section-header {
  font-size: 2.1rem; font-weight: 800; color: var(--ce-dark);
  margin-bottom: .5rem; letter-spacing: -.02em;
}
.section-sub {
  color: var(--ce-text-muted); font-size: 1.08rem;
  max-width: 620px; margin: 0 auto 3rem; line-height: 1.7;
}

/* ═══ AUDIENCE ═══ */
.audience-card {
  border: 1px solid var(--ce-border); border-radius: var(--ce-radius-lg);
  background: var(--ce-card); box-shadow: var(--ce-shadow-sm);
  transition: var(--ce-transition); height: 100%;
}
.audience-card:hover { transform: translateY(-6px); box-shadow: var(--ce-shadow-lg); border-color: rgba(var(--ce-primary-rgb),.15); }
.audience-icon { font-size: 2.8rem; line-height: 1; }

/* ═══ FEATURES ═══ */
.feature-card {
  padding: 1.5rem; border-radius: var(--ce-radius);
  border: 1px solid transparent; transition: var(--ce-transition); height: 100%;
}
.feature-card:hover { background: var(--ce-card); box-shadow: var(--ce-shadow); border-color: var(--ce-border); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0; transition: var(--ce-transition);
}
.feature-card:hover .feature-icon { transform: scale(1.08); }

/* ═══ STEPS ═══ */
.step-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ce-primary), #7C3AED);
  color: #fff; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .8rem; box-shadow: var(--ce-shadow-primary); flex-shrink: 0;
}

/* ═══ PRICING ═══ */
.pricing-card {
  border: 2px solid var(--ce-border); border-radius: var(--ce-radius-lg);
  background: var(--ce-card); transition: var(--ce-transition); height: 100%;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-lg); }
.pricing-card.pro { border-color: var(--ce-primary); box-shadow: var(--ce-shadow-primary); }
.pricing-card.pro:hover { box-shadow: 0 12px 45px rgba(91,47,232,.22); }
.badge-pro {
  background: linear-gradient(135deg, var(--ce-primary), #7C3AED);
  color: #fff; font-size: .72rem; padding: .35rem .9rem; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}

/* ═══ TESTIMONIALS ═══ */
.testimonial-card {
  border: 1px solid var(--ce-border); border-radius: var(--ce-radius-lg);
  background: var(--ce-card); box-shadow: var(--ce-shadow-sm);
  transition: var(--ce-transition);
}
.testimonial-card:hover { box-shadow: var(--ce-shadow); }

/* ═══ FAQ ═══ */
.accordion-item { border: 1px solid var(--ce-border); border-radius: var(--ce-radius) !important; margin-bottom: .75rem; overflow: hidden; }
.accordion-button { font-weight: 600; font-size: .95rem; padding: 1.1rem 1.25rem; }
.accordion-button:not(.collapsed) { background: rgba(var(--ce-primary-rgb),.04); color: var(--ce-primary); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--ce-primary-rgb),.12); }

/* ═══ CTA FINAL ═══ */
.cta-final {
  background: linear-gradient(135deg, #4A22CC 0%, var(--ce-primary) 40%, #7C3AED 100%);
  color: #fff; position: relative; overflow: hidden;
}
.cta-final::before {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}

/* ═══ FOOTER ═══ */
.footer-ce { background: var(--ce-dark); color: rgba(255,255,255,.65); }
.footer-ce a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--ce-transition); }
.footer-ce a:hover { color: #fff; }
.footer-ce h6 { letter-spacing: .03em; }

/* ═══ LEGAL PAGES ═══ */
.legal-page h1 { font-size: 2rem; }
.legal-page h4 { font-size: 1.15rem; font-weight: 700; color: var(--ce-dark); margin-top: 2rem; margin-bottom: .75rem; }
.legal-page h4:first-of-type { margin-top: 0; }
.legal-page p, .legal-page li { font-size: .95rem; color: var(--ce-text-muted); line-height: 1.8; }
.legal-page ul { padding-left: 1.25rem; }

/* ═══ CONTACT ═══ */
.contact-card { border: none; border-radius: var(--ce-radius-lg); box-shadow: var(--ce-shadow); transition: var(--ce-transition); }
.contact-card:hover { box-shadow: var(--ce-shadow-lg); }

/* ═══ UTILITIES ═══ */
.text-ce { color: var(--ce-primary) !important; }
.bg-ce-soft { background: rgba(var(--ce-primary-rgb),.08); }
.bg-wa-soft { background: rgba(37,211,102,.08); }

/* ═══ SCROLL REVEAL ═══ */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease-out, transform .5s ease-out; }
.stagger.visible > *:nth-child(1) { transition-delay: .05s; }
.stagger.visible > *:nth-child(2) { transition-delay: .1s; }
.stagger.visible > *:nth-child(3) { transition-delay: .15s; }
.stagger.visible > *:nth-child(4) { transition-delay: .2s; }
.stagger.visible > *:nth-child(5) { transition-delay: .25s; }
.stagger.visible > *:nth-child(6) { transition-delay: .3s; }
.stagger.visible > *:nth-child(7) { transition-delay: .35s; }
.stagger.visible > *:nth-child(8) { transition-delay: .4s; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 767.98px) {
  .section { padding: 3.5rem 0; }
  .section-header { font-size: 1.6rem; }
  .section-sub { font-size: .98rem; margin-bottom: 2rem; }
  .hero h1 { font-size: 2rem; }
  .hero { padding: 4rem 0 3.5rem; }
  .phone-mock { max-width: 220px; }
  .proof-stat .number { font-size: 1.25rem; }
}