/* =====================================================================
   GLOBALIST PREMIUM LAYER
   Lädt NACH globalist-theme.css. Erweitert das Design um:
   - Einheitliches Mint-Glow überall wo Accent-Farbe erscheint
   - Gradient-Fill Display-Headings (wie Hero)
   - Glass-Morphism Cards mit Gradient-Border
   - Apple-like Ease-Out-Transitions, Hover-Micro-Interactions
   - Scroll-Reveal Entrance-Animationen (IntersectionObserver via JS)
   ===================================================================== */

/* ——— Easing tokens ——— */
:root{
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --glow-sm: 0 0 12px rgba(0,237,179,.28);
  --glow-md: 0 0 24px rgba(0,237,179,.35);
  --glow-lg: 0 0 60px rgba(0,237,179,.45), 0 0 120px rgba(0,237,179,.18);
  --glass-border: 1px solid rgba(255,255,255,.08);
  --card-gradient: linear-gradient(135deg, rgba(0,237,179,.04) 0%, rgba(255,255,255,.02) 50%, rgba(0,237,179,.03) 100%);
}

/* ——— Universal mint glow ————————————————————————————————————————————
   Any element that carries the brand mint colour should glow.            */
.accent, .new-highlight,
[class*="highlight-text"],
.text-color-primary,
[class*="_highlight"],
[class*="text-span"]{
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  text-shadow: 0 0 40px var(--primary-glow), 0 0 20px rgba(0,237,179,.35) !important;
}

/* Inline <strong>/<b> inside mint contexts gets a subtle glow */
strong.accent, b.accent{ text-shadow: 0 0 28px rgba(0,237,179,.4); }

/* Any link coloured mint gets glow on hover */
a{ transition: color .25s var(--ease-out), text-shadow .25s var(--ease-out); }
a:hover{ text-shadow: var(--glow-sm); }

