/* MIYAAR Homepage — Stage 6.5 / section 3 exact composition
   Scope: homepage third section only. Loaded after Stage 6.4. */

.miyaar-home-reference .mi-home-ref-service{
  padding:20px 0 64px!important;
  background:var(--mi-surface)!important;
}

.miyaar-home-reference .mi-home-ref-service .mi-container{
  width:min(calc(100% - 40px),1120px)!important;
}

.miyaar-home-reference .mi-home-ref-service__card{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) 118px!important;
  grid-template-areas:"action copy icon"!important;
  align-items:center!important;
  gap:clamp(28px,4vw,56px)!important;
  min-height:234px!important;
  padding:34px 38px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:27px!important;
  background:
    radial-gradient(circle at 96% 106%,rgba(255,255,255,.075) 0 86px,transparent 87px),
    radial-gradient(circle at 100% 112%,rgba(255,255,255,.035) 0 146px,transparent 147px),
    linear-gradient(108deg,#070b25 0%,#14102e 39%,color-mix(in srgb,var(--mi-brand) 70%,#24143d) 100%)!important;
  box-shadow:0 28px 48px rgba(7,11,37,.20)!important;
  overflow:hidden!important;
  direction:ltr!important;
}

.miyaar-home-reference .mi-home-ref-service__card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(3,8,32,.24),transparent 52%,rgba(255,255,255,.018));
  pointer-events:none;
}

.miyaar-home-reference .mi-home-ref-service__card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:188px;
  height:188px;
  inset:auto -76px -86px auto;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
  box-shadow:0 0 0 40px rgba(255,255,255,.018),0 0 0 82px rgba(255,255,255,.012);
  pointer-events:none;
}

.miyaar-home-reference .mi-home-ref-service__icon{
  grid-area:icon!important;
  justify-self:end!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:112px!important;
  height:112px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.07))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 16px 34px rgba(0,0,0,.13)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  direction:rtl!important;
}
.miyaar-home-reference .mi-home-ref-service__icon svg{
  width:50px!important;
  height:50px!important;
  opacity:.94!important;
  stroke-width:1.7!important;
}
.miyaar-home-reference .mi-home-ref-service__icon strong{
  position:absolute!important;
  right:9px!important;
  bottom:8px!important;
  left:auto!important;
  top:auto!important;
  display:grid!important;
  min-width:32px!important;
  height:24px!important;
  place-items:center!important;
  padding:0 6px!important;
  border-radius:7px!important;
  background:#fff!important;
  color:color-mix(in srgb,var(--mi-brand) 85%,#23133d)!important;
  font-size:9px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 7px 17px rgba(0,0,0,.14)!important;
}

.miyaar-home-reference .mi-home-ref-service__copy{
  grid-area:copy!important;
  min-width:0!important;
  color:#fff!important;
  direction:rtl!important;
  text-align:right!important;
}
.miyaar-home-reference .mi-home-ref-service__copy>span{
  display:block!important;
  margin:0 0 8px!important;
  color:rgba(255,255,255,.66)!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.5!important;
}
.miyaar-home-reference .mi-home-ref-service__copy h2{
  margin:0!important;
  max-width:820px!important;
  color:#fff!important;
  font-size:clamp(30px,3.15vw,45px)!important;
  font-weight:950!important;
  line-height:1.18!important;
  letter-spacing:-.65px!important;
}
.miyaar-home-reference .mi-home-ref-service__copy p{
  max-width:780px!important;
  margin:9px 0 0!important;
  color:rgba(255,255,255,.72)!important;
  font-size:12.5px!important;
  line-height:1.9!important;
}

.miyaar-home-reference .mi-home-ref-service__facts{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:7px!important;
  margin:16px 0 0!important;
}
.miyaar-home-reference .mi-home-ref-service__facts span{
  display:inline-flex!important;
  min-height:28px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:0 11px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:rgba(255,255,255,.84)!important;
  font-size:9.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.miyaar-home-reference .mi-home-ref-service__facts span+span::before{display:none!important}
.miyaar-home-reference .mi-home-ref-service__facts b{color:#fff!important;font-size:9.5px!important}

.miyaar-home-reference .mi-home-ref-service__action{
  grid-area:action!important;
  justify-self:start!important;
  display:inline-flex!important;
  width:auto!important;
  min-width:132px!important;
  min-height:52px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 18px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:16px!important;
  background:#fff!important;
  color:color-mix(in srgb,var(--mi-brand) 84%,#17122f)!important;
  font-size:11px!important;
  font-weight:950!important;
  text-decoration:none!important;
  box-shadow:0 14px 30px rgba(0,0,0,.15)!important;
  direction:rtl!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.miyaar-home-reference .mi-home-ref-service__action svg{width:15px!important;height:15px!important}
.miyaar-home-reference .mi-home-ref-service__action:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.21)!important;
}
.miyaar-home-reference .mi-home-ref-service__action:focus-visible{
  outline:3px solid color-mix(in srgb,#fff 70%,var(--mi-accent))!important;
  outline-offset:4px!important;
}

@media(max-width:980px){
  .miyaar-home-reference .mi-home-ref-service .mi-container{width:min(calc(100% - 32px),1120px)!important}
  .miyaar-home-reference .mi-home-ref-service__card{
    grid-template-columns:132px minmax(0,1fr) 96px!important;
    gap:24px!important;
    min-height:220px!important;
    padding:30px!important;
  }
  .miyaar-home-reference .mi-home-ref-service__icon{width:94px!important;height:94px!important;border-radius:22px!important}
  .miyaar-home-reference .mi-home-ref-service__icon svg{width:43px!important;height:43px!important}
  .miyaar-home-reference .mi-home-ref-service__copy h2{font-size:clamp(28px,4vw,38px)!important}
}

@media(max-width:760px){
  .miyaar-home-reference .mi-home-ref-service{padding:18px 0 46px!important}
  .miyaar-home-reference .mi-home-ref-service__card{
    grid-template-columns:82px minmax(0,1fr)!important;
    grid-template-areas:
      "copy icon"
      "action action"!important;
    gap:20px!important;
    min-height:0!important;
    padding:24px 22px!important;
    border-radius:23px!important;
  }
  .miyaar-home-reference .mi-home-ref-service__icon{width:80px!important;height:80px!important;border-radius:20px!important}
  .miyaar-home-reference .mi-home-ref-service__icon svg{width:36px!important;height:36px!important}
  .miyaar-home-reference .mi-home-ref-service__copy h2{font-size:28px!important}
  .miyaar-home-reference .mi-home-ref-service__copy p{font-size:11.5px!important}
  .miyaar-home-reference .mi-home-ref-service__action{width:100%!important;justify-self:stretch!important}
}

@media(max-width:520px){
  .miyaar-home-reference .mi-home-ref-service .mi-container{width:min(calc(100% - 24px),1120px)!important}
  .miyaar-home-reference .mi-home-ref-service__card{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "icon"
      "copy"
      "action"!important;
    gap:16px!important;
    padding:22px 18px!important;
  }
  .miyaar-home-reference .mi-home-ref-service__icon{justify-self:end!important}
  .miyaar-home-reference .mi-home-ref-service__copy h2{font-size:26px!important}
  .miyaar-home-reference .mi-home-ref-service__facts{gap:6px!important}
  .miyaar-home-reference .mi-home-ref-service__facts span{padding-inline:9px!important;font-size:9px!important}
}

@media(prefers-reduced-motion:reduce){
  .miyaar-home-reference .mi-home-ref-service__action{transition:none!important}
  .miyaar-home-reference .mi-home-ref-service__action:hover{transform:none!important}
}