/* =========================
   FRONT PAGE – HERO VIDEO (CLEAN)
   - higher hero
   - no duplicate rules
   - smooth bottom blend (no visible bar)
========================= */

.bm-hero{
  position: relative;

  /* beússzon a header alá */
  margin-top: calc(-1 * (var(--h) + var(--bm-adminbar, 0px)));
  padding-top: calc(var(--h) + var(--bm-adminbar, 0px));

  /* MAGASABB HERO */
  height: clamp(780px, 100vh, 1300px);

  background: #000;
  overflow: hidden;
}

/* media wrapper */
.bm-hero__media{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;

  /* bottom blend (no csík) */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.85) 76%,
    rgba(0,0,0,.30) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.85) 76%,
    rgba(0,0,0,.30) 88%,
    transparent 100%
  );
}

/* videók egymásra */
.bm-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* cinematic */
  filter: contrast(1.06) saturate(1.06);

  /* kicsit nagyobb + minimális levágás alul */
  transform: scale(1.08) translateY(2px);

  /* fade váltás */
  opacity: 0;
  transition: opacity .12s linear;
}
.bm-hero__video.is-active{ opacity: 1; }

/* erősebb overlay */
.bm-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.38) 24%,
      rgba(0,0,0,.10) 36%,
      rgba(0,0,0,.72) 100%
    ),
    radial-gradient(ellipse at 50% 35%,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.44) 62%,
      rgba(0,0,0,.86) 100%
    );
}

/* content réteg */
.bm-hero__content{
  position: relative;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ha valahol még bent maradt a régi "bar", tiltsuk le */
.bm-hero__bar{ display: none !important; }


/* =========================
   FRONT – WORK REEL (infinite)
   (duplikációk kiszedve, utolsó beállítások megőrizve)
========================= */

.bm-reel{
  padding: clamp(34px, 5vw, 64px) 0;
  background: #fff;
  color: #000;
  overflow: hidden;
}

.bm-reel__head{
  max-width: 980px;
  margin: 0 auto 22px;
  padding: 0 var(--pad);
  text-align: center;
}

.bm-reel__title{
  margin: 0;
  font-size: clamp(24px, 2.8vw, 40px);
  color: #000;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.bm-reel__lead{
  margin: 10px auto 0;
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.6;
  max-width: 720px;
  font-weight: 500;
}

/* viewport */
.bm-reel__viewport{
  position: relative;
  overflow: hidden;
  padding: 14px 0;
}

/* szélek “fade” fehérre */
.bm-reel__viewport::before,
.bm-reel__viewport::after{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 160px);
  z-index: 3;
  pointer-events: none;
}


/* track */
.bm-reel__track{
  display: flex;
  gap: 26px;                 /* utolsó */
  padding-left: var(--pad);  /* megmaradt korábbi */
  width: max-content;        /* utolsó */
  will-change: transform;
  animation: bm-reel-scroll var(--bm-reel-duration, 18s) linear infinite; /* utolsó */
}

/* hoverre álljon meg (szép “pro” érzés) */
.bm-reel__viewport:hover .bm-reel__track{
  animation-play-state: paused;
}

@keyframes bm-reel-scroll{
  from{ transform: translateX(0); }
  to{   transform: translateX(calc(-1 * var(--bm-reel-shift, 0px))); }
}

/* kártyák */
.bm-reel__card{
  flex: 0 0 auto; /* utolsó + fontos */
  width: clamp(360px, 44vw, 780px);
  height: clamp(260px, 36vw, 460px);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 18px 55px rgba(0,0,0,.00);
}

.bm-reel__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: contrast(1.05) saturate(1.05);
}
/* felirat alul – világos overlay */
.bm-reel__card::after{
  content:"";
  position: absolute;
  inset: 0;

}
.bm-reel__meta{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}
.bm-reel__name{
  display: none;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  letter-spacing: .01em;
}

.bm-reel__tag{
  display: block;
  margin-top: 6px;
  color: rgba(0,0,0,.70);
  font-size: 13px;
  line-height: 1.35;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bm-reel__track{ animation: none !important; }
  .bm-reel__viewport{ overflow-x: auto; }
}
/* eddig: .bm-reel__track { padding-left: var(--pad); }  -> EZ okozza a seam ugrást */

