/*
Theme Name:   standpunkt Child Theme
Theme URI:    https://standpunkt.com
Description:  Child Theme für standpunkt digital – basiert auf Hello Elementor. Enthält das vollständige Brand Design System inkl. Typografie (Montserrat), Farbpalette, Sektions-Styles und Elementor Global Styles.
Author:       standpunkt digital GmbH & Co. KG
Author URI:   https://standpunkt.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  standpunkt-child
*/

/* ============================================================
   0. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   1. CSS CUSTOM PROPERTIES – BRAND DESIGN SYSTEM
   ============================================================ */
:root {
  /* Brand Colors */
  --sp-green:        #93C21F;
  --sp-green-dark:   #2E9A30;
  --sp-green-mid:    #639922;
  --sp-green-deep:   #173404;
  --sp-green-light:  #EAF3DE;

  /* Neutrals */
  --sp-black:        #111111;
  --sp-dark:         #1a1a1a;
  --sp-dark-2:       #0a0a0a;
  --sp-white:        #ffffff;
  --sp-gray:         #f5f5f2;
  --sp-gray-mid:     #e6e6e2;
  --sp-gray-dark:    #444444;

  /* Text */
  --sp-text:         #1a1a1a;
  --sp-text-muted:   #777777;
  --sp-text-light:   rgba(255,255,255,0.6);
  --sp-text-xlight:  rgba(255,255,255,0.4);

  /* Accent (Säule 2 / giveroo / Blue) */
  --sp-blue:         #185FA5;
  --sp-blue-light:   #E6F1FB;
  --sp-blue-mid:     #378ADD;

  /* Spacing Scale */
  --sp-section-pad:  5rem 3.5rem;
  --sp-section-pad-sm: 3rem 1.5rem;
  --sp-max-width:    1100px;

  /* Border Radius */
  --sp-radius-sm:    6px;
  --sp-radius-md:    10px;
  --sp-radius-lg:    14px;
  --sp-radius-xl:    20px;

  /* Shadows */
  --sp-shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --sp-shadow-md:    0 8px 24px rgba(0,0,0,0.08);
  --sp-shadow-lg:    0 16px 40px rgba(0,0,0,0.12);

  /* Transitions */
  --sp-transition:   all 0.2s ease;
  --sp-transition-slow: all 0.4s ease;
}

/* ============================================================
   2. BASE RESET & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sp-text);
  background-color: var(--sp-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--sp-text);
}

h1, .elementor-heading-title.elementor-size-xl { font-size: clamp(2.2rem, 4vw, 3.6rem); }
h2, .elementor-heading-title.elementor-size-xxl { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h3, .elementor-heading-title.elementor-size-large { font-size: clamp(1.3rem, 2vw, 1.8rem); }
h4 { font-size: 1.2rem; font-weight: 800; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.875rem; font-weight: 700; }

p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--sp-text);
}

a {
  color: var(--sp-green-mid);
  text-decoration: none;
  transition: var(--sp-transition);
}
a:hover { color: var(--sp-green); }

strong, b { font-weight: 700; }

/* ── Section Labels ── */
.sp-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-green-mid);
  margin-bottom: 1rem;
}
.sp-section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--sp-green);
  display: inline-block;
}

/* ============================================================
   3. ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */

/* Force Montserrat on all Elementor text */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor *,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-button .elementor-button,
.elementor-widget *,
.elementor * {
  font-family: 'Montserrat', sans-serif !important;
}

/* Elementor Section / Container defaults */
.elementor-section,
.e-container,
.elementor-container {
  max-width: var(--sp-max-width);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */

/* Primary Button */
.elementor-button,
.elementor-button-wrapper .elementor-button,
button,
input[type="submit"],
.wp-block-button__link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: var(--sp-radius-sm) !important;
  transition: var(--sp-transition) !important;
  cursor: pointer;
}

.elementor-button.sp-btn-primary,
.sp-btn-primary {
  background-color: var(--sp-green) !important;
  color: var(--sp-green-deep) !important;
  border: none !important;
  padding: 12px 24px !important;
}
.elementor-button.sp-btn-primary:hover,
.sp-btn-primary:hover {
  background-color: #a8d422 !important;
  transform: translateY(-1px);
}

