.about-effects {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(7, 80, 63, .18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 2%, rgba(216, 155, 40, .24), transparent 24%),
    linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(235, 246, 231, .96));
  box-shadow: 0 18px 44px rgba(32, 74, 58, .13);
}

.about-effects::before {
  content: "?";
  position: absolute;
  right: -18px;
  top: -64px;
  color: rgba(7, 80, 63, .045);
  font-size: 19rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(9deg);
  pointer-events: none;
}

.effects-heading {
  position: relative;
  max-width: 780px;
}

.effects-heading h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.effects-heading > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #315d51;
  font-size: 1.08rem;
  font-weight: 700;
}

.effects-flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0;
}

.effects-flow span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(7, 80, 63, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: var(--forest-dark);
  font-size: .88rem;
  font-weight: 800;
}

.effects-flow span::before {
  content: "✦";
  color: var(--gold);
}

.effects-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.effect-card {
  grid-column: span 2;
  min-height: 280px;
  padding: 22px;
  border: 1px solid rgba(7, 80, 63, .16);
  border-radius: 20px;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 9px 22px rgba(32, 74, 58, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.effect-card:nth-child(4) { grid-column: 2 / span 2; }
.effect-card:nth-child(5) { grid-column: 4 / span 2; }

.effect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 28px rgba(32, 74, 58, .13);
}

.effect-card__mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--forest);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 7px 16px rgba(7,80,63,.18);
  font-size: 1.45rem;
  font-weight: 900;
}

.effect-card__label {
  margin: 0 0 4px;
  color: #a36d19;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.effect-card h3 { font-size: 1.28rem; }
.effect-card p:last-child { margin-bottom: 0; color: #315d51; }
.effect-card--memory .effect-card__mark { background: #376a8c; }
.effect-card--image .effect-card__mark { background: #b47a18; }
.effect-card--difference .effect-card__mark { background: #167055; }
.effect-card--sound .effect-card__mark { background: #9b5360; }
.effect-card--imagination .effect-card__mark { background: #74548f; }

.effects-beyond {
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(7, 80, 63, .16);
  border-radius: 28px;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 16px 42px rgba(32, 74, 58, .1);
}

.effects-beyond__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.effects-beyond__grid article {
  position: relative;
  padding: 22px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(150deg, #f5f8e8, #fff8e8);
  border: 1px solid rgba(216,155,40,.26);
}

.effects-beyond__grid h3 { padding-right: 40px; }
.effects-beyond__grid p { margin-bottom: 0; color: #315d51; }
.effects-beyond__number {
  position: absolute;
  right: 14px;
  top: 10px;
  color: rgba(7,80,63,.13);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.effects-message {
  margin-top: 20px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 20px;
  background: linear-gradient(120deg, var(--forest-dark), var(--forest));
  color: #fff9e9;
  text-align: center;
}

.effects-message p { max-width: 780px; margin: 8px auto 0; }
.effects-message__lead {
  color: #ffe09a;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
}

.effects-note {
  margin: 18px 4px 0;
  color: #557168;
  font-size: .82rem;
}

@media (max-width: 900px) {
  .effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effect-card,
  .effect-card:nth-child(4),
  .effect-card:nth-child(5) { grid-column: auto; }
  .effect-card:last-child { grid-column: 1 / -1; }
  .effects-beyond__grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .about-effects,
  .effects-beyond { padding: 24px 18px; border-radius: 22px; }
  .effects-heading h2 br { display: none; }
  .effects-flow { gap: 7px; }
  .effects-flow span { padding: 7px 11px; font-size: .8rem; }
  .effects-grid { grid-template-columns: 1fr; }
  .effect-card,
  .effect-card:last-child { grid-column: auto; min-height: 0; padding: 20px; }
  .effect-card__mark { width: 50px; height: 50px; border-radius: 15px; font-size: 1.22rem; }
}