/* =========================================================
   HERO (slider)
   - slider-bg.png overlays the slider and fills it 100%
   ========================================================= */

.hm-hero{
  position: relative;
  width: 100%;
  margin-top: calc(-1 * var(--hm-nav-h));

  /* desktop offsets */
  --hm-hero-copy-x: -250px;
  --hm-hero-copy-y: 70px;
  --hm-hero-ui-right: 28px;
  --hm-hero-scroll-bottom: 40px;
  --hm-hero-dots-bottom: 84px;

  /* Logo controls (DESKTOP default) */
  --hm-hero-logo-top: 102px;
  --hm-hero-logo-left: 14px;
  --hm-hero-logo-size: clamp(160px, 14vw, 300px);
  --hm-hero-logo-x: 0px;

  /* Content panel controls (MOBILE/TABLET) */
  --hm-panel-max: 420px;
  --hm-panel-x: 0px;
  --hm-panel-y: 0px;
  --hm-panel-pad: 18px 16px 16px;
  --hm-panel-radius: 26px;
  --hm-panel-bg: rgba(255,255,255,.78);
  --hm-panel-border: rgba(15,23,42,.12);
  --hm-panel-shadow: 0 22px 60px rgba(15,23,42,.14);
  --hm-panel-blur: 10px;

  /* NEW: mobile logo spacing (gap between logo and panel) */
  --hm-mobile-logo-gap: 12px;
}

.hm-hero__slider{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  padding-top: var(--hm-nav-h);
  overflow: hidden;
  background: #0b2a1f;
}

@media (max-width: 980px){
  .hm-hero__slider{ min-height: 600px; }
}

@media (max-width: 520px){
  .hm-hero__slider{ min-height: 560px; }
}

.hm-hero__slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 900ms ease, transform 2400ms cubic-bezier(.2,.8,.2,1);
  filter: saturate(1.05) contrast(1.02);
  z-index: 0;
}

.hm-hero__slide.is-active{
  opacity: 1;
  transform: scale(1.01);
}

.hm-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 26% 40%, rgba(15,23,42,.58), rgba(15,23,42,0) 70%),
    linear-gradient(90deg, rgba(15,23,42,.52), rgba(15,23,42,.06) 60%);
  z-index: 1;
}

.hm-hero__frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   LANGUAGE TOGGLE INSIDE HERO (TOP-LEFT)
   - Desktop + Mobile
   ========================================================= */
.hm-langToggle--hero{
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 9999; /* above overlay/frame/logo */
}



/* =========================================================
   HERO LOGO (brand)
   ========================================================= */
.hm-heroLogo{
  position: absolute;
  top: var(--hm-hero-logo-top);
  left: var(--hm-hero-logo-left);
  transform: translateX(var(--hm-hero-logo-x));
  z-index: 5;
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
}

.hm-heroLogo__img{
  height: var(--hm-hero-logo-size);
  width: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(15,23,42,.18));
  user-select: none;
}

/* Content */
.hm-hero__content{
  position: relative;
  z-index: 3;
  height: 100%;
  display:flex;
  align-items:center;
  padding-top: var(--hm-nav-h);
}

/* move wrapper, not copy */
.hm-hero__copyPos{
  transform: translate(var(--hm-hero-copy-x), var(--hm-hero-copy-y));
  will-change: transform;
}

.hm-hero__copy{
  max-width: 640px;
  padding-top: 20px;
  color: #0b1a14;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* =========================================================
   HERO CALL BADGE
   ========================================================= */
.hm-callBadge{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  min-width: 360px;
  border-radius: 999px;
  text-decoration: none;

  background: linear-gradient(135deg, rgba(31,138,91,.98), rgba(23,112,74,.92), rgba(201,162,39,.32));
  border: 1px solid rgba(31,138,91,.35);
  color: #fff;

  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);

  position: relative;
  overflow: hidden;

  animation: hmCallFloat 2.2s ease-in-out infinite;
  box-shadow: 0 22px 60px rgba(15,23,42,.16);
  will-change: transform;
}

.hm-callBadge__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, rgba(31,138,91,.18), rgba(201,162,39,.18));
  border: 1px solid rgba(31,138,91,.18);
  color: #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 22px rgba(31,138,91,.14);
}

.hm-callBadge__icon svg{ width: 21px; height: 21px; }

.hm-callBadge__text{ display: grid; line-height: 1.05; }

.hm-callBadge__label{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,.82);
}

.hm-callBadge__phone{
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: .02em;
}

.hm-callBadge__sheen{
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.45) 35%,
    transparent 70%
  );
  transform: translateX(-120%);
  opacity: .85;
  animation: hmCallSheen 2.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hmCallFloat{
  0%, 100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-3px,0); }
}

