/* =====================================================================
   GLOBALIST BENTO LAYER
   Lädt NACH globalist-premium.css.
   Wendet das Tile-Design aus Globalist Home.html (.hbt / .skin-card)
   auf alle Webflow-Kacheln site-weit an. Smoother lift + mint corner-
   glow + stärker werdende border auf Hover.
   ===================================================================== */

/* The master tile selector — any card/item-like Webflow element.
   Using :where() to keep specificity low so individual rules can still
   override. */
:where(
  [class*="_card"]:not([class*="_card-wrapper"]):not(.navbar6_dropdown-link),
  [class*="card-item"],
  [class*="_item"][class*="testimonial"],
  [class*="_item"][class*="feature"],
  [class*="_item"][class*="stats"],
  [class*="_item"][class*="blog"],
  [class*="_item"][class*="gallery"],
  [class*="_item"][class*="faq"],
  [class*="_item"][class*="portfolio"],
  [class*="_item"][class*="career"],
  [class*="_item"][class*="service"],
  [class*="_item"][class*="pricing"],
  [class*="_item"][class*="layout"],
  [class*="_item"][class*="team"],
  [class*="_wrapper"][class*="blog-post"],
  [class*="_content"][class*="cms"],
  .bento-tile,
  .card
){
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(155deg,
      rgba(5,26,21,.9) 0%,
      rgba(4,20,16,.82) 55%,
      rgba(2,12,9,.92) 100%
    ) !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  padding: clamp(22px, 2.4vw, 32px) !important;
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  transition:
    transform .55s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    border-color .45s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    box-shadow .65s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    background .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

/* Signature mint radial corner-glow via ::after (drives the "pop") */
:where(
  [class*="_card"]:not([class*="_card-wrapper"]):not(.navbar6_dropdown-link),
  [class*="card-item"],
  [class*="_item"][class*="testimonial"],
  [class*="_item"][class*="feature"],
  [class*="_item"][class*="stats"],
  [class*="_item"][class*="blog"],
  [class*="_item"][class*="gallery"],
  [class*="_item"][class*="faq"],
  [class*="_item"][class*="portfolio"],
  [class*="_item"][class*="career"],
  [class*="_item"][class*="service"],
  [class*="_item"][class*="pricing"],
  [class*="_item"][class*="team"],
  [class*="_wrapper"][class*="blog-post"],
  .bento-tile,
  .card
)::after{
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,237,179,.10) 0%,
    rgba(0,237,179,.04) 35%,
    transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  opacity: .7;
  transition: opacity .65s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              transform .65s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  z-index: 0;
}

/* Lift children above the radial */
:where(
  [class*="_card"]:not([class*="_card-wrapper"]):not(.navbar6_dropdown-link),
  [class*="card-item"],
  [class*="_item"][class*="testimonial"],
  [class*="_item"][class*="feature"],
  [class*="_item"][class*="stats"],
  [class*="_item"][class*="blog"],
  [class*="_item"][class*="gallery"],
  [class*="_item"][class*="faq"],
  [class*="_item"][class*="portfolio"],
  [class*="_item"][class*="career"],
  [class*="_item"][class*="service"],
  [class*="_item"][class*="pricing"],
  [class*="_item"][class*="team"]
) > *{
  position: relative;
  z-index: 1;
}

/* Hover: smooth lift, stronger mint border, mint shadow, radial intensifies */
:where(
  [class*="_card"]:not([class*="_card-wrapper"]):not(.navbar6_dropdown-link),
  [class*="card-item"],
  [class*="_item"][class*="testimonial"],
  [class*="_item"][class*="feature"],
  [class*="_item"][class*="stats"],
  [class*="_item"][class*="blog"],
  [class*="_item"][class*="gallery"],
  [class*="_item"][class*="faq"],
  [class*="_item"][class*="portfolio"],
  [class*="_item"][class*="career"],
  [class*="_item"][class*="service"],
  [class*="_item"][class*="pricing"],
  [class*="_item"][class*="team"],
  .bento-tile,
  .card
):hover{
  transform: translateY(-6px) !important;
  border-color: rgba(0,237,179,.32) !important;
  background:
    linear-gradient(155deg,
      rgba(7,31,25,.95) 0%,
      rgba(5,22,18,.90) 55%,
      rgba(2,12,9,.94) 100%
    ) !important;
  box-shadow:
    0 40px 80px -30px rgba(0,237,179,.2),
    0 20px 40px -20px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,237,179,.18) !important;
}
:where(
  [class*="_card"]:not([class*="_card-wrapper"]):not(.navbar6_dropdown-link),
  [class*="card-item"],
  [class*="_item"][class*="testimonial"],
  [class*="_item"][class*="feature"],
  [class*="_item"][class*="stats"],
  [class*="_item"][class*="blog"],
  [class*="_item"][class*="gallery"],
  [class*="_item"][class*="faq"],
  [class*="_item"][class*="portfolio"],
  [class*="_item"][class*="career"],
  [class*="_item"][class*="service"],
  [class*="_item"][class*="pricing"],
  [class*="_item"][class*="team"],
  .bento-tile,
  .card
):hover::after{
  opacity: 1;
  transform: translate(-20px, -20px) scale(1.15);
}

