/* ===== Circular capabilities (neumorphic) ===== */
:root{


  /* accent ring colors (slight tints) */
  --ring-a:#70c174;  /* green */
  --ring-b:#37b3ff;  /* blue */
  --ring-c:#6cc2d9;  /* teal */
  --ring-d:#98a7ff;  /* indigo */
  --ring-e:#f7b267;  /* orange */
  --ring-f:#f57aa8;  /* pink */
}

#capabilities{ position:relative;
              background: url('../assets/services_bg.png') center center / cover no-repeat;

}



/* Shared page container so header, hero, and footer align perfectly */

.cap-section{
  padding: 56px 0 64px;
  background: var(--bg);
}

.cap-title{
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 0 0 6px;

}

.cap-sub{
  color: #7c8696;
  max-width: 60ch;
  line-height: 1.7;
  margin: 0;
}

/* grid */
.cap-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(220px,1fr));
  gap: clamp(18px,2vw,26px);
}
@media (max-width: 1200px){
  .cap-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
}
@media (max-width: 720px){
  .cap-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 460px){
  .cap-grid{ grid-template-columns: 1fr; }
}

.cap-card{
  display: flex;
  flex-direction: column;
  align-items: center;     /* center children horizontally */
  text-align: center;      /* center text inside h3 & p */
  row-gap: 12px;

}


.cap-card h3{
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
}

.cap-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
  max-width: 34ch;         /* control width for readability */
  text-align: center;      /* center align */
}
/* circular disc */
.cap-disc{
  width: 176px;
  height: 176px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bg);
  box-shadow:
    18px 18px 36px rgba(195,201,215,.6),
    -18px -18px 36px rgba(255,255,255,.95);
  isolation: isolate; /* for inner shadows layering */
}

/* inner inset (gives the pressed look) */
.cap-disc::after{
  content:"";
  position:absolute; inset: 14px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 30%, #fff 0%, #f3f5fb 45%, #e8ecf5 100%);
  box-shadow:
    inset 8px 8px 18px rgba(195,201,215,.55),
    inset -8px -8px 18px rgba(255,255,255,.85);
  z-index: -1;
}

/* small colored “pill” on the rim */
.cap-pill{
  position: absolute;
  top: 18px; left: 18px;
  width: 42px; height: 42px;
  display:grid; place-items:center;
  font-weight: 800; color:#2f4a3a;
  background: var(--ring-a);
  border-radius: 18px 18px 18px 6px;
  box-shadow:
    8px 8px 18px rgba(195,201,215,.45),
    -8px -8px 18px rgba(255,255,255,.9);
}

/* droplet mark under disc */
.cap-drop{
  position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 20px;
  background: var(--ring-a);
  border-radius: 12px 12px 16px 16px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.08));
}

/* center icon (replace with <img> if preferred) */
.cap-icon{
  font-size: 38px;
  opacity: .9;
}

/* — Color cycling per card (like the ref gradient shifting) — */
.cap-card:nth-child(1) .cap-pill,
.cap-card:nth-child(1) .cap-drop{ background: var(--ring-a); }

.cap-card:nth-child(2) .cap-pill,
.cap-card:nth-child(2) .cap-drop{ background: var(--ring-b); }

.cap-card:nth-child(3) .cap-pill,
.cap-card:nth-child(3) .cap-drop{ background: var(--ring-c); }

.cap-card:nth-child(4) .cap-pill,
.cap-card:nth-child(4) .cap-drop{ background: var(--ring-d); }

.cap-card:nth-child(5) .cap-pill,
.cap-card:nth-child(5) .cap-drop{ background: var(--ring-e); }

.cap-card:nth-child(6) .cap-pill,
.cap-card:nth-child(6) .cap-drop{ background: var(--ring-f); }

/* optional hover lift */
.cap-card:hover .cap-disc{
  transform: translateY(-2px);
  transition: transform .18s ease;
}