@keyframes hmCallSheen{
  0%{ transform: translateX(-130%); }
  55%{ transform: translateX(130%); }
  100%{ transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce){
  .hm-callBadge,
  .hm-callBadge__sheen{ animation: none !important; }
}

/* Typography */
.hm-hero__h1{
  margin: 14px 0 10px;
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #0b1a14;
}

.hm-hero__p{
  margin: 0;
  max-width: 560px;
  line-height: 1.7;
  font-size: 16px;
  color: rgba(11,26,20,.78);
}

.hm-hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* CTA */
.hm-cta{
  position: relative;
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  letter-spacing: .2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid transparent;
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hm-cta__sheen{
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  pointer-events:none;
  opacity: 0;
  transform: translateX(-22%);
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.52), rgba(255,255,255,0));
  transition: opacity 220ms ease, transform 460ms cubic-bezier(.2,.8,.2,1);
}

.hm-cta:hover .hm-cta__sheen{
  opacity: 1;
  transform: translateX(22%);
}

.hm-cta--primary{
  color:#0b1a14;
  background: linear-gradient(135deg, #ffe08a, #c9a227);
  box-shadow: 0 18px 50px rgba(201,162,39,.26), inset 0 1px 0 rgba(255,255,255,.35);
}

.hm-cta:hover{ transform: translateY(-2px); }

/* Badges */
.hm-hero__badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hm-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,26,20,.12);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(11,26,20,.86);
  font-weight: 900;
  font-size: 13px;
}

.hm-badge::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(31,138,91,.9);
  box-shadow: 0 0 0 6px rgba(31,138,91,.20);
}

/* Slider dots + scroll (unchanged) */
.hm-hero__ui{
  position: absolute;
  right: var(--hm-hero-ui-right);
  bottom: var(--hm-hero-dots-bottom);
  left: auto;
  transform: none;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  z-index: 5;
}

.hm-heroDot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.16);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform 160ms ease, background 160ms ease;
}

.hm-heroDot.is-active{
  transform: scale(1.18);
  background: linear-gradient(135deg, #ffe08a, #c9a227);
  border-color: rgba(255,255,255,.75);
}

.hm-hero__scroll{
  position:absolute;
  right: var(--hm-hero-ui-right);
  bottom: var(--hm-hero-scroll-bottom);
  display:flex;
  align-items:center;
  gap: 10px;
  z-index: 4;
  color: rgba(255,255,255,.74);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* =========================================================
   ✅ MOBILE RESPONSIVE RULE (ALL PHONES)
   - Logo centered TOP (auto)
   - Small gap
   - Content panel right under logo
   ========================================================= */
@media (max-width: 980px){

  .hm-hero__slider{
    padding-top: 0;
  }
  /* Put logo in normal flow and center it */
  .hm-heroLogo{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: calc(env(safe-area-inset-top, 0px) + 14px);
    margin-bottom: var(--hm-mobile-logo-gap);
    z-index: 6;
  }

  /* Responsive logo size on any phone */
  .hm-heroLogo__img{
    height: clamp(110px, 22vw, 170px);
  }

  /* Stop desktop translate on mobile */
  .hm-hero__copyPos{
    transform: none !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Let content start under logo (no vertical centering) */
  .hm-hero__content{
    height: auto;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 18px;
  }

  /* Content becomes the glass panel */
  .hm-hero__copy{
    width: 100%;
    max-width: min(var(--hm-panel-max), calc(100vw - 24px));
    margin: 0 auto;

    background: var(--hm-panel-bg);
    border: 1px solid var(--hm-panel-border);
    border-radius: var(--hm-panel-radius);
    padding: var(--hm-panel-pad);
    box-shadow: var(--hm-panel-shadow);

    backdrop-filter: blur(var(--hm-panel-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--hm-panel-blur)) saturate(1.1);

    transform: translate(var(--hm-panel-x), var(--hm-panel-y));
  }

  /* Make call badge auto-fit on small phones */
  .hm-callBadge{
    min-width: 0;
    width: 100%;
    max-width: 360px;
  }
}

/* Extra tiny phones (optional compactness, but still generic) */
@media (max-width: 375px){
  .hm-hero{ --hm-panel-pad: 14px 12px 12px; --hm-panel-radius: 20px; }
  .hm-hero__h1{ font-size: 30px; }
  .hm-hero__p{ font-size: 13px; line-height: 1.5; }
  .hm-callBadge{ padding: 10px 12px; gap: 10px; max-width: 320px; }
  .hm-callBadge__icon{ width: 34px; height: 34px; }
  .hm-callBadge__label{ font-size: 10px; }
  .hm-callBadge__phone{ font-size: 13px; }
}