/* Typography inside tiles */
:where(
  [class*="_card"], [class*="_item"], .bento-tile, .card
) h3,
:where(
  [class*="_card"], [class*="_item"], .bento-tile, .card
) [class*="_heading"]{
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--white);
}
:where(
  [class*="_card"], [class*="_item"], .bento-tile, .card
) p,
:where(
  [class*="_card"], [class*="_item"], .bento-tile, .card
) [class*="_text"]:not([class*="_text-link"]){
  color: rgba(224,231,229,.72);
  line-height: 1.55;
}

/* Eyebrow label inside a tile — mint dot + uppercase letter-tracking */
.bento-tile .lbl,
.bento-tile [class*="eyebrow"],
:where([class*="_card"], [class*="_item"]) > [class*="eyebrow"],
:where([class*="_card"], [class*="_item"]) > [class*="tag-"]{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--primary); font-weight: 700;
}
.bento-tile .lbl::before,
.bento-tile [class*="eyebrow"]::before{
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow, rgba(0,237,179,.45));
}

/* Links inside tiles get a subtle mint-accent arrow treatment */
:where([class*="_card"], [class*="_item"]) a:not(.primary-button):not(.secondary-button):not(.w-button){
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  transition: gap .3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              color .3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:where([class*="_card"], [class*="_item"]) a:not(.primary-button):not(.secondary-button):not(.w-button):hover{
  gap: 12px;
  text-shadow: 0 0 16px rgba(0,237,179,.45);
}

/* Images inside tiles: clean rounded corner, no shadow (tile owns the shadow) */
:where([class*="_card"], [class*="_item"]) img:not([class*="icon"]){
  border-radius: 14px;
  transition: transform .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              filter .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
:where([class*="_card"], [class*="_item"]):hover img:not([class*="icon"]){
  transform: scale(1.03);
}

/* Feature / service icon wrappers at top of tiles */
:where([class*="_card"], [class*="_item"]) [class*="_icon-wrapper"],
:where([class*="_card"], [class*="_item"]) [class*="_icon"]:not(img){
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,237,179,.16), rgba(0,237,179,.04));
  border: 1px solid rgba(0,237,179,.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              box-shadow .35s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
:where([class*="_card"], [class*="_item"]):hover [class*="_icon-wrapper"],
:where([class*="_card"], [class*="_item"]):hover [class*="_icon"]:not(img){
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 24px rgba(0,237,179,.35),
              inset 0 0 0 1px rgba(0,237,179,.45);
}
:where([class*="_card"], [class*="_item"]) [class*="_icon-wrapper"] svg,
:where([class*="_card"], [class*="_item"]) [class*="_icon"]:not(img) svg{
  width: 22px; height: 22px;
  stroke: var(--primary); fill: none; stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(0,237,179,.4));
}

/* Bento grid helpers — optional classes for new layouts */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 0 28px;
  max-width: 1360px;
  margin: 0 auto;
}
.bento-span-3{ grid-column: span 3; }
.bento-span-4{ grid-column: span 4; }
.bento-span-5{ grid-column: span 5; }
.bento-span-6{ grid-column: span 6; }
.bento-span-7{ grid-column: span 7; }
.bento-span-8{ grid-column: span 8; }
.bento-span-12{ grid-column: 1 / -1; }
@media(max-width:991px){
  .bento-grid{ grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .bento-span-3{ grid-column: span 3; }
  .bento-span-4{ grid-column: span 6; }
  .bento-span-5{ grid-column: span 6; }
  .bento-span-6{ grid-column: span 6; }
  .bento-span-7{ grid-column: span 6; }
  .bento-span-8{ grid-column: span 6; }
}
@media(max-width:640px){
  .bento-grid{ grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  [class*="bento-span"]{ grid-column: 1 / -1; }
}

/* Large tile variant with inner glow */
.bento-tile.hero-tile{
  min-height: 320px;
}
.bento-tile.hero-tile::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80%; height: 80%;
  background: radial-gradient(ellipse at center,
    rgba(0,237,179,.08) 0%,
    transparent 60%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

/* Cards that contain a logo/image: don't add the default padding */
.bento-tile--image,
:where([class*="_card"], [class*="_item"]):has(> img:only-child){
  padding: 0 !important;
}

/* Disable the mouse-tilt from premium.js in favour of the smoother lift.
   The tilt was too busy when combined with the radial glow. */
[class*="_card"][style*="perspective"],
[class*="_item"][style*="perspective"]{ /* no-op, kept for doc */ }

/* Stronger reveal for bento tiles — slight zoom + fade */
.js-reveal:where([class*="_card"], [class*="_item"], .bento-tile){
  transform: translateY(32px) scale(.98);
}
.js-reveal:where([class*="_card"], [class*="_item"], .bento-tile).is-visible{
  transform: translateY(0) scale(1);
}

/* =====================================================================
   CURSOR GLOW (Apple-style spotlight) — reacts to mouse position
   The JS sets --mx / --my as %-coords inside each tile on mousemove.
   ===================================================================== */
:where([class*="_card"], [class*="_item"], .bento-tile, .card){
  --mx: 50%;
  --my: -20%;
}
:where([class*="_card"], [class*="_item"], .bento-tile, .card)::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(0,237,179,.15),
    transparent 45%
  );
  opacity: 0;
  transition: opacity .4s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
  z-index: 0;
}
:where([class*="_card"], [class*="_item"], .bento-tile, .card):hover::before{
  opacity: 1;
}

/* =====================================================================
   NESTED-TILE FIX
   Selektoren wie [class*="_card"] / [class*="_item"] matchen auch
   Unter-Elemente wie *_card-content, *_card-image-wrapper,
   *_card-large-content-top etc. Das führt zu verschachtelten Kacheln
   (Kachel in Kachel in Kachel). Hier werden alle Inner-Elemente
   zurückgesetzt, damit NUR der äußerste Tile die Kachel-Optik trägt.
   ===================================================================== */
:where([class*="_card"], [class*="_item"], .bento-tile, .card)
  :where(
    [class*="-content"],
    [class*="-image"],
    [class*="-inner"],
    [class*="-body"],
    [class*="-list"],
    [class*="-header"],
    [class*="-footer"],
    [class*="-title"],
    [class*="-wrapper"],
    [class*="-top"],
    [class*="-bottom"],
    [class*="-left"],
    [class*="-right"],
    [class*="-text"],
    [class*="-heading"],
    [class*="-meta"],
    [class*="-info"]
  ){
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}
:where([class*="_card"], [class*="_item"], .bento-tile, .card)
  :where(
    [class*="-content"],
    [class*="-image"],
    [class*="-inner"],
    [class*="-body"],
    [class*="-list"],
    [class*="-header"],
    [class*="-footer"],
    [class*="-title"],
    [class*="-wrapper"],
    [class*="-top"],
    [class*="-bottom"],
    [class*="-left"],
    [class*="-right"],
    [class*="-text"],
    [class*="-heading"],
    [class*="-meta"],
    [class*="-info"]
  )::before,
:where([class*="_card"], [class*="_item"], .bento-tile, .card)
  :where(
    [class*="-content"],
    [class*="-image"],
    [class*="-inner"],
    [class*="-body"],
    [class*="-list"],
    [class*="-header"],
    [class*="-footer"],
    [class*="-title"],
    [class*="-wrapper"],
    [class*="-top"],
    [class*="-bottom"],
    [class*="-left"],
    [class*="-right"],
    [class*="-text"],
    [class*="-heading"],
    [class*="-meta"],
    [class*="-info"]
  )::after{
  content: none !important;
}
/* Hover-Effekte auf Inner-Elementen killen (sonst liften & glowen sie mit) */
:where([class*="_card"], [class*="_item"], .bento-tile, .card)
  :where(
    [class*="-content"],
    [class*="-image"],
    [class*="-inner"],
    [class*="-body"],
    [class*="-list"],
    [class*="-header"],
    [class*="-footer"],
    [class*="-title"],
    [class*="-wrapper"],
    [class*="-top"],
    [class*="-bottom"],
    [class*="-left"],
    [class*="-right"],
    [class*="-text"],
    [class*="-heading"],
    [class*="-meta"],
    [class*="-info"]
  ):hover{
  transform: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =====================================================================
   APPLE-SMOOTH HOVER · ycan-Style Cursor-Halo
   eine-neue-welt.webflow.css setzt für .layout247_item nur
   `transition-property: opacity` — die Lift/Border-Änderungen springen
   dadurch hart. Hier mit höherer Specificity überschreiben + soft
   cursor-tracking blur-disk für sys-case + layout247 cards.
   ===================================================================== */

/* a) Apple-easing für die Solution-Box (falls noch irgendwo vorhanden) */
.layout247_item{
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    border-color .45s cubic-bezier(.16,1,.3,1),
    box-shadow .65s cubic-bezier(.16,1,.3,1),
    background-color .6s cubic-bezier(.16,1,.3,1) !important;
  will-change: transform;
}

/* b) Cursor-tracking blur-halo auf den neuen Case-Tiles */
.sys-case{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sys-case::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(0,237,179,.14), transparent 65%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.sys-case:hover::before{ opacity: 1; }
.sys-case > *{ position: relative; z-index: 1; }

/* c) Cursor-blur auch auf .layout247_item (für ggf. nicht-getauschte Pages) */
.layout247_item{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.layout247_item::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(0,237,179,.18), transparent 65%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.layout247_item:hover::before{ opacity: 1; }
.layout247_item > *{ position: relative; z-index: 1; }

/* d) Reduced-motion kill-switch */
@media (prefers-reduced-motion: reduce){
  .sys-case::before,
  .layout247_item::before{ display: none; }
  .sys-case,
  .layout247_item{ transition: none !important; }
}