.elementor-button.sp-btn-secondary,
.sp-btn-secondary {
  background-color: transparent !important;
  color: var(--sp-white) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 12px 24px !important;
}
.elementor-button.sp-btn-secondary:hover,
.sp-btn-secondary:hover {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
}

.elementor-button.sp-btn-dark,
.sp-btn-dark {
  background-color: var(--sp-green-deep) !important;
  color: var(--sp-white) !important;
  padding: 12px 26px !important;
}

/* ============================================================
   5. NAVIGATION (Hello Elementor Header)
   ============================================================ */
.site-header,
#site-header,
.elementor-location-header {
  background-color: rgba(17,17,17,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  height: 60px;
}

.site-branding .site-title,
.elementor-location-header .site-title a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--sp-white) !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
}

.main-navigation a,
.elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu--main a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.6) !important;
  transition: color 0.2s ease !important;
}
.main-navigation a:hover,
.elementor-nav-menu a:hover {
  color: var(--sp-green) !important;
}

/* ============================================================
   6. SECTION BACKGROUNDS
   ============================================================ */

/* Hero – Dark with green glow */
.sp-section-hero,
.elementor-section.sp-bg-hero {
  background-color: var(--sp-black) !important;
  position: relative;
  overflow: hidden;
}
.sp-section-hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(147,194,31,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Social Proof / Personas / light sections */
.sp-section-light,
.elementor-section.sp-bg-light {
  background-color: var(--sp-gray) !important;
}

/* White sections */
.sp-section-white,
.elementor-section.sp-bg-white {
  background-color: var(--sp-white) !important;
}

/* KI / dark sections */
.sp-section-dark,
.elementor-section.sp-bg-dark {
  background-color: var(--sp-black) !important;
}

/* Warum-Sektion / Brand Green */
.sp-section-green,
.elementor-section.sp-bg-green {
  background-color: var(--sp-green) !important;
}

/* CTA Sektion */
.sp-section-cta,
.elementor-section.sp-bg-cta {
  background-color: var(--sp-dark) !important;
}

/* Footer */
.site-footer,
.elementor-location-footer {
  background-color: var(--sp-dark-2) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   7. CARD COMPONENTS
   ============================================================ */

/* Base Card */
.sp-card {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem;
  transition: var(--sp-transition);
}
.sp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sp-shadow-md);
}

/* USP Card (dark bg) */
.sp-usp-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--sp-radius-lg);
  padding: 16px 18px;
  transition: var(--sp-transition);
}
.sp-usp-card:hover {
  background: rgba(147,194,31,0.06);
  border-color: rgba(147,194,31,0.2);
}

/* KI Card */
.sp-ki-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem;
  transition: var(--sp-transition);
  position: relative;
}
.sp-ki-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sp-green);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
}
.sp-ki-card:hover {
  background: rgba(147,194,31,0.05);
  border-color: rgba(147,194,31,0.2);
}
.sp-ki-card:hover::after { opacity: 1; }

/* Stat Card */
.sp-stat-card {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem;
  text-align: left;
}
.sp-stat-card .sp-stat-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--sp-green-mid);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.sp-stat-card .sp-stat-label {
  font-size: 12px;
  color: var(--sp-text-muted);
  font-weight: 500;
}

/* Persona Card */
.sp-persona-card {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-xl);
  overflow: hidden;
  transition: var(--sp-transition);
}
.sp-persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-lg);
}

/* Reference Card */
.sp-ref-card {
  background: var(--sp-gray);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-lg);
  padding: 1.75rem;
  transition: var(--sp-transition);
}
.sp-ref-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Warum / USP Card (auf grünem Hintergrund) */
.sp-warum-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(23,52,4,0.08);
  border-radius: var(--sp-radius-lg);
  padding: 1.75rem;
}
.sp-warum-card .sp-warum-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--sp-green-mid);
  opacity: 0.45;
  line-height: 1;
  margin-bottom: 10px;
}

/* CTA Option Card */
.sp-cta-opt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem 2rem;
  cursor: pointer;
  transition: var(--sp-transition);
  text-align: left;
}
.sp-cta-opt:hover {
  border-color: var(--sp-green);
  background: rgba(147,194,31,0.06);
}