/* tedd inkább ide */
.bm-reel__viewport{
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* és a track-ről vedd le */
.bm-reel__track{
  padding-left: 0 !important;
  animation-play-state: paused; /* csak init után induljon */
  transform: translate3d(0,0,0);
}

/* init után indul */
.bm-reel__track.is-ready{
  animation-play-state: running;
}
@keyframes bm-reel-scroll{
  from{ transform: translate3d(0,0,0); }
  to{   transform: translate3d(calc(-1 * var(--bm-reel-shift, 0px)),0,0); }
}
/* A track-et JS mozgatja, nem CSS animation */
.bm-reel__track{
  display:flex;
  gap: 26px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: none !important;   /* FONTOS: CSS anim off */
}

/* Ha filter van az képes megakasztani. Teszteld: */
/* ha ettől kisimul, akkor ez volt a ludas */
.bm-reel__img{
  /* filter: contrast(1.05) saturate(1.05); */ /* ideiglenesen OFF */
  transform: translateZ(0); /* GPU hint */
}

/* A kártya is legyen GPU-barát */
.bm-reel__card{
  transform: translateZ(0);
  contain: paint; /* csökkenti a repaint területet */
}

/* Hover pause-hoz (JS figyeli, de UI szempontból ok) */
.bm-reel__viewport{ cursor: default; }
.bm-hero__content{
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 var(--pad);
}

.bm-hero__copy{
  max-width: min(980px, 92vw);
  color: #fff;
  transform: translateZ(0);
}

.bm-hero__headline{
  margin: 0;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.bm-hero__sub{
  margin: 14px auto 0;
  max-width: 780px;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.bm-hero__cta{
  margin-top: 22px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ha nincs még gomb stílusod: */
.bm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bm-btn--primary{
  background: #fff;
  color: #000;
  border: 1px solid rgba(255,255,255,.35);
}

.bm-btn--ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}

.bm-btn:hover{ transform: translateY(-1px); }
/* screen reader only */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* typewriter */
.bm-hero__typing{
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: #fff;
}

/* villogó kurzor */
.bm-hero__typing::after{
  content:"";
  display:inline-block;
  width: 2px;
  height: 1em;
  margin-left: .12em;
  background: rgba(255,255,255,.95);
  vertical-align: -0.08em;
  animation: bm-caret-blink .9s steps(1) infinite;
}

@keyframes bm-caret-blink{
  50%{ opacity: 0; }
}

/* ha kész a gépelés, maradhat a kurzor (vagy kikapcsolhatod) */
.bm-hero__typing.is-done::after{
  opacity: .9;
}

/* ha a user nem kér animációt (OS setting) */
@media (prefers-reduced-motion: reduce){
  .bm-hero__typing::after{ animation: none; opacity: 1; }
}
/* =========================
   SECTION (white → coffee → black) + smooth blend
========================= */

.bm-ai{
  position: relative;
  padding: clamp(70px, 8vw, 120px) 0;
  overflow: hidden;

  /* végső háttér átmenet (több stop, szebb) */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbfaf8 10%,
    #f2ede6 24%,
    #d9c2ae 48%,
    #6a4a3a 72%,
    #110b08 88%,
    #000000 100%
  );
}

/* TOP BLEND: átfolyatás a fenti fehér szekcióból */
.bm-ai::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-70px;
  height: 140px;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.92) 35%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(10px);
  opacity: 1;
  z-index: 1;
}

/* NOISE: banding ellen */
.bm-ai::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* inner */
.bm-ai__inner{
  position: relative;
  z-index: 2;
  max-width: var(--max, 1180px);
  margin: 0 auto;
  padding: 0 var(--pad, 20px);
}

.bm-ai__head{
  text-align: center;
  margin: 0 auto clamp(26px, 3vw, 40px);
  max-width: 980px;
}

.bm-ai__title{
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: #0b0b0b;
}

.bm-ai__lead{
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.7;
  max-width: 720px;
  color: rgba(0,0,0,.70);
}

/* grid */
.bm-ai__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 26px);
  align-items: stretch;
  justify-content: center;
}

/* card + 3D tilt alap */
.bm-ai__card{
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.24);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);

  min-height: clamp(320px, 26vw, 520px);

  /* 3D tilt vars */
  --bm-tilt-x: 0deg;
  --bm-tilt-y: 0deg;
  --bm-lift: 0px;

  transform:
    perspective(1100px)
    rotateX(var(--bm-tilt-x))
    rotateY(var(--bm-tilt-y))
    translateY(var(--bm-lift))
    translateZ(0);

  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .12s ease, border-color .18s ease;
}