/* Stat / KPI numbers — big mint numbers always glow */
[class*="stats"] [class*="_number"],
[class*="statistics"] [class*="_number"],
.number-big, .stat-value, .kpi-value,
[class*="number-"][class*="text-color"]{
  color: var(--primary) !important;
  text-shadow: 0 0 48px var(--primary-glow), 0 0 24px rgba(0,237,179,.4) !important;
  background: linear-gradient(180deg, #ffffff 0%, #a8ffe3 60%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ——— Display-headings: gradient fill ————————————————————————————————— */
section h1, section h2, section [class*="heading-style-h1"], section [class*="heading-style-h2"],
header h1, header h2,
.heading-style-h1, .heading-style-h1-2, .heading-style-h2, .heading-style-h2-2{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(255,255,255,.75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
/* Don't gradient-clip inside richtext — those need to stay solid for readability */
.w-richtext h1, .w-richtext h2, .blogtext h1, .blogtext h2{
  background: none;
  -webkit-text-fill-color: inherit;
  color: var(--white) !important;
}
/* Gradient clip must allow nested mint accents to keep their colour */
section h1 .accent, section h2 .accent,
section h1 [class*="text-span"], section h2 [class*="text-span"],
header h1 .accent, header h2 .accent{
  background: none !important;
  -webkit-text-fill-color: var(--primary) !important;
}

/* ——— Glass-morphism cards ——————————————————————————————————————————— */
/* Cover the most common Webflow card classes */
[class*="_card"],
[class*="layout"][class*="_card"],
[class*="card-item"],
.card,
[class*="_item"][class*="testimonial"],
[class*="_item"][class*="feature"],
[class*="_item"][class*="blog"],
[class*="faq"][class*="_item"]{
  background:
    var(--card-gradient),
    var(--card) !important;
  border: 1px solid rgba(0,237,179,.10) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: transform .55s var(--ease-out),
              border-color .35s var(--ease-out),
              box-shadow .55s var(--ease-out);
  position: relative;
  overflow: hidden;
}
[class*="_card"]:hover,
[class*="layout"][class*="_card"]:hover,
[class*="card-item"]:hover,
.card:hover,
[class*="_item"][class*="testimonial"]:hover,
[class*="_item"][class*="feature"]:hover,
[class*="_item"][class*="blog"]:hover{
  transform: translateY(-4px);
  border-color: rgba(0,237,179,.32) !important;
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,237,179,.18),
    var(--glow-md);
}

/* ——— Hover glow on links & icons with mint ——————————————————————————— */
img[src*="Logo"], img[alt*="logo"], .logo-s, .logo-image{
  transition: transform .55s var(--ease-out), filter .55s var(--ease-out);
}
.logo-s:hover, .splide__slide:hover .logo-s{
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(0,237,179,.35)) brightness(1.15);
}

/* SVG icons inside buttons / lists: subtle mint glow on hover */
.primary-button:hover svg, .secondary-button:hover svg,
.w-button:hover svg, .w-button:hover img,
a:hover > svg{
  filter: drop-shadow(0 0 8px rgba(0,237,179,.5));
}

/* Nav mega-menu icon tiles get a mint glow on hover */
.navbar6_dropdown-link img{
  transition: transform .35s var(--ease-out), filter .35s var(--ease-out);
}
.navbar6_dropdown-link:hover img{
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(0,237,179,.55));
}

/* ——— Scroll-reveal base state ————————————————————————————————————————
   JS adds .is-visible when the element enters the viewport.                */
.js-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.js-reveal.from-left{ transform: translateX(-40px); }
.js-reveal.from-right{ transform: translateX(40px); }
.js-reveal.from-left.is-visible,
.js-reveal.from-right.is-visible{ transform: translateX(0); }
.js-reveal.zoom-in{ transform: scale(.96); }
.js-reveal.zoom-in.is-visible{ transform: scale(1); }

/* Stagger children */
.js-stagger > * { transition-delay: 0s; }
.js-stagger > *:nth-child(2) { transition-delay: .08s; }
.js-stagger > *:nth-child(3) { transition-delay: .16s; }
.js-stagger > *:nth-child(4) { transition-delay: .24s; }
.js-stagger > *:nth-child(5) { transition-delay: .32s; }
.js-stagger > *:nth-child(6) { transition-delay: .40s; }
.js-stagger > *:nth-child(7) { transition-delay: .48s; }
.js-stagger > *:nth-child(8) { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce){
  .js-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ——— Buttons: enhanced glow + apple ease ——————————————————————————— */
.primary-button,
.secondary-button,
.w-button{
  transition:
    background .4s var(--ease-out),
    color .4s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .55s var(--ease-out),
    border-color .4s var(--ease-out) !important;
}
.primary-button{
  box-shadow:
    0 0 0 0 rgba(0,237,179,0),
    0 8px 28px -10px rgba(0,237,179,.35),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.primary-button:hover{
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 32px rgba(0,237,179,.35),
    0 14px 40px -8px rgba(0,237,179,.55),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.primary-button:active{ transform: translateY(0) scale(.99) !important; }

.secondary-button:hover, .w-button.secondarybutton:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 32px -8px rgba(0,237,179,.35),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Hero buttons get a soft ring-glow around them */
.hero .btn-primary{
  box-shadow: 0 0 0 0 rgba(0,237,179,0), 0 6px 28px -10px rgba(0,237,179,.45);
}
.hero .btn-primary:hover{
  box-shadow:
    0 0 32px rgba(0,237,179,.5),
    0 16px 48px -8px rgba(0,237,179,.6);
}

/* ——— Icon & media glows ——————————————————————————————————————————————— */
[style*="color: var(--primary)"] svg,
[style*="stroke: var(--primary)"] svg,
svg[fill*="00EDB3"], svg[stroke*="00EDB3"]{
  filter: drop-shadow(0 0 10px rgba(0,237,179,.4));
}

/* Feature icon tiles (mega-menu / service grids) */
.mega-link .ico, [class*="_icon-wrapper"], [class*="_icon"]{
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.mega-link:hover .ico{
  box-shadow: 0 0 24px rgba(0,237,179,.35), inset 0 0 0 1px rgba(0,237,179,.4);
}

/* ——— Section transitions: subtle mint hairline dividers ——————————— */
section + section, section + header, header + section{
  position: relative;
}
section + section::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 60%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,237,179,.18), transparent);
  pointer-events: none;
}

/* ——— Inputs premium focus ————————————————————————————————————————— */
input:focus, textarea:focus, select:focus, .w-input:focus, .form_input:focus{
  box-shadow:
    0 0 0 3px rgba(0,237,179,.18),
    0 0 24px rgba(0,237,179,.22) !important;
  transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

/* ——— Images: subtle mint-tinted shadow on content images ————————— */
section img:not(.logo-s):not(.navbar6_logo):not([class*="icon"]):not(.hb-logo){
  transition: transform .7s var(--ease-out), filter .7s var(--ease-out);
}
.w-richtext img, [class*="_image"]:not([class*="icon"]), .blog67_image{
  border-radius: var(--radius) !important;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,237,179,.08);
}

/* ——— Testimonial quotes: oversized open-quote with mint glow ———— */
[class*="testimonial"] [class*="_quote"]::before,
[class*="testimonial"] [class*="_text"]::before{
  content: '“';
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 80px;
  line-height: 0.6;
  color: var(--primary);
  opacity: .4;
  text-shadow: 0 0 40px rgba(0,237,179,.6);
  margin-bottom: 8px;
}

/* ——— Navbar logo: mint glow ring on hover ——————————————————— */
.navbar6_logo-link{
  transition: filter .35s var(--ease-out);
}
.navbar6_logo-link:hover{
  filter: drop-shadow(0 0 14px rgba(0,237,179,.55));
}

/* ——— Eyebrow / small-caps labels get mint with subtle glow ——— */
[class*="eyebrow"], .eyebrow, [class*="tag-"], [class*="_tag"]{
  text-shadow: 0 0 18px rgba(0,237,179,.25);
}

/* ——— Section backgrounds that were Webflow-white get the dark gradient ——— */
[class*="section_"] [class*="background-color-white"],
[class*="section_"] [class*="background-white"]{
  background: transparent !important;
  color: var(--fg) !important;
}