/* ============================================================
   8. LEISTUNGS-PILLARS
   ============================================================ */

/* Pillar Header – Grün (Säule 1) */
.sp-pillar-head-green {
  background: var(--sp-green) !important;
  padding: 1.75rem 2rem;
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
}
.sp-pillar-head-green .elementor-heading-title,
.sp-pillar-head-green h2,
.sp-pillar-head-green h3 {
  color: var(--sp-green-deep) !important;
  letter-spacing: -0.02em;
}
.sp-pillar-head-green p { color: rgba(23,52,4,0.65) !important; }

/* Pillar Header – Dunkel (Säule 2) */
.sp-pillar-head-dark {
  background: var(--sp-dark) !important;
  padding: 1.75rem 2rem;
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
}
.sp-pillar-head-dark .elementor-heading-title,
.sp-pillar-head-dark h2,
.sp-pillar-head-dark h3 {
  color: var(--sp-white) !important;
  letter-spacing: -0.02em;
}
.sp-pillar-head-dark p { color: rgba(255,255,255,0.45) !important; }

/* giveroo Product Badge */
.sp-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(147,194,31,0.18);
  border: 1px solid rgba(147,194,31,0.3);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--sp-green);
  letter-spacing: 0.04em;
  margin-top: 12px;
}

/* KI Highlight Box */
.sp-ki-box {
  background: linear-gradient(135deg, #111 0%, #1a2d10 100%);
  border: 1px solid rgba(147,194,31,0.2);
  border-radius: var(--sp-radius-md);
  padding: 1.25rem;
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
}
.sp-ki-box .sp-ki-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--sp-green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sp-ki-box .elementor-heading-title,
.sp-ki-box h4 {
  color: var(--sp-white) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.sp-ki-box p { color: rgba(255,255,255,0.55) !important; font-size: 12px !important; }

/* ============================================================
   9. PILLS / BADGES / CHIPS
   ============================================================ */

.sp-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
}
.sp-chip-active {
  border-color: rgba(147,194,31,0.45) !important;
  color: var(--sp-green) !important;
}

.sp-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}
.sp-pill-green { background: rgba(147,194,31,0.1); color: var(--sp-green-mid); }
.sp-pill-blue  { background: rgba(24,95,165,0.08); color: var(--sp-blue); }
.sp-pill-purple{ background: rgba(83,74,183,0.08); color: #534AB7; }

/* Logo Pills */
.sp-logo-pill {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-sm);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-gray-dark);
  display: inline-block;
}

/* Cert Badge */
.sp-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-sm);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
}
.sp-cert-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sp-green);
  flex-shrink: 0;
}

/* Sector Tags */
.sp-tag-sw  { background: rgba(147,194,31,0.1); color: var(--sp-green-mid); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.sp-tag-ba  { background: rgba(24,95,165,0.08); color: var(--sp-blue);      font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.sp-tag-ki  { background: rgba(147,194,31,0.15); color: var(--sp-green-mid); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }

/* Pretag / animated pill */
.sp-pretag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(147,194,31,0.35);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--sp-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  width: fit-content;
}
.sp-pretag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--sp-green);
  border-radius: 50%;
  animation: sp-pulse 2s infinite;
}
@keyframes sp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ============================================================
   10. TYPOGRAPHY HELPERS
   ============================================================ */

/* H2 on dark background */
.sp-h2-white,
.sp-section-dark h2,
.sp-section-hero h2 {
  color: var(--sp-white) !important;
}
.sp-h2-white em,
.sp-h2-green em {
  color: var(--sp-green) !important;
  font-style: normal !important;
}

/* H2 on green background */
.sp-h2-deepgreen,
.sp-section-green h2 {
  color: var(--sp-green-deep) !important;
}

/* Muted text */
.sp-text-muted  { color: var(--sp-text-muted) !important; }
.sp-text-green  { color: var(--sp-green-mid) !important; }
.sp-text-white  { color: var(--sp-white) !important; }
.sp-text-xlight { color: rgba(255,255,255,0.45) !important; }
.sp-text-deep   { color: var(--sp-green-deep) !important; }

