
/* =========================================================
   AWEBZONE V14 — DIGITAL MARKETING ICON SYSTEM
   Curated from the user-provided icon collections.
   ========================================================= */

:root{
  --az-icon-bg:#f6f8f4;
  --az-icon-border:rgba(21,28,32,.08);
}

/* Floating contextual icon system: used only as a supporting visual */
.az-icon-visual-system{
  position:relative!important;
  width:74px!important;
  height:74px!important;
  margin:0 0 14px auto!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#f8fbf2,#eaf5d9)!important;
  border:1px solid var(--az-icon-border)!important;
  box-shadow:0 10px 26px rgba(20,29,32,.08)!important;
  isolation:isolate!important;
}

.az-context-icon{
  position:absolute!important;
  inset:7px!important;
  width:60px!important;
  height:60px!important;
  object-fit:cover!important;
  object-position:center!important;
  mix-blend-mode:multiply!important;
  filter:saturate(.92) contrast(1.04)!important;
  z-index:3!important;
}

.az-icon-orbit{
  position:absolute!important;
  border:1px solid rgba(122,180,18,.22)!important;
  border-radius:50%!important;
  z-index:1!important;
}
.az-icon-orbit-one{
  width:84px!important;
  height:84px!important;
  left:-22px!important;
  top:-12px!important;
  animation:az-icon-orbit 8s linear infinite!important;
}
.az-icon-orbit-two{
  width:58px!important;
  height:58px!important;
  right:-20px!important;
  bottom:-20px!important;
  animation:az-icon-orbit 6s linear infinite reverse!important;
}

@keyframes az-icon-orbit{
  to{transform:rotate(360deg)}
}

/* Context-specific icon choices */
.az-post:nth-of-type(2) .az-context-icon,
.az-service-feed-grid a:nth-child(2) .az-context-icon{
  content:url("az-icon-analytics.png")!important;
}
.az-post:nth-of-type(3) .az-context-icon,
.az-service-feed-grid a:nth-child(3) .az-context-icon{
  content:url("az-icon-social-integration.png")!important;
}
.az-post:nth-of-type(4) .az-context-icon,
.az-service-feed-grid a:nth-child(4) .az-context-icon{
  content:url("az-icon-case-study.png")!important;
}

/* Make service cards feel more purposeful without becoming cluttered */
.az-service-feed-grid a{
  min-height:156px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(182,255,56,.11),transparent 38%),
    #fff!important;
}
.az-service-feed-grid a:before{
  content:""!important;
  position:absolute!important;
  right:13px!important;
  bottom:12px!important;
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  background-image:url("az-icon-digital-marketing.png")!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.11!important;
  mix-blend-mode:multiply!important;
  transition:opacity .25s ease, transform .25s ease!important;
}
.az-service-feed-grid a:nth-child(2):before{background-image:url("az-icon-analytics.png")!important}
.az-service-feed-grid a:nth-child(3):before{background-image:url("az-icon-social-integration.png")!important}
.az-service-feed-grid a:nth-child(4):before{background-image:url("az-icon-case-study.png")!important}
.az-service-feed-grid a:nth-child(5):before{background-image:url("az-icon-seo.png")!important}
.az-service-feed-grid a:nth-child(6):before{background-image:url("az-icon-branding.png")!important}

.az-service-feed-grid a:hover:before{
  opacity:.24!important;
  transform:translateY(-4px) rotate(-3deg)!important;
}

/* Icon-led visual separators for larger empty sections */
.az-visual-strip{
  background:
    radial-gradient(circle at 85% 18%,rgba(182,255,56,.18),transparent 27%),
    linear-gradient(135deg,#12171a,#20281d)!important;
}
.az-visual-strip:after{
  content:""!important;
  position:absolute!important;
  right:14px!important;
  top:13px!important;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  background-image:url("az-icon-market-watch.png")!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.20!important;
  mix-blend-mode:screen!important;
}

/* Icon rows for topic/category areas */
.az-icon-topic-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:16px 0;
}
.az-icon-topic{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:14px;
  background:#f7f9f5;
  border:1px solid var(--az-icon-border);
  font-size:11px;
  font-weight:800;
  color:#4f5b63;
}
.az-icon-topic:before{
  content:"";
  width:22px;
  height:22px;
  border-radius:8px;
  background-image:url("az-icon-digital-marketing.png");
  background-size:cover;
  background-position:center;
  mix-blend-mode:multiply;
}
.az-icon-topic:nth-child(2):before{background-image:url("az-icon-seo.png")}
.az-icon-topic:nth-child(3):before{background-image:url("az-icon-analytics.png")}
.az-icon-topic:nth-child(4):before{background-image:url("az-icon-case-study.png")}

/* Founder image remains protected and visible above decorative visuals */
.az-avatar-large,
.az-mini-avatar,
.az-header-avatar,
.az-founder-avatar,
.az-profile-avatar{
  position:relative!important;
  z-index:5!important;
  background-image:var(--az-founder-image)!important;
  background-size:cover!important;
  background-position:center 20%!important;
}

/* Responsive: smaller, cleaner icon visuals */
@media(max-width:820px){
  .az-icon-visual-system{
    width:60px!important;
    height:60px!important;
    margin:0 0 10px auto!important;
    border-radius:18px!important;
  }
  .az-context-icon{
    inset:6px!important;
    width:48px!important;
    height:48px!important;
  }
  .az-icon-orbit-one{width:70px!important;height:70px!important}
  .az-icon-orbit-two{width:48px!important;height:48px!important}

  .az-service-feed-grid a{
    min-height:138px!important;
  }
  .az-service-feed-grid a:before{
    width:36px!important;
    height:36px!important;
    right:10px!important;
    bottom:10px!important;
  }

  .az-icon-topic-row{
    gap:7px;
  }
  .az-icon-topic{
    padding:7px 9px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .az-icon-orbit-one,
  .az-icon-orbit-two{
    animation:none!important;
  }
}