.bm-ai__card:hover{
  --bm-lift: -2px;
  border-color: rgba(255,255,255,.26);
}

.bm-ai__media{
  position:absolute;
  inset:0;
  z-index: 1;
  overflow:hidden;
}

.bm-ai__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.04);
}

/* overlay */
.bm-ai__overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(0,0,0,.84) 0%,
    rgba(0,0,0,.44) 40%,
    rgba(0,0,0,.18) 70%,
    rgba(0,0,0,.10) 100%
  );
}

/* content */
.bm-ai__content{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  color: #fff;
}

.bm-ai__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

.bm-ai__cardTitle{
  margin: 10px 0 0;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(0,0,0,.50);
}

.bm-ai__desc{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 520px;
}

/* CTA + nyíl anim */
.bm-ai__cta{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .22s ease, opacity .22s ease;
}

.bm-ai__arrow{
  display:inline-block;
  transform: translate3d(0,1px,0);
  transition: transform .22s ease, opacity .22s ease;
  opacity: .95;
}

.bm-ai__card:hover .bm-ai__cta{
  transform: translateY(-1px);
}

.bm-ai__card:hover .bm-ai__arrow{
  transform: translate3d(6px,1px,0);
  animation: bm-arrow-nudge .75s ease-in-out infinite;
}

@keyframes bm-arrow-nudge{
  0%,100%{ transform: translate3d(6px,1px,0); }
  50%{    transform: translate3d(10px,1px,0); }
}

/* mobile */
@media (max-width: 900px){
  .bm-ai__grid{ grid-template-columns: 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bm-ai__video{ display:none; }
  .bm-ai__card:hover .bm-ai__arrow{ animation: none; }
}
/* =========================
   CDN + INTERACTIVE GLOBE
========================= */

.bm-cdn{
  position: relative;
  background: #000000;
  color: #fff;
  overflow: hidden;
  padding-top:70px;
}

/* nagyon finom háttér “vignette” */
.bm-cdn::before{
  content:"";
  position:absolute;
  inset:-120px -120px -120px -120px;
  pointer-events:none;

  opacity: .9;
}

.bm-cdn__inner{
  position: relative;
  z-index: 2;
  max-width: var(--max, 1180px);
  margin: 0 auto;
  padding: 0 var(--pad, 20px);

  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
}

.bm-cdn__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

.bm-cdn__title{
  margin: 14px 0 0;
  font-size: clamp(28px, 3.8vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.bm-cdn__lead{
  margin: 12px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.7;
  max-width: 680px;
}

.bm-cdn__bullets{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.bm-cdn__bullets li{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}
.bm-cdn__bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: .55em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}

.bm-cdn__ctaRow{
  margin-top: 22px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* gombok (ha nincs még a theme-ben) */
.bm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.bm-btn:hover{ transform: translateY(-1px); }

.bm-btn--primary{
  background: #fff;
  color: #000;
  border: 1px solid rgba(255,255,255,.35);
}
.bm-btn--ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}

/* Globe container (jobb oldal) */
.bm-globe{
  position: relative;
  width: min(820px, 100%);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border-radius: 18px;
  overflow: hidden;
  background: none;
}

.bm-globe__canvas{
  width: 100%;
  height: 100%;
  display:block;
}

.bm-globe__hint{
  position:absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* responsive */
@media (max-width: 980px){
  .bm-cdn__inner{
    grid-template-columns: 1fr;
  }
  .bm-globe{
    margin: 18px auto 0;
    width: min(520px, 92vw);
  }
}

/* reduced motion: legyen statikus */
@media (prefers-reduced-motion: reduce){
  .bm-globe__hint{ display:none; }
}
/* =========================
   TECH CARDS (Wix-like)
========================= */

.bm-tech{
  background: #fff;
  color: #0b0b0b;
  padding: clamp(70px, 8vw, 120px) 0;
}

.bm-tech__inner{
  max-width: var(--max, 1180px);
  margin: 0 auto;
  padding: 0 var(--pad, 20px);
}

.bm-tech__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.bm-tech__title{
  margin: 0;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -0.05em;
  line-height: 1.02;
  max-width: 720px;
}

.bm-tech__lead{
  margin: 8px 0 0;
  color: rgba(0,0,0,.68);
  font-size: 13px;
  line-height: 1.7;
  max-width: 460px;
}

/* grid */
.bm-tech__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

/* card */
.bm-techCard{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  min-height: clamp(420px, 44vw, 620px);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .18s ease;
}

.bm-techCard:hover{
  transform: translateY(-2px);
}

/* háttér “kép” helyett elegáns gradient (később cserélhető képre/videóra) */
.bm-techCard__bg{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 700px at 30% 25%, rgba(255,255,255,.10), rgba(0,0,0,.95) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.95));
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.bm-techCard__bg--a{
  background: radial-gradient(1100px 700px at 30% 25%, rgba(255,255,255,.12), rgba(0,0,0,.95) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.95));
}
.bm-techCard__bg--b{
  background: radial-gradient(1100px 700px at 65% 30%, rgba(255,255,255,.10), rgba(0,0,0,.96) 55%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.96));
}
.bm-techCard__bg--c{
  background: radial-gradient(1100px 700px at 40% 35%, rgba(255,255,255,.10), rgba(0,0,0,.97) 58%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.97));
}
.bm-techCard__bg--d{
  background: radial-gradient(1100px 700px at 50% 30%, rgba(255,255,255,.12), rgba(0,0,0,.96) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.96));
}

