/* =========================================
   NAVBAR
   ========================================= */
.announcement-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: white;
  text-align: center;
  padding: 0.5rem var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.announcement-bar .container { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.announcement-bar__link { text-decoration: underline; font-weight: var(--font-semibold); }

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--navbar-height);
  transition: all var(--transition-base);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.navbar__inner { display: flex; align-items: center; gap: var(--space-8); height: 100%; }

.navbar__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.navbar__logo-text { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); }
.navbar__logo-mark img { height: 40px; width: auto; }
.navbar__logo-wordmark { height: 26px; width: auto; }

.navbar__nav { flex: 1; }
.navbar__menu { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.navbar__item { position: relative; }
.navbar__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.navbar__link:hover, .navbar__link.active { color: var(--color-primary); background: var(--color-primary-bg); }

.navbar__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  z-index: 100;
}
.navbar__item--dropdown:hover .navbar__dropdown { display: block; }
.navbar__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}
.navbar__dropdown-item:hover { background: var(--color-border-light); }
.navbar__dropdown-item strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.navbar__dropdown-item span  { display: block; font-size: var(--text-xs); color: var(--color-text-soft); }
.navbar__dropdown-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }

.navbar__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.navbar__avatar img { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; }

.navbar__hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); }
.navbar__hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all var(--transition-base); }

.navbar__mobile { display: none; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.navbar__mobile-menu { list-style: none; }
.navbar__mobile-menu li a { display: block; padding: var(--space-3) var(--space-6); font-weight: var(--font-medium); color: var(--color-text); border-bottom: 1px solid var(--color-border-light); }
.navbar__mobile-actions { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

/* Adjust body for fixed navbar */
body { padding-top: var(--navbar-height); }
.announcement-bar ~ .navbar { top: 40px; }
body:has(.announcement-bar) { padding-top: calc(var(--navbar-height) + 40px); }

@media (max-width: 1024px) {
  .navbar__nav, .navbar__actions .btn:first-child { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__mobile.open { display: block; }
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #F8F7FF 0%, #F0FDF9 100%);
  overflow: hidden;
}
.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(91,79,207,0.07) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(16,185,129,0.07) 0%, transparent 50%);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-20);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-6);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.hero__badge:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.hero__title { margin-bottom: var(--space-5); }
.hero__title-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.hero__social-proof { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-secondary); }
.hero__avatars { display: flex; }
.hero__avatars img { width: 36px; height: 36px; border-radius: var(--radius-full); border: 2px solid white; margin-right: -10px; object-fit: cover; }
.hero__visual { position: relative; }
.hero__card-stack { position: relative; height: 480px; }
.hero__illustration { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero__svg { width: 100%; max-width: 360px; }

.hero__floating-card {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 10;
  animation: float 3s ease-in-out infinite;
  font-size: var(--text-sm);
}
.hero__floating-card--top    { top: 10%; right: 0; }
.hero__floating-card--bottom { bottom: 15%; left: 0; }
.hero__floating-card--right  { top: 45%; right: -20px; animation-delay: 1s; }
.hero__floating-icon { font-size: 1.5rem; }
.hero__floating-card strong  { display: block; font-weight: var(--font-semibold); color: var(--color-text); }
.hero__floating-card span    { font-size: var(--text-xs); color: var(--color-text-soft); }
.hero__floating-value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-secondary); }
.hero__floating-trend { display: flex; align-items: center; gap: 4px; color: var(--color-secondary); font-weight: var(--font-semibold); font-size: var(--text-xs); margin-left: auto; }
.hero__floating-avatars { display: flex; margin-top: 4px; }
.hero__floating-avatars img { width: 24px; height: 24px; border-radius: var(--radius-full); border: 1.5px solid white; margin-right: -6px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
}

/* =========================================
   TRUST BAR
   ========================================= */
.trust-bar { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-6) 0; }
.trust-bar__grid { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.trust-bar__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.trust-bar__icon { font-size: 1.5rem; }
.trust-bar__value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); }
.trust-bar__label { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* =========================================
   PILLARS
   ========================================= */
.pillars__grid { align-items: stretch; }
.pillars__card { display: flex; flex-direction: column; }
.pillars__card--featured { background: var(--color-primary); color: white; }
.pillars__card--featured .pillars__desc { opacity: 0.85; }
.pillars__card--featured .pillars__list { opacity: 0.9; }
.pillars__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.pillars__icon--purple { background: var(--color-primary-bg); color: var(--color-primary); }
.pillars__icon--green  { background: var(--color-secondary-bg); color: var(--color-secondary); }
.pillars__icon--white  { background: rgba(255,255,255,0.2); color: white; }
.pillars__badge { position: absolute; top: var(--space-4); right: var(--space-4); }
.pillars__card { position: relative; }
.pillars__title { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); }
.pillars__desc  { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); flex: 1; color: inherit; opacity: 0.8; }
.pillars__list  { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); margin-bottom: var(--space-6); opacity: 0.85; }
.pillars__cta   { margin-top: auto; }

/* =========================================
   STEPS (HOW IT WORKS)
   ========================================= */
