:root {

  
  --color-bg:              #143a2e;   
  --color-bg-dark:         #0e2b22;   
  --color-bg-light:        #1f5a47;   
  --color-bg-surface:      rgba(255, 255, 255, 0.08);  
  --color-bg-surface-hover: rgba(255, 255, 255, 0.12); 

  
  --color-orange:          #e9511b;
  --color-orange-text:     #e9511b;   
  --color-orange-dark:     #e9540d;   
  --color-orange-light:    rgba(233, 81, 27, 0.15);  
  --color-orange-glow:     rgba(233, 81, 27, 0.40);  

  
  --color-text-primary:    #FFFFFF;                    
  --color-text-secondary:  rgba(255, 255, 255, 0.85);  
  --color-text-muted:      rgba(255, 255, 255, 0.70);  
  --color-text-faint:      rgba(255, 255, 255, 0.60);  
  --color-text-orange:     #e9511b;

  
  --color-border-subtle:   rgba(255, 255, 255, 0.10);  
  --color-border-light:    rgba(255, 255, 255, 0.25);  
  --color-border-medium:   rgba(255, 255, 255, 0.40);  
  --color-border-orange:   #e9511b;                    
  --color-border-orange-subtle: rgba(233, 81, 27, 0.30); 

  
  --color-live-dot:        #4CAF50;   
  --color-footer-bg:       #143a2e;   
  --color-header-scrolled: rgba(14, 42, 33, 0.82);  

  
  --color-overlay-menu:    rgba(14, 42, 33, 0.82);  
  --color-overlay-dark:    rgba(0, 0, 0, 0.20);    

}

:root {

  
  --font-family:           'Montserrat', Helvetica, Arial, sans-serif;
  --font-family-fallback:  Helvetica, Arial, sans-serif;

  
  --font-size-xs:          11px;   
  --font-size-sm:          13px;   
  --font-size-base:        14px;   
  --font-size-md:          15px;   
  --font-size-lg:          17px;   
  --font-size-xl:          18px;   
  --font-size-2xl:         20px;   
  --font-size-3xl:         22px;   
  --font-size-4xl:         28px;   
  --font-size-5xl:         36px;   
  --font-size-6xl:         48px;   
  --font-size-7xl:         56px;   
  --font-size-hero:        clamp(28px, 3.6vw, 46px);  

  
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  
  --line-height-tight:     1.1;    
  --line-height-snug:      1.2;    
  --line-height-normal:    1.4;    
  --line-height-relaxed:   1.5;    
  --line-height-loose:     1.6;    

  
  --letter-spacing-tight:  -0.02em;  
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;  
  --letter-spacing-wider:   0.08em;

  

  
  --h1-font-size:          clamp(28px, 3.6vw, 46px);
  --h1-font-weight:        var(--font-weight-black);    
  --h1-line-height:        var(--line-height-tight);
  --h1-letter-spacing:     var(--letter-spacing-tight);
  --h1-color:              var(--color-text-primary);

  
  --h2-font-size:          clamp(26px, 3.2vw, 42px);
  --h2-font-weight:        var(--font-weight-black);    
  --h2-line-height:        var(--line-height-snug);
  --h2-letter-spacing:     var(--letter-spacing-tight);
  --h2-color:              var(--color-text-primary);

  
  --h3-font-size:          22px;
  --h3-font-weight:        var(--font-weight-bold);     
  --h3-line-height:        var(--line-height-snug);
  --h3-color:              var(--color-text-primary);

  
  --body-font-size:        var(--font-size-base);
  --body-font-weight:      var(--font-weight-regular);
  --body-line-height:      var(--line-height-relaxed);
  --body-color:            var(--color-text-muted);

  
  --lead-font-size:        var(--font-size-2xl);        
  --lead-font-weight:      var(--font-weight-regular);
  --lead-line-height:      var(--line-height-normal);
  --lead-color:            var(--color-text-secondary);

  
  --nav-font-size:         15px;
  --nav-font-weight:       var(--font-weight-semibold);
  --nav-color:             var(--color-text-secondary);
  --nav-color-hover:       var(--color-text-primary);

}

