/* ============================================
   Components - Buttons, Cards, Forms
   ============================================ */

/* ===== BUTTONS ===== */

/* Primary Button (Get Started) - EXACT FIGMA SPECIFICATIONS */
.btn-primary,
.btn-primary-large {
  background: #ffffff; /* EXACT: WHITE background */
  color: #0a0b0c; /* EXACT: BLACK text */
  border: none;
  padding: 8px 20px; /* EXACT: 8px vertical, 20px horizontal */
  border-radius: 100px; /* EXACT: fully rounded */
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500; /* EXACT: Medium */
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
}

.btn-primary:hover,
.btn-primary-large:hover {
  background: #f5f5f5; /* Subtle hover effect */
}

.btn-primary:focus,
.btn-primary-large:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary-large {
  padding: 10px 24px;
  font-size: var(--text-regular);
  width: 200px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Secondary Button (Login) - EXACT FIGMA SPECIFICATIONS */
.btn-secondary,
.btn-secondary-large {
  background: rgba(255, 255, 255, 0.1); /* Glass effect background */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle glass border */
  padding: 8px 20px; /* EXACT: 8px vertical, 20px horizontal */
  border-radius: 100px; /* EXACT: fully rounded */
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500; /* EXACT: Medium */
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px);
}

.btn-secondary:hover,
.btn-secondary-large:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:focus,
.btn-secondary-large:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.btn-secondary-large {
  padding: 10px 24px;
  font-size: var(--text-regular);
  width: 200px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Phone Button - EXACT FIGMA SPECIFICATIONS */
.btn-phone {
  display: flex;
  align-items: center;
  gap: 8px; /* EXACT: 8px between icon and text */
  padding: 8px 20px; /* EXACT: 8px vertical, 20px horizontal */
  background: transparent;
  color: #ffffff;
  border: 1px solid transparent; /* EXACT: transparent border */
  border-radius: 100px; /* EXACT: fully rounded */
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500; /* EXACT: Medium */
  font-size: 16px; /* EXACT: 16px */
  line-height: 1.5;
  transition: all 200ms ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn-phone:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-phone .phone-icon {
  width: 24px; /* EXACT: 24px */
  height: 24px; /* EXACT: 24px */
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  display: block;
}

.btn-phone .phone-text {
  white-space: nowrap;
  display: block;
}

/* White Button (for dark backgrounds) */
.btn-white {
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-white);
  padding: 10px 24px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-regular);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.btn-white:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* White Outline Button (for dark backgrounds) */
.btn-white-outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 10px 24px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-regular);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-white-outline:hover {
  background: var(--color-white-10);
  transform: scale(1.05);
}

.btn-white-outline:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ===== CARDS ===== */

/* Feature Card */
.feature-card {
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-white-20);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-card .feature-icon {
  margin-bottom: var(--space-md);
}

.feature-card h3 {
  font-size: 24px;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.feature-card p {
  font-size: var(--text-regular);
  color: var(--color-gray-light);
  line-height: var(--line-height-relaxed);
}

/* How Card */
.how-card {
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.how-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.how-card .how-icon {
  margin: 0 auto var(--space-md);
}

.how-card h3 {
  font-size: 24px;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.how-card p {
  font-size: var(--text-regular);
  color: var(--color-gray-light);
  line-height: var(--line-height-relaxed);
}

/* Stat Card */
.stat-card {
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-white-20);
  transform: translateY(-4px);
}

.stat-card .stat-number {
  font-size: 104px;
  font-weight: var(--font-bold);
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--color-primary) 0%, #6b9dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card .stat-label {
  font-size: var(--text-large);
  color: var(--color-gray-light);
}

/* Testimonial Card */
.testimonial-card {
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: all var(--transition-base);
  height: 100%;
}

.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-white-20);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-card .testimonial-logo {
  height: 40px;
  width: auto;
}

.testimonial-card .testimonial-quote {
  font-size: var(--text-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-white);
  font-style: italic;
  flex-grow: 1;
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-card .author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card .author-name {
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-white);
  line-height: 1.3;
}

.testimonial-card .author-position {
  font-size: var(--text-small);
  color: var(--color-gray-light);
  line-height: 1.3;
}

/* ===== FORMS ===== */

/* Newsletter Form */
.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 20px;
  background: #0A0B0C;
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--text-regular);
  transition: all var(--transition-base);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--color-gray-light);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #0A0B0C;
}

.newsletter-form input[type="email"].error {
  border-color: #ff4444;
}

.newsletter-form button {
  padding: 12px 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  font-size: var(--text-regular);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.newsletter-form button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.newsletter-disclaimer {
  font-size: var(--text-small);
  color: var(--color-gray-light);
  line-height: var(--line-height-relaxed);
}

.newsletter-disclaimer a {
  color: var(--color-primary);
  text-decoration: underline;
}

.newsletter-disclaimer a:hover {
  color: var(--color-primary-dark);
}

/* ===== AVATAR GROUP ===== */

.avatar-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.avatar-group .avatars-combined {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

.avatar-group .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--color-black);
  object-fit: cover;
  margin-left: -12px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group .avatar.avatar-with-stroke {
  border: none;
  object-fit: contain;
  padding: 2px;
}

/* ===== ACCORDION ===== */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.accordion-item:hover {
  border-color: var(--color-white-20);
}

.accordion-item.active {
  border-color: var(--color-primary);
  background: rgba(15, 90, 215, 0.05);
}

.accordion-question {
  width: 100%;
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  text-align: left;
  font-size: var(--text-large);
  font-weight: var(--font-medium);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-base);
}

.accordion-question:hover {
  color: var(--color-primary);
}

.accordion-question span {
  flex: 1;
}

.accordion-icon {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-gray-light);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.accordion-item.active .accordion-answer {
  max-height: 500px;
}

.accordion-answer p {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-light);
}