/* ════════════════════════════════════════════════════════════════
   IVO / Internetivo — Website Builder section overrides
   Appends BELOW your existing clientarea CSS (no conflicts).
   ════════════════════════════════════════════════════════════════
   Deploy: WHMCS Admin → Addons → RS Themes → Lagom → Style Manager →
           Custom CSS → paste this block at the BOTTOM of what's there.
   Rollback: delete from `IVO MARKETING SECTIONS — START` to `— END`.

   What this touches:   only Website Builder homepage sections
                        (.section-banner-default, .section-features,
                         .section-stats, .section-testimonials,
                         .section-faq, .section-cta, .section-product-*)
   What this does NOT touch:
     - .lagom-layout-*, .sticky-navigation, .app-nav-menu
     - .invoice, .client-avatar, .panel, .sidebar, .sidebarelement
     - .infobar1, .task-status, .card, .card-body, .card-category, .searchbox
     - .table, .progress, .form-control
   (i.e. everything in your existing clientarea CSS is preserved)

   Design tokens MATCH YOUR EXISTING CSS:
     - 12px radius for cards (matches .feature.is-bordered)
     - 25px radius for buttons (matches your .btn rule)
     - Shadow: 2px 1px 1px 1px #d4d8ff69 (matches your card shadow)
     - Primary blue #2563eb
   ════════════════════════════════════════════════════════════════ */

/* ──────────── IVO MARKETING SECTIONS — START ──────────── */

/* ─── 1. TOKENS (scoped to marketing sections only) ─── */
.cms-page,
.cms-section,
[class*="section-banner-"],
[class*="section-features"],
[class*="section-stats"],
[class*="section-testimonials"],
[class*="section-faq"],
[class*="section-cta"],
[class*="section-product-"],
[class*="section-contact-form"] {
  --ivo-blue:       #2563eb;
  --ivo-blue-hover: #1d4ed8;
  --ivo-blue-light: #60a5fa;
  --ivo-blue-bg:    #e8f0fe;
  --ivo-teal:       #0d9488;
  --ivo-ink:        #0f1115;
  --ivo-ink2:       #3b4049;
  --ivo-ink3:       #6a707b;
  --ivo-soft-shadow: 2px 1px 1px 1px #d4d8ff69;
  --ivo-lift-shadow: 0 12px 32px #d4d8ff69, 2px 1px 1px 1px #d4d8ff69;
}

/* ─── 2. TYPOGRAPHY (homepage sections only) ─── */
.cms-section h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; }
.cms-section h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.cms-section .section-caption,
.cms-section .caption {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ivo-blue);
}
.cms-section .section-subtitle {
  font-size: 18px; color: var(--ivo-ink2); line-height: 1.6;
}

/* ─── 3. BANNER DEFAULT (hero) ─── */
.section-banner-default,
.banner-default,
[class*="section-banner-"] {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #0f1b3d 0%, #080c1a 50%, #000 100%);
  color: #fff;
  padding: 120px 0 72px;
  position: relative;
  overflow: hidden;
}
.section-banner-default::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, rgba(37,99,235,.08), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(13,148,136,.06), transparent 50%);
}
.section-banner-default h1 { color: #fff; }
.section-banner-default .section-caption {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 12px;
  background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.25);
  font-size: 13px; font-weight: 500; color: var(--ivo-blue-light);
  text-transform: none; letter-spacing: 0; margin-bottom: 24px;
}
.section-banner-default .section-subtitle { color: rgba(255,255,255,.72); }

/* ─── 4. FEATURES (already uses your .feature.is-bordered style — just enhance) ─── */
.section-features .feature,
.section-features .feature-item {
  /* inherits border-radius: 12px + soft shadow from your existing .feature.is-bordered */
  padding: 28px 24px;
  transition: transform .2s, box-shadow .3s;
}
.section-features .feature:hover,
.section-features .feature-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ivo-lift-shadow);
}
.section-features .feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--ivo-blue-bg); color: var(--ivo-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.section-features .feature-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; }
.section-features .feature-description { font-size: 14px; color: var(--ivo-ink2); line-height: 1.6; }

/* ─── 5. STATS ─── */
.section-stats .stat-value {
  font-size: 44px; font-weight: 800; letter-spacing: -1.2px; line-height: 1;
  color: var(--ivo-ink);
}
.section-stats .stat-value sup,
.section-stats .stat-value .accent { color: var(--ivo-blue); }
.section-stats .stat-label {
  font-size: 12px; color: var(--ivo-ink3); margin-top: 8px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}

