.showcase-section{
  position:relative;
  min-height:calc(100vh - 98px);
  padding:clamp(44px,6vw,88px) 0 clamp(54px,7vw,100px);
  overflow:hidden;
  direction:rtl;
  background:
    radial-gradient(circle at 12% 18%,rgba(89,169,255,.16),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(255,205,153,.18),transparent 26%),
    linear-gradient(135deg,#f8fbff 0%,#eef6fd 45%,#fffaf5 100%);
  font-family:'Vazirmatn',sans-serif;
}
.showcase-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.62),rgba(255,255,255,.18));
}
.showcase-container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(18px,4vw,64px);
  box-sizing:border-box;
}
.showcase-header{
  margin:0 0 clamp(34px,4vw,58px);
  text-align:center;
}
.showcase-header h1,
.showcase-header h2{
  display:inline-block;
  position:relative;
  margin:0;
  padding-bottom:15px;
  color:#10233d;
  font-size:clamp(34px,4vw,56px);
  line-height:1.25;
  font-weight:900;
}
.showcase-header h1::after,
.showcase-header h2::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:0;
  width:58px;
  height:3px;
  border-radius:999px;
  transform:translateX(50%);
  background:#0b7cff;
}
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.7vw,28px);
}
.showcase-box{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(245,250,255,.48));
  box-shadow:0 18px 48px rgba(25,65,105,.11),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  transition:box-shadow .25s ease,border-color .25s ease;
}
.showcase-box:hover{
  border-color:rgba(255,255,255,1);
  box-shadow:0 24px 58px rgba(25,65,105,.16),inset 0 1px 0 #fff;
}
.showcase-media{
  position:relative;
  height:clamp(220px,19vw,320px);
  margin:10px 10px 0;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.5);
}
.showcase-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 64%,rgba(245,250,255,.18));
}
.showcase-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.showcase-box:hover .showcase-image{transform:scale(1.035)}
.showcase-content{
  display:flex;
  min-height:245px;
  padding:clamp(22px,2vw,32px);
  box-sizing:border-box;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.showcase-title{
  margin:0 0 12px;
  color:#12243d;
  font-size:clamp(20px,1.55vw,28px);
  line-height:1.5;
  font-weight:900;
}
.showcase-description{
  margin:0;
  color:#5b6878;
  font-size:clamp(13px,.9vw,15px);
  line-height:1.95;
  font-weight:500;
}
.showcase-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  margin-top:auto;
  padding:8px 18px;
  border:1px solid rgba(11,124,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:#0877ed;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  box-shadow:0 7px 20px rgba(11,124,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.showcase-button:hover{
  background:#087cff;
  color:#fff;
  transform:translateY(-1px);
}
.showcase-button:focus-visible{
  outline:3px solid rgba(8,124,255,.24);
  outline-offset:3px;
}
@media(max-width:900px){
  .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-box:last-child{grid-column:1/-1;width:min(100%,calc(50% - 8px));justify-self:center}
}
@media(max-width:640px){
  .showcase-section{padding:34px 0 54px}
  .showcase-container{padding:0 14px}
  .showcase-header{margin-bottom:28px}
  .showcase-grid{grid-template-columns:1fr;gap:18px}
  .showcase-box:last-child{grid-column:auto;width:100%}
  .showcase-media{height:240px}
  .showcase-content{min-height:220px;padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  .showcase-box,.showcase-image,.showcase-button{transition:none}
}

/* Show the complete product image while filling every media frame */
.showcase-media{
  isolation:isolate;
  background:#dfe8f1;
}
.showcase-media::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-18px;
  background-image:var(--showcase-bg);
  background-size:cover;
  background-position:center;
  filter:blur(20px) saturate(.9);
  transform:scale(1.12);
  opacity:.72;
}
.showcase-media::after{
  z-index:1;
  background:linear-gradient(180deg,rgba(10,31,50,.04),rgba(10,31,50,.12));
}
.showcase-image{
  position:relative;
  z-index:2;
  object-fit:contain;
}
.showcase-box:nth-child(1) .showcase-media{--showcase-bg:url("/source/images/Content-Battery.jpg")}
.showcase-box:nth-child(2) .showcase-media{--showcase-bg:url("/source/images/Content-Electronic-Components.jpg")}
.showcase-box:nth-child(3) .showcase-media{--showcase-bg:url("/source/images/Content_PCB_PCBA.jpg")}

/* Keep edge-fill treatment only for Battery; restore original cover crop for Electronics and PCB */
.showcase-box:nth-child(2) .showcase-media::before,
.showcase-box:nth-child(3) .showcase-media::before{
  display:none;
}
.showcase-box:nth-child(2) .showcase-image,
.showcase-box:nth-child(3) .showcase-image{
  object-fit:cover;
}

/* Standalone Products page background continues beneath the floating header.
   The shared Products section on the homepage is intentionally excluded. */
body > main > .showcase-section:not(.home-six__shared-products){
  margin-top:-98px;
  min-height:calc(100vh + 98px);
  padding-top:calc(clamp(44px,6vw,88px) + 98px);
}
@media(max-width:768px){
  body > main > .showcase-section:not(.home-six__shared-products){
    margin-top:-82px;
    min-height:calc(100vh + 82px);
    padding-top:calc(clamp(34px,6vw,54px) + 82px);
  }
}

/* Product items are always visible; page navigation animation remains separate */
.showcase-box,
.showcase-box.animate-in{
  opacity:1;
  transition:box-shadow .25s ease,border-color .25s ease;
}