/* Persona pain point quote */
.sp-pain-box {
  background: var(--sp-gray);
  border-left: 3px solid var(--sp-green);
  border-radius: var(--sp-radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
.sp-pain-box p {
  font-size: 12px !important;
  font-style: italic;
  color: var(--sp-text) !important;
  line-height: 1.55 !important;
}

/* Result row in ref cards */
.sp-result-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-green-mid);
  padding-top: 1rem;
  border-top: 1px solid var(--sp-gray-mid);
  margin-top: 1rem;
}
.sp-result-row::before { content: '↑'; font-size: 14px; }

/* Testimonial */
.sp-testimonial {
  background: var(--sp-gray);
  border: 1px solid var(--sp-gray-mid);
  border-radius: var(--sp-radius-lg);
  padding: 1.25rem 1.5rem;
}
.sp-testimonial .sp-quote {
  font-size: 13px;
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.sp-testimonial .sp-quote::before {
  content: '"';
  font-size: 1.5rem;
  color: var(--sp-green);
  line-height: 0;
  vertical-align: -6px;
  margin-right: 3px;
}

/* Claim Block */
.sp-claim-block {
  background: var(--sp-green-deep) !important;
  border-radius: var(--sp-radius-lg) !important;
  padding: 2.5rem !important;
}
.sp-claim-block .elementor-heading-title,
.sp-claim-block h3 {
  color: var(--sp-white) !important;
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
}
.sp-claim-block h3 em { color: var(--sp-green) !important; font-style: normal !important; }

/* ============================================================
   11. LIST ITEMS (Leistungsbereich)
   ============================================================ */
.sp-leist-list { list-style: none; padding: 0; margin: 0; }
.sp-leist-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--sp-gray-mid);
  font-size: 13px;
}
.sp-leist-list li:last-child { border-bottom: none; }
.sp-leist-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sp-green-mid);
  flex-shrink: 0;
  margin-top: 7px;
}
.sp-leist-list.sp-blue li::before { background: var(--sp-blue); }

/* ============================================================
   12. SCROLL REVEAL ANIMATION
   ============================================================ */
.sp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.sp-reveal.sp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   13. HERO LOGOS BAR
   ============================================================ */
.sp-logos-bar {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.5rem 3.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  background: transparent;
}
.sp-logos-bar .sp-logos-lbl {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-logos-bar .sp-logo-item {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}

/* ============================================================
   14. FOOTER STYLES
   ============================================================ */
.sp-footer-logo {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--sp-white) !important;
  letter-spacing: -0.5px;
}
.sp-footer-col-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.5) !important;
  font-weight: 400;
  display: block;
  margin-bottom: 9px;
  transition: color 0.2s;
}
.sp-footer-links a:hover { color: var(--sp-green) !important; }
.sp-footer-links a.sp-product-link { color: var(--sp-green) !important; font-weight: 600; }
.sp-copy { font-size: 12px; color: rgba(255,255,255,0.25); }
.sp-legal a { font-size: 12px; color: rgba(255,255,255,0.25); }
.sp-legal a:hover { color: rgba(255,255,255,0.5); }

/* ============================================================
   15. ELEMENTOR SPECIFIC WIDGET OVERRIDES
   ============================================================ */

/* Icon Box Widget */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Image Box Widget */
.elementor-widget-image-box .elementor-image-box-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* Button Widget */
.elementor-widget-button .elementor-button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Divider Widget */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--sp-gray-mid) !important;
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --sp-max-width: 100%; }
}

@media (max-width: 768px) {
  :root {
    --sp-section-pad: 3rem 1.5rem;
  }

  h1, .elementor-heading-title.elementor-size-xl { font-size: 2rem; }
  h2, .elementor-heading-title.elementor-size-xxl { font-size: 1.6rem; }

  .sp-logos-bar { padding: 1.25rem 1.5rem; gap: 1.25rem; }

  .sp-claim-block { padding: 1.75rem !important; }
  .sp-claim-block .elementor-heading-title { font-size: 1.2rem !important; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .sp-stat-card .sp-stat-num { font-size: 1.8rem; }
}