/* overlay a szöveg olvashatóságért */
.bm-techCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top,
    rgba(0,0,0,.84) 0%,
    rgba(0,0,0,.50) 46%,
    rgba(0,0,0,.20) 75%,
    rgba(0,0,0,.10) 100%
  );
}

/* content */
.bm-techCard__content{
  position:absolute;
  inset: 0;
  z-index: 2;
  padding: 18px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  color: #fff;
}

.bm-techCard__h{
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  background: rgba(0, 0, 0, .82);
  padding: 3px;
}

.bm-techCard__p{
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
  max-width: 320px;
  background: rgba(0, 0, 0, .82);
  padding: 3px;
}

/* chips (a 2. képed stílusa) */
.bm-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bm-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;

  color: rgba(232,238,252,.92);
  background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

/* arrow */
.bm-techCard__arrow{
  position:absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  transition: transform .18s ease, background .18s ease;
}

.bm-techCard:hover .bm-techCard__arrow{
  transform: translateX(2px);
}

/* responsive */
@media (max-width: 1050px){
  .bm-tech__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-techCard{ min-height: 460px; }
}

@media (max-width: 700px){
  .bm-tech__head{ flex-direction: column; }
  .bm-tech__grid{ grid-template-columns: 1fr; }
  .bm-techCard{ min-height: 420px; }
}
/* ===== TECH CARDS with IMAGES ===== */

.bm-tech__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

.bm-techCard{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  min-height: clamp(420px, 44vw, 620px);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .18s ease;
}

.bm-techCard:hover{
  transform: translateY(-2px);
}

/* kép wrapper */
.bm-techCard__media{
  position:absolute;
  inset:0;
  z-index: 1;
  overflow:hidden;
}

.bm-techCard__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: contrast(1.05) saturate(1.05);
  will-change: transform;
  transition: transform .35s ease;
  background: rgba(0, 0, 0, .82)
}

.bm-techCard:hover .bm-techCard__img{
  transform: scale(1.08);
}

/* overlay a szöveghez */
.bm-techCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.54) 46%,
    rgba(0,0,0,.24) 74%,
    rgba(0,0,0,.12) 100%
  );
}

/* content */
.bm-techCard__content{
  position:absolute;
  inset: 0;
  z-index: 3;
  padding: 18px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  color: #fff;
}

