/* MIYAAR Homepage — Stage 6.4 / reference sections refresh
   Scope: homepage sections 2 + 3 only (fields scroller + featured service card). */

/* Section 2 — compact learning-fields explorer */
.miyaar-home-reference .mi-home-ref-fields{
  padding:44px 0 26px!important;
  background:var(--mi-surface)!important;
  overflow:visible!important;
}
.miyaar-home-reference .mi-home-ref-fields::before{display:none!important}
.miyaar-home-reference .mi-home-ref-fields__shell{
  display:grid!important;
  grid-template-columns:minmax(250px,290px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:22px!important;
  padding:26px 28px!important;
  border:1px solid color-mix(in srgb,var(--mi-brand) 13%,var(--mi-border))!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 84% 112%,color-mix(in srgb,var(--mi-brand) 11%,transparent) 0 92px,transparent 93px),
    linear-gradient(135deg,color-mix(in srgb,var(--mi-brand) 6%,var(--mi-surface)),color-mix(in srgb,var(--mi-accent) 5%,var(--mi-surface)))!important;
  box-shadow:0 12px 34px rgba(15,23,42,.035)!important;
  direction:rtl;
}
.miyaar-home-reference .mi-home-ref-fields__copy{
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:4px 16px!important;
  padding:0!important;
  min-width:0;
}
.miyaar-home-reference .mi-home-ref-fields__kicker{
  grid-column:1!important;
  grid-row:1/3!important;
  display:flex!important;
  width:66px!important;
  min-height:78px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:10px 8px!important;
  border-radius:20px!important;
  background:var(--mi-brand)!important;
  color:var(--mi-brand-contrast,#fff)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.45!important;
  text-align:center!important;
  box-shadow:0 10px 22px color-mix(in srgb,var(--mi-brand) 20%,transparent)!important;
}
.miyaar-home-reference .mi-home-ref-fields__copy>div{
  grid-column:2!important;
  min-width:0;
}
.miyaar-home-reference .mi-home-ref-fields__copy h2{
  max-width:none!important;
  margin:0!important;
  color:var(--mi-text)!important;
  font-size:clamp(22px,2vw,30px)!important;
  font-weight:950!important;
  line-height:1.18!important;
  letter-spacing:-.4px!important;
}
.miyaar-home-reference .mi-home-ref-fields__copy p{
  max-width:270px!important;
  margin:7px 0 0!important;
  color:var(--mi-text-muted)!important;
  font-size:11px!important;
  line-height:1.8!important;
}
.miyaar-home-reference .mi-home-ref-fields__all-link{display:none!important}

.miyaar-home-reference .mi-home-ref-fields__list.mi-home-fields__grid{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:10px!important;
  min-width:0!important;
  padding:7px 4px 11px!important;
  border:0!important;
  background:transparent!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--mi-text-muted) 42%,transparent) transparent;
  direction:rtl;
}
.miyaar-home-reference .mi-home-ref-fields__list::-webkit-scrollbar{height:6px}
.miyaar-home-reference .mi-home-ref-fields__list::-webkit-scrollbar-track{background:transparent}
.miyaar-home-reference .mi-home-ref-fields__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--mi-text-muted) 34%,transparent)}
.miyaar-home-reference .mi-home-ref-field.mi-home-field-card{
  flex:0 0 clamp(210px,23vw,260px)!important;
  scroll-snap-align:start;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto 16px!important;
  align-items:center!important;
  gap:9px!important;
  min-height:64px!important;
  padding:11px 12px!important;
  border:1px solid color-mix(in srgb,var(--mi-brand) 11%,var(--mi-border))!important;
  border-radius:17px!important;
  background:color-mix(in srgb,var(--mi-surface) 97%,var(--mi-brand))!important;
  box-shadow:0 6px 16px rgba(15,23,42,.025)!important;
  overflow:hidden!important;
  transform:none!important;
}
.miyaar-home-reference .mi-home-ref-field.mi-home-field-card:hover{
  background:var(--mi-surface)!important;
  border-color:color-mix(in srgb,var(--mi-brand) 28%,var(--mi-border))!important;
  box-shadow:0 10px 24px rgba(15,23,42,.055)!important;
  transform:translateY(-1px)!important;
}
.miyaar-home-reference .mi-home-ref-field::after{display:none!important}
.miyaar-home-reference .mi-home-ref-field__mark{
  width:32px!important;
  height:32px!important;
  border:0!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--mi-brand) 9%,var(--mi-surface))!important;
  color:var(--mi-brand)!important;
  font-size:12px!important;
}
.miyaar-home-reference .mi-home-ref-field__name{
  font-size:11.5px!important;
  font-weight:900!important;
}
.miyaar-home-reference .mi-home-ref-field__count{
  min-width:23px!important;
  height:23px!important;
  padding:0 5px!important;
  background:color-mix(in srgb,var(--mi-brand) 8%,var(--mi-surface))!important;
  color:color-mix(in srgb,var(--mi-brand) 72%,var(--mi-text))!important;
  font-size:9px!important;
}
.miyaar-home-reference .mi-home-ref-field__arrow svg{width:12px!important;height:12px!important}
.miyaar-home-reference .mi-home-ref-fields__all{
  flex:0 0 132px!important;
  scroll-snap-align:start;
  display:flex!important;
  min-height:64px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:10px 12px!important;
  border:1px dashed color-mix(in srgb,var(--mi-brand) 24%,var(--mi-border))!important;
  border-radius:17px!important;
  background:color-mix(in srgb,var(--mi-surface) 96%,var(--mi-brand))!important;
  color:var(--mi-brand)!important;
  font-size:10px!important;
  text-align:center!important;
  white-space:nowrap;
}
.miyaar-home-reference .mi-home-ref-fields__all:hover{background:var(--mi-surface)!important}