:root {

  
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-11:   44px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-18:   72px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;

  
  --section-py-desktop:    96px;   
  --section-py-tablet:     60px;
  --section-py-mobile:     48px;

  
  --container-px-desktop:  87px;   
  --container-px-tablet:   40px;
  --container-px-mobile:   20px;

  
  --gap-sm:     16px;
  --gap-md:     24px;
  --gap-lg:     32px;
  --gap-xl:     40px;
  --gap-2xl:    60px;

  
  --card-padding:           32px;
  --card-padding-lg:        48px;   
  --card-padding-mobile:    24px;
  --form-field-gap:         16px;
  --btn-padding-y:          13px;
  --btn-padding-x:          22px;
  --btn-padding-y-sm:       10px;
  --btn-padding-x-sm:       16px;

}

:root {

  --radius-sm:       8px;    
  --radius-md:       12px;   
  --radius-lg:       16px;   
  --radius-xl:       20px;   
  --radius-2xl:      24px;   
  --radius-pill:     60px;   
  --radius-circle:   50%;    

  
  --radius-card:        var(--radius-xl);     
  --radius-btn:         var(--radius-pill);   
  --radius-icon:        var(--radius-md);     
  --radius-icon-lg:     var(--radius-lg);     
  --radius-email-btn:   20px;   
  --radius-social:      14px;   
  --radius-header-bot:  0 0 16px 16px;  

}

:root {

  
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.30);

  
  --shadow-btn:        0 4px 16px rgba(233, 81, 27, 0.40);
  --shadow-btn-hover:  0 6px 20px rgba(233, 81, 27, 0.55);

  
  --shadow-node:       0 4px 24px rgba(47, 174, 125, 0.30);

  
  --shadow-pin:        0 2px 8px rgba(0, 0, 0, 0.25);

  
  --shadow-focus:      0 0 0 3px rgba(233, 81, 27, 0.35);

  
  --shadow-header:     0 2px 20px rgba(0, 0, 0, 0.15);

}

:root {

  
  --glass-bg:              rgba(255, 255, 255, 0.08);
  --glass-border:          1px solid rgba(255, 255, 255, 0.25);
  --glass-blur:            blur(5.85px);
  --glass-border-radius:   var(--radius-card);

  
  --glass-border-medium:   1px solid rgba(255, 255, 255, 0.40);

  
  --glass-bg-strong:       rgba(255, 255, 255, 0.10);
  --glass-blur-strong:     blur(10px);

  
  --glass-menu-bg:         rgba(14, 42, 33, 0.82);
  --glass-menu-blur:       blur(10px);

  
  --glass-header-bg:       rgba(14, 42, 33, 0.82);
  --glass-header-blur:     blur(12px);

  
  --glass-pill-bg:         rgba(20, 58, 46, 0.60);
  --glass-pill-border:     1px solid rgba(255, 255, 255, 0.20);
  --glass-pill-blur:       blur(8px);

  
  --glass-node-bg:         rgba(20, 58, 46, 0.50);
  --glass-node-border:     1px solid rgba(255, 255, 255, 0.20);

  
  --glass-why-bg:          rgba(255, 255, 255, 0.06);
  --glass-why-border:      1px solid rgba(255, 255, 255, 0.15);
  --glass-why-border-left: 3px solid #e9511b;

}