/* ─── 6. TESTIMONIALS ─── */
.section-testimonials .testimonial-item {
  /* match .feature.is-bordered treatment */
  border-radius: 12px;
  box-shadow: var(--ivo-soft-shadow);
  padding: 28px 24px;
}
.section-testimonials .testimonial-stars { color: #fbbf24; letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; }
.section-testimonials .testimonial-text { font-size: 15px; color: var(--ivo-ink2); line-height: 1.7; margin-bottom: 18px; }
.section-testimonials .testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ivo-blue-bg); color: var(--ivo-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

/* ─── 7. FAQ ─── */
.section-faq .faq-item {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 18px 0;
}
.section-faq .faq-question {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; font-size: 17px; font-weight: 600; color: var(--ivo-ink);
  cursor: pointer;
}
.section-faq .faq-question::after {
  content: '+'; width: 28px; height: 28px; border-radius: 12px;
  background: rgba(0,0,0,.04); color: var(--ivo-ink2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300;
  transition: transform .2s, background .2s, color .2s;
  flex-shrink: 0;
}
.section-faq .faq-item.open .faq-question::after {
  content: '×'; background: var(--ivo-blue); color: #fff; transform: rotate(45deg);
}

/* ─── 8. CTA ─── */
.section-cta {
  text-align: center;
  padding: 96px 0;
  position: relative;
}
.section-cta::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(37,99,235,.06), transparent 70%);
  pointer-events: none;
}
.section-cta h2 {
  position: relative; z-index: 1;
  margin-bottom: 16px;
}

/* ─── 9. BUTTONS inside marketing sections ─── */
/* Respects your .btn { border-radius:25px } rule — just adjusts color variants */
.cms-section .btn-primary,
.cms-section a.btn-primary {
  background: var(--ivo-blue); color: #fff; border-color: var(--ivo-blue);
}
.cms-section .btn-primary:hover {
  background: var(--ivo-blue-hover); border-color: var(--ivo-blue-hover);
  box-shadow: 0 8px 24px rgba(37,99,235,.22);
  transform: translateY(-1px);
}
.section-banner-default .btn-primary {
  /* On the dark hero — use white-on-dark pattern */
  background: #fff; color: #000; border-color: #fff;
}
.section-banner-default .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(255,255,255,.2);
}
.section-banner-default .btn-secondary,
.section-banner-default .btn-default {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}

/* ─── 10. PRODUCT GROUPS (pricing cards) ─── */
.section-product-groups .product-group,
.section-products .product-item {
  border-radius: 12px;
  box-shadow: var(--ivo-soft-shadow);
  padding: 32px 28px;
  position: relative;
  transition: transform .2s, box-shadow .3s;
}
.section-product-groups .product-group:hover {
  transform: translateY(-4px);
  box-shadow: var(--ivo-lift-shadow);
}
.section-product-groups .product-group.featured,
.section-product-groups .product-group.highlighted,
.section-product-groups .product-group.is-featured {
  border: 1px solid var(--ivo-blue);
  box-shadow: 0 0 0 1px var(--ivo-blue), 0 12px 32px #d4d8ff99;
}
.section-product-groups .product-badge,
.section-product-groups .featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; background: var(--ivo-blue-hover); color: #fff;
  border-radius: 25px; font-size: 12px; font-weight: 600;
}
.section-product-groups .product-price {
  font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1;
}

/* ─── 11. PRODUCT COMPARISON TABLE ─── */
/* Harmonizes with your table radius treatment */
.section-product-comparison table { border-collapse: collapse; font-size: 14px; }
.section-product-comparison thead th.featured-col,
.section-product-comparison td.featured-col { background: rgba(37,99,235,.04); }
.section-product-comparison tr.group-header td {
  background: rgba(0,0,0,.03); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--ivo-ink2); padding: 8px 20px;
}

/* ─── 12. CONTACT FORM (marketing page, not clientarea contact) ─── */
.section-contact-form .form-group label {
  font-size: 13px; font-weight: 600; color: var(--ivo-ink2); margin-bottom: 6px; display: block;
}
/* Your existing .form-control rule already covers input styling at font-size:14px */

/* ─── 13. SECTION BACKGROUNDS (Common settings — Primary/Secondary/Gray) ─── */
.cms-section--primary,
[data-section-style="primary"],
.section--primary {
  background: radial-gradient(ellipse 70% 50% at 50% 30%, #0f1b3d 0%, #080c1a 70%);
  color: #fff;
}
.cms-section--primary h1,
.cms-section--primary h2,
.cms-section--primary h3 { color: #fff; }
.cms-section--primary .section-subtitle { color: rgba(255,255,255,.72); }
.cms-section--primary .section-caption { color: var(--ivo-blue-light); }

.cms-section--gray,
[data-section-style="gray"] { background: #f8f8f6; }

/* ─── 14. REDUCED MOTION RESPECT ─── */
@media (prefers-reduced-motion: reduce) {
  .section-features .feature,
  .section-product-groups .product-group,
  .section-testimonials .testimonial-item,
  .cms-section .btn {
    transition: none !important;
    transform: none !important;
  }
}

/* ──────────── IVO MARKETING SECTIONS — END ──────────── */