/* Section 3 — dark feature/service card */
.miyaar-home-reference .mi-home-ref-service{
  padding:20px 0 58px!important;
  background:var(--mi-surface)!important;
}
.miyaar-home-reference .mi-home-ref-service__card{
  position:relative!important;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:124px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(24px,3.5vw,46px)!important;
  min-height:228px!important;
  padding:32px 38px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 95% 108%,rgba(255,255,255,.08) 0 95px,transparent 96px),
    linear-gradient(110deg,#070d2b 0%,color-mix(in srgb,var(--mi-brand) 58%,#11102c) 58%,color-mix(in srgb,var(--mi-brand) 78%,#2a163f) 100%)!important;
  box-shadow:0 24px 42px rgba(10,15,35,.20)!important;
  overflow:hidden!important;
  direction:rtl;
}
.miyaar-home-reference .mi-home-ref-service__card::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -55px -95px auto;
  width:230px;
  height:230px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 42px rgba(255,255,255,.022),0 0 0 84px rgba(255,255,255,.018);
  pointer-events:none;
}
.miyaar-home-reference .mi-home-ref-service__icon{
  position:relative!important;
  width:108px!important;
  height:108px!important;
  border:1px solid rgba(255,255,255,.19)!important;
  border-radius:25px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 32px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(8px);
}
.miyaar-home-reference .mi-home-ref-service__icon svg{width:48px!important;height:48px!important;opacity:.9}
.miyaar-home-reference .mi-home-ref-service__icon strong{
  inset:auto 10px 9px auto!important;
  min-width:31px!important;
  height:24px!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--mi-brand)!important;
  font-size:9px!important;
  box-shadow:0 6px 16px rgba(0,0,0,.12)!important;
}
.miyaar-home-reference .mi-home-ref-service__copy{min-width:0!important;color:#fff!important}
.miyaar-home-reference .mi-home-ref-service__copy>span{
  margin-bottom:8px!important;
  color:rgba(255,255,255,.64)!important;
  font-size:10px!important;
  font-weight:850!important;
}
.miyaar-home-reference .mi-home-ref-service__copy h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(28px,3.2vw,43px)!important;
  font-weight:950!important;
  line-height:1.2!important;
  letter-spacing:-.55px!important;
}
.miyaar-home-reference .mi-home-ref-service__copy p{
  max-width:760px!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;
  gap:8px!important;
  margin-top:17px!important;
}
.miyaar-home-reference .mi-home-ref-service__facts span{
  display:inline-flex!important;
  min-height:29px!important;
  align-items:center!important;
  gap:4px!important;
  padding:0 11px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:rgba(255,255,255,.83)!important;
  font-size:10px!important;
  font-weight:800!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:10px!important}