.bg-light { background: var(--color-bg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  position: relative;
}
.steps__number {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: var(--font-extrabold);
  margin-bottom: var(--space-5);
  position: relative; z-index: 1;
}
.steps__number--purple { background: var(--color-primary-bg);   color: var(--color-primary); }
.steps__number--green  { background: var(--color-secondary-bg); color: var(--color-secondary-dark); }
.steps__number--amber  { background: var(--color-accent-bg);    color: var(--color-accent-dark); }
.steps__icon { display: none; }
.steps__title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-3); }
.steps__desc  { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.steps__arrow {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-text-soft);
  z-index: 2;
}
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps__arrow { display: none; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
}

/* =========================================
   WEBINAR CARDS
   ========================================= */
.webinar-card__thumb { position: relative; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
.webinar-card__img { width: 100%; height: 200px; object-fit: cover; }
.webinar-card__live-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.webinar-card__body { padding-top: var(--space-4); }
.webinar-card__title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin: var(--space-3) 0 var(--space-2); line-height: var(--leading-snug); }
.webinar-card__title a { color: inherit; text-decoration: none; }
.webinar-card__title a:hover { color: var(--color-primary); }
.webinar-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.webinar-card__meta { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-4); flex-wrap: wrap; }
.webinar-card__date, .webinar-card__quota { display: flex; align-items: center; gap: var(--space-1); }
.webinar-card__footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); margin-top: auto; }
.webinar-card__price-value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); }

/* =========================================
   PRICING CARDS
   ========================================= */
.pricing-card { position: relative; overflow: hidden; transition: all var(--transition-base); }
.pricing-card--popular {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-xl);
  transform: scale(1.03);
}
.pricing-card__popular-badge { text-align: center; margin-bottom: var(--space-4); }
.pricing-card__header { margin-bottom: var(--space-6); }
.pricing-card__name   { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.pricing-card__desc   { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pricing-card__price  { margin-top: var(--space-5); display: flex; align-items: baseline; gap: var(--space-1); }
.pricing-card__currency { font-size: var(--text-sm); color: var(--color-text-soft); }
.pricing-card__amount   { font-size: var(--text-4xl); font-weight: var(--font-extrabold); color: var(--color-text); }
.pricing-card__period   { font-size: var(--text-sm); color: var(--color-text-soft); }
.pricing-card__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.pricing-card__features li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }

/* =========================================
   TESTIMONIALS
   ========================================= */
.testimonials__card { display: flex; flex-direction: column; }
.testimonials__stars { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.testimonials__text  { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); flex: 1; font-style: italic; margin-bottom: var(--space-5); }
.testimonials__author { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); margin-top: auto; flex-wrap: wrap; }
.testimonials__avatar img { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; }
.testimonials__name { display: block; font-weight: var(--font-semibold); font-size: var(--text-sm); }
.testimonials__role { display: block; font-size: var(--text-xs); color: var(--color-text-soft); }
.testimonials__package { margin-left: auto; }

/* =========================================
   FAQ
   ========================================= */
.faq__list { display: flex; flex-direction: column; gap: 0; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  gap: var(--space-4);
}
.faq__question:hover { color: var(--color-primary); }
.faq__icon { flex-shrink: 0; transition: transform var(--transition-base); }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__answer { padding-bottom: var(--space-5); }
.faq__answer p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.faq__more { margin-top: var(--space-8); color: var(--color-text-secondary); }

/* =========================================
   FOOTER
   ========================================= */
.footer { background: #0F172A; color: var(--color-text-white); }
.footer-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  padding: var(--space-16) 0;
}
.footer-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.footer-cta__title { font-size: var(--text-3xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); color: white; }
.footer-cta__desc  { color: rgba(255,255,255,0.8); }
.footer-cta__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; flex-shrink: 0; }

.footer__main { padding: var(--space-16) 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-12); }
.footer__logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-5); }
.footer__tagline { font-size: var(--text-sm); color: rgba(255,255,255,0.6); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); max-width: 280px; }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social-link {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition-base);
}
.footer__social-link:hover { background: var(--color-primary); color: white; }
.footer__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: rgba(255,255,255,0.9); margin-bottom: var(--space-5); letter-spacing: 0.05em; text-transform: uppercase; }
.footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__list a { font-size: var(--text-sm); color: rgba(255,255,255,0.6); transition: color var(--transition-fast); text-decoration: none; }
.footer__list a:hover { color: white; }
.footer__newsletter p { font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--space-4); }
.footer__form { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.footer__form .form-input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; }
.footer__form .form-input::placeholder { color: rgba(255,255,255,0.4); }
.footer__trust { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: rgba(255,255,255,0.4); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-6) 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: rgba(255,255,255,0.4); }
.footer__bottom a { color: rgba(255,255,255,0.4); transition: color var(--transition-fast); text-decoration: none; }
.footer__bottom a:hover { color: white; }
.footer__bottom-links { display: flex; gap: var(--space-6); }

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer-cta__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .footer__bottom-links { flex-wrap: wrap; justify-content: center; }
}