:root {

  
  --duration-fast:     150ms;
  --duration-base:     250ms;
  --duration-slow:     350ms;
  --duration-slower:   500ms;

  
  --ease-default:      ease;
  --ease-in:           ease-in;
  --ease-out:          ease-out;
  --ease-in-out:       ease-in-out;
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  
  --transition-base:   all var(--duration-base) var(--ease-default);
  --transition-color:  color var(--duration-fast) var(--ease-default),
                       background-color var(--duration-fast) var(--ease-default),
                       border-color var(--duration-fast) var(--ease-default);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-default);
  --transition-all:    all var(--duration-slow) var(--ease-in-out);

  
  --anim-bounce:       2s;       
  --anim-pulse:        2.5s;     
  --anim-fade-in:      0.6s;     
  --anim-reveal-delay: 0.1s;     

}

:root {

  
  --max-width:             1180px;  
  --max-width-narrow:      860px;   

  
  --header-height:         72px;    
  --header-height-mobile:  87px;    
  --header-height-tablet:  72px;

  
  --bp-desktop:            1024px;  
  --bp-tablet:             768px;   
  --bp-mobile-sm:          390px;   

  
  --usp-min-height:        780px;   
  --usp-min-height-mobile: 420px;
  --usp-ring-1:            582px;
  --usp-ring-2:            450px;
  --usp-ring-3:            318px;
  --usp-ring-4:            200px;

  
  --hero-min-height:       100vh;
  --hero-min-height-mobile: 406px;

}

:root {

  --z-below:       -1;    
  --z-base:         0;    
  --z-raised:       10;   
  --z-dropdown:     100;  
  --z-sticky:       200;  
  --z-overlay:      300;  
  --z-modal:        400;  
  --z-toast:        500;  
  --z-header:       1000; 

}

:root {
  --header-bg-initial:     transparent;
  --header-bg-scrolled:    var(--glass-header-bg);
  --header-backdrop-scrolled: var(--glass-header-blur);
  --header-border-scrolled: 0 0 16px 16px;
  --header-z-index:        var(--z-header);
  --header-transition:     background-color var(--duration-slow) var(--ease-in-out),
                           backdrop-filter var(--duration-slow) var(--ease-in-out);
}

:root {
  --btn-primary-bg:        var(--color-orange);
  --btn-primary-bg-hover:  var(--color-orange-dark);
  --btn-primary-color:     #FFFFFF;
  --btn-primary-radius:    var(--radius-pill);
  --btn-primary-padding:   var(--btn-padding-y) var(--btn-padding-x);
  --btn-primary-font-size: 15px;
  --btn-primary-font-weight: var(--font-weight-semibold);
  --btn-primary-shadow:    var(--shadow-btn);
  --btn-primary-shadow-hover: var(--shadow-btn-hover);
  --btn-primary-transition: var(--transition-base);
}

:root {
  --btn-outline-bg:        transparent;
  --btn-outline-bg-hover:  rgba(255, 255, 255, 0.10);
  --btn-outline-color:     #FFFFFF;
  --btn-outline-border:    2px solid rgba(255, 255, 255, 0.70);
  --btn-outline-border-hover: 2px solid #FFFFFF;
  --btn-outline-radius:    var(--radius-pill);
  --btn-outline-padding:   var(--btn-padding-y) var(--btn-padding-x);
  --btn-outline-font-size: 15px;
  --btn-outline-font-weight: var(--font-weight-semibold);
  --btn-outline-transition: var(--transition-base);
}

:root {
  --card-bg:               var(--glass-bg);
  --card-border:           var(--glass-border);
  --card-radius:           var(--radius-card);
  --card-shadow:           var(--shadow-card);
  --card-backdrop:         var(--glass-blur);
  --card-padding:          var(--card-padding);
  --card-transition:       transform var(--duration-base) var(--ease-out),
                           box-shadow var(--duration-base) var(--ease-default);
  --card-translate-hover:  translateY(-4px);
  --card-shadow-hover:     var(--shadow-card-hover);
}