.miyaar-home-reference .mi-home-ref-service__action{
  display:inline-flex!important;
  min-width:132px!important;
  min-height:50px!important;
  padding:0 20px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:16px!important;
  background:#fff!important;
  color:color-mix(in srgb,var(--mi-brand) 82%,#15142f)!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:0 13px 28px rgba(0,0,0,.14)!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 17px 34px rgba(0,0,0,.20)!important;
}

@media(max-width:980px){
  .miyaar-home-reference .mi-home-ref-fields__shell{grid-template-columns:1fr!important;gap:18px!important;padding:22px!important}
  .miyaar-home-reference .mi-home-ref-fields__copy{grid-template-columns:62px 1fr!important;max-width:520px}
  .miyaar-home-reference .mi-home-ref-fields__list.mi-home-fields__grid{width:100%!important}
  .miyaar-home-reference .mi-home-ref-service__card{grid-template-columns:100px minmax(0,1fr)!important;padding:28px!important}
  .miyaar-home-reference .mi-home-ref-service__icon{width:94px!important;height:94px!important}
  .miyaar-home-reference .mi-home-ref-service__action{grid-column:2!important;justify-self:start!important}
}
@media(max-width:680px){
  .miyaar-home-reference .mi-home-ref-fields{padding:34px 0 20px!important}
  .miyaar-home-reference .mi-home-ref-fields__shell{padding:18px!important;border-radius:22px!important}
  .miyaar-home-reference .mi-home-ref-fields__copy{grid-template-columns:56px minmax(0,1fr)!important;text-align:start!important}
  .miyaar-home-reference .mi-home-ref-fields__kicker{width:56px!important;min-height:68px!important;border-radius:16px!important;font-size:9px!important}
  .miyaar-home-reference .mi-home-ref-fields__copy h2{font-size:23px!important}
  .miyaar-home-reference .mi-home-ref-fields__copy p{max-width:none!important;margin:5px 0 0!important;font-size:10.5px!important}
  .miyaar-home-reference .mi-home-ref-field.mi-home-field-card{flex-basis:218px!important;min-height:60px!important}
  .miyaar-home-reference .mi-home-ref-service{padding:18px 0 44px!important}
  .miyaar-home-reference .mi-home-ref-service__card{grid-template-columns:1fr!important;gap:18px!important;min-height:0!important;padding:24px 20px!important;border-radius:23px!important}
  .miyaar-home-reference .mi-home-ref-service__icon{width:82px!important;height:82px!important;border-radius:21px!important}
  .miyaar-home-reference .mi-home-ref-service__copy h2{font-size:29px!important}
  .miyaar-home-reference .mi-home-ref-service__action{grid-column:auto!important;width:100%!important;justify-self:stretch!important}
}
@media(max-width:440px){
  .miyaar-home-reference .mi-home-ref-fields__shell{padding:15px!important}
  .miyaar-home-reference .mi-home-ref-fields__copy{grid-template-columns:52px minmax(0,1fr)!important;gap:3px 11px!important}
  .miyaar-home-reference .mi-home-ref-fields__kicker{width:52px!important;min-height:64px!important}
  .miyaar-home-reference .mi-home-ref-field.mi-home-field-card{flex-basis:196px!important;grid-template-columns:30px minmax(0,1fr) auto 13px!important;padding:9px 10px!important}
  .miyaar-home-reference .mi-home-ref-field__mark{width:29px!important;height:29px!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-field.mi-home-field-card,
  .miyaar-home-reference .mi-home-ref-service__action{transition:none!important}
}