.bm-techCard__h{
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.bm-techCard__p{
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
  max-width: 320px;
}

/* chips */
.bm-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bm-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(232,238,252,.92);
  background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

/* arrow */
.bm-techCard__arrow{
  position:absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  transition: transform .18s ease, background .18s ease;
}

.bm-techCard:hover .bm-techCard__arrow{
  transform: translateX(2px);
}

/* responsive */
@media (max-width: 1050px){
  .bm-tech__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-techCard{ min-height: 460px; }
}

@media (max-width: 700px){
  .bm-tech__grid{ grid-template-columns: 1fr; }
  .bm-techCard{ min-height: 420px; }
}

/* Global typography */
html, body {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* Ensure common text elements inherit it */
body, p, span, a, li, ul, ol, div,
h1, h2, h3, h4, h5, h6,
input, textarea, button, label, select {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}


  .bm-domain{
    background:#fff;
    padding:172px 0;
    padding-bottom: 50px;
  }
  .bm-domain *{ box-sizing:border-box; }

  .bm-domain__inner{
    max-width:1100px;
    margin:0 auto;
    padding:0 18px;
    text-align:center;
  }

  .bm-domain__title{
    margin:0 0 22px;
    font-size:clamp(28px, 3.4vw, 52px);
    line-height:1.05;
    letter-spacing:-0.02em;
    font-weight:400;
    color:#0b0f19;
  }
  .bm-domain__title span{
    display:inline-block;
    font-weight:700;
  }

  /* Search bar */
  .bm-domain__bar{
    margin:0 auto;
    width:min(920px, 100%);
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 12px 12px 16px;
    border-radius:18px;
    background:#f3f4f6;
    border:1px solid rgba(15,23,42,.10);
    box-shadow: 0 12px 40px rgba(2,6,23,.06);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  }
  .bm-domain__bar:focus-within{
    border-color: rgba(59,130,246,.35);
    box-shadow: 0 16px 60px rgba(2,6,23,.10);
    transform: translateY(-1px);
  }

  .bm-domain__icon{
    width:20px;height:20px;
    opacity:.65;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .bm-domain__icon svg{ width:20px;height:20px; fill:#0b0f19; }

  .bm-domain__input{
    flex:1 1 auto;
    border:0;
    outline:0;
    background:transparent;
    font-size:16px;
    color:#0b0f19;
    padding:10px 8px;
    min-width:0;
  }
  .bm-domain__input::placeholder{ color:rgba(11,15,25,.45); }

  .bm-domain__btn{
    flex:0 0 auto;
    width:44px;height:44px;
    border-radius:14px;
    border:0;
    cursor:pointer;
    background:#0b0f19;
    display:flex;align-items:center;justify-content:center;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
  }
  .bm-domain__btn:hover{ transform: translateY(-1px); }
  .bm-domain__btn:active{ transform: translateY(0px) scale(.98); }
  .bm-domain__btn svg{ width:20px;height:20px; fill:#fff; }

  .bm-domain__sub{
    margin:18px 0 0;
    font-size:13px;
    color:#6b7280;
  }
  .bm-domain__sub a{
    color:#0b0f19;
    text-decoration:none;
    border-bottom:1px solid rgba(11,15,25,.25);
  }
  .bm-domain__sub a:hover{
    border-bottom-color: rgba(11,15,25,.55);
  }

  @media (max-width: 560px){
    .bm-domain{ padding:54px 0; }
    .bm-domain__bar{ border-radius:16px; }
    .bm-domain__btn{ width:42px;height:42px;border-radius:12px; }
  }

  .bm-quote{
    background:#000;
    padding:64px 0;
  }
  .bm-quote *{box-sizing:border-box}

  .bm-quote__inner{
    max-width:75vw;
    margin:0 auto;
    padding:0 18px;
  }

  .bm-quote__card{
    border:1px solid rgba(255,255,255,.10);
    background: radial-gradient(900px 260px at 20% 0%, rgba(59,130,246,.16), transparent 60%),
                radial-gradient(700px 220px at 90% 40%, rgba(255,255,255,.08), transparent 55%),
                rgba(255,255,255,.03);
    border-radius:18px;
    padding:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
  }

  .bm-quote__pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
    font-size:12px;
    letter-spacing:.02em;
    margin-bottom:10px;
  }

  .bm-quote__title{
    margin:0;
    color:#fff;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height:1.15;
    letter-spacing:-0.02em;
    font-weight:400;
  }

  .bm-quote__lead{
    margin:10px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    line-height: 1.6;
    max-width: 680px;
  }

  .bm-quote__btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius:14px;
    background:#fff;
    color:#0b0f19;
    text-decoration:none;
    font-weight:700;
    border:1px solid rgba(255,255,255,.10);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    white-space:nowrap;
  }
  .bm-quote__btn:hover{
    transform: translateY(-1px);
  }
  .bm-quote__btn:active{
    transform: translateY(0px) scale(.99);
  }

  /* Nyíl hoverre jelenik meg, és becsúszik */
  .bm-quote__arrow{
    width:18px;height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .bm-quote__arrow svg{width:18px;height:18px; fill:#0b0f19;}
  .bm-quote__btn:hover .bm-quote__arrow{
    opacity:1;
    transform: translateX(0);
  }

  @media (max-width: 860px){
    .bm-quote__card{
      flex-direction:column;
      align-items:flex-start;
      padding:22px;
    }
    .bm-quote__btn{ width:100%; justify-content:center; }
  }



/* Finom "a gomb felé" dőlés (2D, nem blur-öl, nem akad) */
.bm-quote__card{
  position: relative;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
}

/* extra árnyék külön rétegen */
.bm-quote__card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;              /* igazítsd a kártyád radiusához */
  pointer-events:none;
  opacity:0;
  transition: opacity .22s ease;
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}

/* Ha a gombon van a hover -> a kártya MENJEN a gomb felé (jobbra) + picit billenjen */
@supports selector(.x:has(.y)){
  .bm-quote__card:has(.bm-quote__btn:hover){
    transform: translate3d(10px,-2px,0) rotate(-0.6deg);
  }
  .bm-quote__card:has(.bm-quote__btn:hover)::after{
    opacity:1;
  }
}

/* Fallback class (ha JS adja rá) */
.bm-quote__card.is-tilt{
  transform: translate3d(10px,-2px,0) rotate(-0.6deg);
}
.bm-quote__card.is-tilt::after{ opacity:1; }

/* Mobilon ne döntögessen */
@media (max-width: 860px){
  .bm-quote__card,
  .bm-quote__card.is-tilt{
    transform:none !important;
  }
  .bm-quote__card::after{opacity:0 !important;}
}
/* Ha a gombon van a hover -> a kártya MENJEN a gomb felé (jobbra) + a gomb felé dőljön */
@supports selector(.x:has(.y)){
  .bm-quote__card:has(.bm-quote__btn:hover){
    transform: translate3d(10px,-2px,0) rotate(0.6deg);
  }
  .bm-quote__card:has(.bm-quote__btn:hover)::after{
    opacity:1;
  }
}

/* Fallback class (ha JS adja rá) */
.bm-quote__card.is-tilt{
  transform: translate3d(10px,-2px,0) rotate(0.6deg);
}


/* CTA gombok: nyíl hoverre, helyet magának csinál */
.bm-hero__cta .bm-btn{
  display: inline-flex;
  align-items: center;
}

/* a nyíl alapból "összecsukva" */
.bm-hero__cta .bm-btn::after{
  content: "→";
  display: inline-block;

  width: 0;                 /* nincs helye */
  overflow: hidden;         /* ne lógjon ki */
  opacity: 0;

  margin-left: 0;
  transform: translateX(-6px);

  transition:
    width .18s ease,
    margin-left .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* hoverre kibomlik -> helyet csinál */
.bm-hero__cta .bm-btn:hover::after,
.bm-hero__cta .bm-btn:focus-visible::after{
  width: 1.1em;             /* nyíl szélessége */
  opacity: 1;
  transform: translateX(0);
}
/* CTA gombok – szöveg marad középen, nyíl hoverre jelenik meg */
.bm-hero__cta .bm-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;           /* közép */
  padding-right: 18px;               /* alap */
  transition: padding-right .18s ease;
}

.bm-hero__cta .bm-btn::after{
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.bm-hero__cta .bm-btn:hover,
.bm-hero__cta .bm-btn:focus-visible{
  padding-right: 32px;               /* hoverre helyet csinál a nyílnak */
}

.bm-hero__cta .bm-btn:hover::after,
.bm-hero__cta .bm-btn:focus-visible::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* ha van fixed header, állítsd */
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
html { scroll-behavior: auto; } /* Lenis mellett ezt kapcsold ki */
:root{
  --bm-blue: #2F3CFF; /* ha más a logó kéke, írd át */
}

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--bm-blue) rgba(255,255,255,.08);
}

/* Chrome / Brave / Edge / Safari */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--bm-blue), rgba(47,60,255,.72));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35); /* sötét háttérnél szép "inset" hatás */
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(47,60,255,1), rgba(47,60,255,.85));
}

::-webkit-scrollbar-corner{
  background: transparent;
}