/* ============ SeedAxis — GCC page specific (bento services) ============ */
/* Builds on styles.css + sections.css */

.mt-48{margin-top:48px}

/* ---------- SERVICES BENTO ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(154px,auto);
  gap:16px;
  grid-template-areas:
    "f f b"
    "f f c"
    "d e g";
}
.bento-tile{
  position:relative;
  background:var(--navy-600,#142A5C);
  border:1px solid var(--line);
  border-radius:var(--r-md,14px);
  padding:26px 26px;
  display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.bento-tile:hover{
  border-color:var(--green);
  transform:translateY(-4px);
  background:var(--navy-500,#1A3268);
  box-shadow:0 22px 50px -34px rgba(0,0,0,.9);
}
.bento-tile .icon-badge{margin-bottom:16px}
.bento-tile h3{
  font-family:"Sora",sans-serif;font-size:17px;font-weight:600;
  line-height:1.25;margin-bottom:8px;letter-spacing:-.01em;
}
.bento-tile p{color:var(--mist);font-size:13.8px;line-height:1.55}

/* feature tile (GCC-as-a-Service) */
.bento-feature{
  grid-area:f;
  background:linear-gradient(165deg,rgba(46,170,110,.15),var(--navy-600,#142A5C) 58%);
  border-color:rgba(46,170,110,.34);
  justify-content:flex-end;
  padding:34px 34px;
}
.bento-feature .icon-badge{
  width:58px;height:58px;margin-bottom:auto;
}
.bento-feature .icon-badge svg{width:28px;height:28px}
.bento-feature h3{font-size:26px;margin-top:20px;max-width:18ch}
.bento-feature p{font-size:15px;line-height:1.6;max-width:48ch;margin-top:4px}
.bento-feature:hover{transform:translateY(-4px);border-color:var(--green-bright)}

.bento-tag{
  position:absolute;top:26px;right:26px;
  font-family:"Sora",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-bright);
  border:1px solid rgba(46,170,110,.42);border-radius:999px;padding:5px 13px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .bento{
    grid-auto-rows:minmax(150px,auto);
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "f f"
      "b c"
      "d e"
      "g g";
  }
  .bento-feature h3{font-size:23px}
}
@media (max-width:620px){
  .bento{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:14px;
    grid-template-areas:"f" "b" "c" "d" "e" "g";
  }
  .bento-feature{padding:28px 26px}
  .bento-feature .icon-badge{margin-bottom:18px}
  .bento-feature h3{font-size:22px;margin-top:14px}
  .bento-tag{top:22px;right:22px}
}