/* Holo Frontier Hero Banner Styles */
.hf-hero{
  --hf-navy:#132749;
  --hf-navy-2:#1C3560;
  --hf-navy-3:#0C1B33;
  --hf-gold:#FFD54A;
  --hf-orange:#FF7A2F;
  --hf-white:#FFFFFF;
  --hf-text-muted:#AEB9CF;

  width:100%;
  max-width:1290px;
  margin:20px auto 40px;
  border-radius:16px;
  background:radial-gradient(circle at 82% 30%, var(--hf-navy-2) 0%, var(--hf-navy) 50%, var(--hf-navy-3) 100%);
  background-size:cover;
  background-position:center;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  align-items:center;
  overflow:hidden;
  position:relative;
  min-height:700px;
  box-sizing:border-box;
}
.hf-hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hf-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(120deg, rgba(12,27,51,0.92) 0%, rgba(12,27,51,0.80) 45%, rgba(12,27,51,0.55) 100%);
}
.hf-hero-text, .hf-art{ position:relative; z-index:2; }
.hf-hero *{box-sizing:border-box;}

.hf-hero-text{
  padding:52px 20px 52px 56px;
  position:relative;
  z-index:3;
  animation:hfFadeUp 0.8s ease both;
}
@keyframes hfFadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

.hf-service-pill{
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,213,74,0.35);
  border-radius:30px;
  padding:8px 6px;
  margin-bottom:22px;
}
.hf-service-pill span{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.4px;
  color:var(--hf-white);
  padding:6px 12px;
}
.hf-service-pill span.hf-sep{color:var(--hf-gold);padding:6px 2px;font-weight:400;}

.hf-hero-text h1{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:38px;
  line-height:1.18;
  color:var(--hf-white);
  margin:0 0 16px;
}
.hf-hero-text h1 span{color:var(--hf-gold);}
.hf-hero-text p{
  color:var(--hf-text-muted);
  font-size:14.5px;
  line-height:1.6;
  max-width:430px;
  margin:0 0 26px;
}

.hf-btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.hf-btn-primary{
  background:var(--hf-orange);color:var(--hf-white);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  padding:14px 26px;border-radius:8px;text-decoration:none;display:inline-block;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.hf-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,122,47,0.35);color:var(--hf-white);}
.hf-btn-secondary{
  background:transparent;color:var(--hf-white);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  padding:14px 26px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.4);
  text-decoration:none;display:inline-block;
  transition:transform 0.2s ease, background 0.2s ease;
}
.hf-btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,0.08);color:var(--hf-white);}

/* ---- product art side (desktop) ---- */
.hf-art{
  position:relative;
  height:100%;
  min-height:700px;
}
.hf-glow{
  position:absolute;
  width:420px;height:420px;
  right:10px;top:60px;
  background:radial-gradient(circle, rgba(255,213,74,0.18) 0%, transparent 70%);
  animation:hfPulse 4.5s ease-in-out infinite;
}
@keyframes hfPulse{
  0%,100%{opacity:0.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.08);}
}

.hf-card-float{position:absolute;animation:hfFloatY 4.5s ease-in-out infinite;}
@keyframes hfFloatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@keyframes hfCardIn{
  from{opacity:0;transform:scale(0.85) rotate(var(--hf-rot,0deg)) translateY(20px);}
  to{opacity:1;transform:scale(1) rotate(var(--hf-rot,0deg)) translateY(0);}
}

.hf-product-card{
  width:190px;
  background:var(--hf-white);
  border-radius:12px;
  box-shadow:0 20px 45px rgba(0,0,0,0.45);
  overflow:hidden;
  z-index:2;
  position:relative;
  text-decoration:none;
  display:block;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  animation:hfCardIn 0.7s ease both;
}
.hf-product-card:hover{
  transform:scale(1.05) rotate(0deg) !important;
  box-shadow:0 24px 50px rgba(0,0,0,0.55), 0 0 0 2px var(--hf-gold);
  z-index:5;
}

.hf-product-photo{
  height:170px;
  background-color:#EEF1F5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hf-product-photo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.hf-product-info{padding:12px 14px 14px;}
.hf-product-info .hf-pname{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--hf-navy);
  margin:0 0 5px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hf-product-info .hf-pprice{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:14.5px;
  color:var(--hf-orange);
  margin:0;
}
.hf-price-old{
  color:#9aa0ac;
  font-weight:500;
  font-size:11px;
  text-decoration:line-through;
  margin-right:6px;
}
.hf-badge{
  position:absolute;
  top:8px;left:8px;
  background:var(--hf-gold);
  color:var(--hf-navy);
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:9px;
  padding:3px 8px;
  border-radius:10px;
  z-index:3;
}

.hf-card-1{ top:30px; right:230px; animation-delay:0s; }
.hf-card-1 .hf-product-card{ --hf-rot:-6deg; animation-delay:0.1s; }

.hf-card-2{ top:210px; right:30px; z-index:3; animation-delay:0.8s; }
.hf-card-2 .hf-product-card{ --hf-rot:4deg; animation-delay:0.3s; }

.hf-card-3{ top:390px; right:200px; animation-delay:1.5s; }
.hf-card-3 .hf-product-card{ --hf-rot:-3deg; animation-delay:0.5s; }

/* ---- mobile horizontal product row ---- */
.hf-mobile-products{display:none;}

@media (max-width:900px){
  .hf-hero{grid-template-columns:1fr;min-height:auto;margin:16px 0 32px;}
  .hf-art{display:none;}
  .hf-hero-text{padding:36px 22px 8px;}
  .hf-hero-text h1{font-size:27px;}
  .hf-hero-text p{max-width:none;}

  .hf-mobile-products{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:22px;
    padding:18px 22px 28px !important;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hf-mobile-products::-webkit-scrollbar{display:none;}

  .hf-mobile-products .hf-product-card{
    flex:0 0 auto;
    width:150px;
    scroll-snap-align:start;
    animation:none;
    opacity:1;
    transform:none;
  }
}