:root {
  --field-bg:              rgba(255, 255, 255, 0.08);
  --field-border:          1px solid rgba(255, 255, 255, 0.20);
  --field-border-focus:    1px solid var(--color-orange);
  --field-border-error:    1px solid #FF4D4D;
  --field-radius:          var(--radius-sm);
  --field-color:           var(--color-text-primary);
  --field-placeholder:     var(--color-text-muted);
  --field-padding:         12px 16px;
  --field-font-size:       var(--font-size-base);
  --field-shadow-focus:    var(--shadow-focus);
}

:root {
  --icon-btn-size:         47px;
  --icon-btn-bg:           var(--color-orange);
  --icon-btn-radius:       var(--radius-email-btn);  
  --icon-btn-color:        #FFFFFF;
}

:root {
  --social-btn-size:       44px;
  --social-btn-size-mobile: 39px;
  --social-btn-border:     1px solid var(--color-orange);
  --social-btn-radius:     var(--radius-social);  
  --social-btn-color:      var(--color-orange);
  --social-btn-bg-hover:   rgba(233, 81, 27, 0.10);
}

:root {
  --faq-border:            1px solid rgba(255, 255, 255, 0.15);
  --faq-padding:           20px 0;
  --faq-q-font-size:       var(--font-size-xl);  
  --faq-q-font-weight:     var(--font-weight-bold);
  --faq-a-font-size:       var(--font-size-md);  
  --faq-a-color:           var(--color-text-muted);
  --faq-chevron-color:     var(--color-orange);
  --faq-chevron-rotation:  180deg;
}

:root {
  --testimonial-border:    1px solid rgba(255, 255, 255, 0.40);
  --testimonial-padding:   24px;
  --testimonial-radius:    var(--radius-card);
  --testimonial-avatar-size: 40px;
  --testimonial-star-color: var(--color-orange);
  --testimonial-quote-size: var(--font-size-base);
}

:root {
  --badge-border:          1.5px solid rgba(255, 255, 255, 0.70);
  --badge-radius:          var(--radius-pill);
  --badge-padding:         8px 16px;
  --badge-font-size:       var(--font-size-sm);  
  --badge-font-weight:     var(--font-weight-semibold);
  --badge-color:           var(--color-text-primary);
  --badge-dot-size:        8px;
  --badge-dot-color:       #FFFFFF;
}

.text-orange {
  color: var(--color-orange-text, #e9511b);
}

.glass-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--card-backdrop);
  backdrop-filter: var(--card-backdrop);
}

.glass-card:hover {
  transform: var(--card-translate-hover);
  box-shadow: var(--card-shadow-hover);
}

.pema-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--container-px-desktop);
  padding-right: var(--container-px-desktop);
}

@media (max-width: 1024px) {
  .pema-container {
    padding-left: var(--container-px-tablet);
    padding-right: var(--container-px-tablet);
  }
}

@media (max-width: 768px) {
  .pema-container {
    padding-left: var(--container-px-mobile);
    padding-right: var(--container-px-mobile);
  }
}

*:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 16px;
  padding: 8px 16px;
  background: var(--color-orange);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  z-index: var(--z-toast);
  text-decoration: none;
}

.skip-to-content:focus {
  left: 16px;
}

:root {
  --green: #143a2e;
  --green-deep: #1a4536;
  --green-usp: #235544;
  --green-card: #1d4a3b;
  --green-border: rgba(107, 162, 151, 0.30);

  --white: #ffffff;
  --white-90: rgba(255,255,255,0.9);
  --white-70: rgba(255,255,255,0.7);
  --white-50: rgba(255,255,255,0.5);
  --white-20: rgba(255,255,255,0.2);
  --white-10: rgba(255,255,255,0.1);

  --orange: #e9511b;
  --orange-text: #e9511b;
  --orange-dark: #c64312;

  --container: 1280px;
  --gutter: 24px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --transition: 0.35s ease;
  --transition-f: 0.25s ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-card: 0 18px 60px rgba(0,0,0,0.2);
  --shadow-hover: 0 18px 48px rgba(0,0,0,0.25);
}