/* ESG·AI toolbox integration: optional Vibe Coding Studio promotion */
.vibe-feature[hidden] { display: none !important; }
.vibe-feature {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(300px, .87fr);
  align-items: center;
  gap: 24px;
  border: 1px solid #9bdccd;
  border-radius: 21px;
  background: linear-gradient(120deg, #0e3037 0%, #133b43 57%, #174653 100%);
  box-shadow: 0 22px 48px #1a706026;
  color: #f2fff9;
  padding: clamp(25px, 4vw, 43px);
  margin: 0 0 24px;
}
.vibe-feature::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border: 1px solid #74f0ce2d;
  border-radius: 50%;
  right: -155px;
  top: -160px;
  pointer-events: none;
}
.vibe-feature::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #63ffdc13;
  filter: blur(28px);
  left: 42%;
  bottom: -110px;
}
.vibe-feature-copy,
.vibe-feature-visual { position: relative; z-index: 1; min-width: 0; }
.vibe-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #95eecb7a;
  background: #32635585;
  color: #adffe5;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .45px;
}
.vibe-feature-kicker .vibe-new {
  color: #0b3c37;
  background: #a6f6d5;
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: 900;
  font-size: 10px;
}
.vibe-feature h3 {
  font-size: clamp(26px, 3vw, 37px);
  line-height: 1.36;
  letter-spacing: -1.2px;
  font-weight: 850;
  margin: 17px 0 13px;
  color: #fff;
  word-break: keep-all;
}
.vibe-feature h3 em { font-style: normal; color: #8cf0d2; }
.vibe-feature-copy > p {
  color: #c3dfdd;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  word-break: keep-all;
}
.vibe-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 24px;
}
.vibe-feature-tags span {
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid #a9e5d24a;
  color: #d9f4e9;
  background: #ffffff0e;
  font-size: 12px;
  font-weight: 600;
}
.vibe-feature-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(110deg, #78eac4, #c0f4e6);
  color: #064337;
  padding: 13px 20px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 9px 25px #0002;
  transition: transform .2s, box-shadow .2s;
}
.vibe-feature-cta:hover { color: #04332a; transform: translateY(-2px); box-shadow: 0 13px 24px #0004; }
.vibe-feature-visual {
  border: 1px solid #8fc4bd5b;
  border-radius: 16px;
  overflow: hidden;
  background: #071929;
  box-shadow: 0 20px 45px #030e1c80;
  transform: rotate(1.4deg);
}
.vibe-visual-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: #9cb8c2;
  font-family: Consolas, monospace;
  font-size: 11px;
  border-bottom: 1px solid #284353;
}
.vibe-visual-head i { width: 8px; height: 8px; border-radius: 50%; background: #fb8580; }
.vibe-visual-head i:nth-child(2) { background: #e9bf72; }
.vibe-visual-head i:nth-child(3) { background: #77d4a5; margin-right: 10px; }
.vibe-visual-code {
  padding: 17px 19px 0;
  color: #a8bfd2;
  font: 12px/1.75 Consolas, 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
}
.vibe-visual-code .code-green { color: #91ecbe; }
.vibe-visual-code .code-blue { color: #7ed7fd; }
.vibe-visual-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  height: 86px;
  padding: 13px 27px 15px;
  margin: 12px 14px 14px;
  background: #153749;
  border: 1px solid #436b79;
  border-radius: 10px;
}
.vibe-visual-chart b {
  width: 25px;
  height: var(--h);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#99ffe2, #2aa7af);
  animation: vibeGrow 1.2s cubic-bezier(.2,.8,.15,1) both;
  transform-origin: bottom;
}
.vibe-visual-chart b:nth-child(2) { animation-delay: .12s; }
.vibe-visual-chart b:nth-child(3) { animation-delay: .24s; }
.vibe-visual-chart b:nth-child(4) { animation-delay: .36s; }
.vibe-visual-chart b:nth-child(5) { animation-delay: .48s; }
.vibe-studio-card {
  background: linear-gradient(145deg, #f2fffa 0%, #ffffff 72%);
  border-color: #8de2c9 !important;
  box-shadow: 0 12px 30px #3c9f7920;
}
.vibe-studio-card .tool-icon {
  background: #ddf8ed;
  color: #137862;
}
.vibe-studio-card .tool-category { color: #167d68; }
.vibe-studio-card .vibe-card-badge {
  display: inline-block;
  border-radius: 5px;
  background: #14775f;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  margin-left: 6px;
  padding: 2px 5px;
}
.vibe-studio-card .card-bottom a.tool-open { text-decoration: none; }
@keyframes vibeGrow { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
@media (max-width: 980px) {
  .vibe-feature { grid-template-columns: 1fr; }
  .vibe-feature-visual { max-width: 520px; transform: none; }
}
@media (max-width: 600px) {
  .vibe-feature { padding: 25px 21px; border-radius: 16px; }
  .vibe-feature h3 { font-size: 27px; }
  .vibe-feature-copy > p { font-size: 14px; }
  .vibe-feature-cta { width: 100%; }
  .vibe-feature-visual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-visual-chart b { animation: none; }
  .vibe-feature-cta { transition: none; }
}