.framework-section {
  background:
    radial-gradient(ellipse at 50% 35%, #24211d55, transparent 60%), #0c0c0e;
  border-block: 1px solid #ffffff0c;
}
.framework-heading {
  max-width: 850px;
  margin-inline: auto;
}
.framework-heading .eyebrow {
  color: var(--accent-light);
  font-size: calc(10px + var(--mobile-font-increment, 0px));
  letter-spacing: 0.15em;
}
.framework-heading > p:last-child {
  max-width: 700px;
  margin-inline: auto;
}
.framework-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}
.framework-card {
  grid-column: span 2;
  overflow: hidden;
  border: 1px solid #ffffff18;
  border-radius: 22px;
  background: #171719;
}
.framework-card-wide {
  grid-column: span 3;
}
.framework-visual {
  height: 218px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ffffff0c;
}
.framework-copy {
  padding: 27px 26px 30px;
}
.framework-label {
  display: block;
  color: var(--accent-light);
  font-size: calc(9px + var(--mobile-font-increment, 0px));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.framework-copy h3 {
  margin-bottom: 16px;
  font-size: calc(clamp(22px, 1.85vw, 27px) + var(--mobile-font-increment, 0px));
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.framework-copy > p {
  color: #b5b5b8;
  font-size: calc(14px + var(--mobile-font-increment, 0px));
  line-height: 1.65;
  margin: 0;
}
.framework-calls {
  background:
    radial-gradient(ellipse at 50% 80%, #62513c55, transparent 70%), #111114;
}
.framework-call-window {
  width: 82%;
  max-width: 310px;
  border: 1px solid #ffffff25;
  border-radius: 12px;
  background: #252528;
  padding: 10px;
  box-shadow: 0 20px 40px #0006;
  transform: rotate(-3deg);
}
.framework-window-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.framework-window-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #777;
}
.framework-window-bar > span {
  color: #aaa;
  margin-left: auto;
  font-size: calc(8px + var(--mobile-font-increment, 0px));
}
.framework-call-screen {
  height: 125px;
  position: relative;
  background: radial-gradient(ellipse at center, #5b5b5b, #18181a 75%);
  border-radius: 7px;
  overflow: hidden;
}
.framework-call-screen img {
  position: absolute;
  height: 190px;
  width: 150px;
  object-fit: contain;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  filter: grayscale(1);
}
.framework-call-screen > span {
  position: absolute;
  left: 8px;
  bottom: 7px;
  background: #111b;
  padding: 3px 6px;
  border-radius: 3px;
  color: #eee;
  font-size: calc(8px + var(--mobile-font-increment, 0px));
}
.framework-call-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.framework-call-tools > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff15;
}
.framework-call-tools svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #ddd;
  stroke-width: 1.5;
}
.framework-call-tools .framework-call-end {
  background: #99714c;
  line-height: 1;
}
.framework-whatsapp {
  background:
    radial-gradient(ellipse at 50% 45%, #254d3d55, transparent 75%), #101614;
}
.framework-chat {
  width: 82%;
  max-width: 305px;
  padding: 16px;
  border: 1px solid #ffffff16;
  border-radius: 14px;
  background: #202724;
  box-shadow: 0 20px 40px #0005;
  transform: rotate(2deg);
}
.framework-chat-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(12px + var(--mobile-font-increment, 0px));
  font-weight: 650;
  margin-bottom: 13px;
}
.framework-chat-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  background: #36684d;
  border-radius: 50%;
}
.framework-chat-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #e8f2ec;
  stroke-width: 1.3;
}
.framework-chat-heading small {
  display: block;
  color: #a0b6aa;
  font-size: calc(8px + var(--mobile-font-increment, 0px));
  font-weight: 400;
}
.framework-chat-bubble {
  padding: 8px 10px;
  font-size: calc(10px + var(--mobile-font-increment, 0px));
  line-height: 1.4;
  max-width: 90%;
  color: #e0e8e3;
}
.framework-chat-question {
  background: #363e39;
  border-radius: 0 9px 9px;
  margin-bottom: 8px;
}
.framework-chat-answer {
  background: #355542;
  border-radius: 9px 0 9px 9px;
  margin-left: auto;
}
.framework-chat-answer > span {
  display: block;
  color: #adccba;
  font-size: calc(8px + var(--mobile-font-increment, 0px));
  text-align: right;
  line-height: 1;
  margin-top: 3px;
}
.framework-plan {
  background:
    radial-gradient(ellipse at 50% 80%, #68513644, transparent 70%), #181615;
}
.framework-plan-sheet {
  width: 80%;
  max-width: 300px;
  padding: 20px 18px;
  border: 1px solid #cfab7850;
  background: linear-gradient(135deg, #3c342a, #26221d);
  border-radius: 12px;
  box-shadow: 0 20px 40px #0005;
  transform: rotate(-2deg);
}
.framework-plan-title {
  display: block;
  color: #e5c79f;
  font-size: calc(9px + var(--mobile-font-increment, 0px));
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.framework-plan-sheet > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ddd6cc;
  font-size: calc(11px + var(--mobile-font-increment, 0px));
  margin-bottom: 10px;
}
.framework-plan-sheet i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d2a56e20;
  color: #e6c59c;
  font-style: normal;
}
.framework-plan-line {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9b07b 65%, #ffffff16 65%);
  margin-top: 14px;
}
.framework-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.5);
}
.framework-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, #000b);
}
.framework-photo-caption {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 26px;
  right: 26px;
  font-size: calc(11px + var(--mobile-font-increment, 0px));
  letter-spacing: 0.02em;
  color: #eee;
}
.framework-action {
  margin-top: 38px;
}
.framework-action > p {
  max-width: 580px;
  margin: 0 auto 25px;
  color: var(--accent-light);
  font-size: calc(18px + var(--mobile-font-increment, 0px));
  line-height: 1.5;
  text-wrap: balance;
}
@media (max-width: 1000px) {
  .framework-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .framework-card,
  .framework-card-wide {
    grid-column: auto;
  }
  .framework-card:last-child {
    grid-column: 1 / -1;
  }
  .framework-copy h3 {
    font-size: calc(24px + var(--mobile-font-increment, 0px));
  }
}
@media (max-width: 650px) {
  .framework-heading .eyebrow {
    font-size: calc(8px + var(--mobile-font-increment, 0px));
    line-height: 1.6;
  }
  .framework-heading h2 {
    font-size: calc(clamp(26px, 7.2vw, 34px) + var(--mobile-font-increment, 0px));
    line-height: 1.15;
  }
  .framework-heading > p:last-child {
    font-size: calc(14px + var(--mobile-font-increment, 0px));
    line-height: 1.6;
  }
  .framework-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .framework-card {
    border-radius: 18px;
  }
  .framework-card:last-child {
    grid-column: auto;
  }
  .framework-visual {
    height: 195px;
  }
  .framework-copy {
    padding: 23px;
  }
  .framework-copy h3 {
    font-size: calc(clamp(21px, 5.4vw, 23px) + var(--mobile-font-increment, 0px));
    text-wrap: pretty;
    margin-bottom: 12px;
  }
  .framework-label {
    font-size: calc(8px + var(--mobile-font-increment, 0px));
    margin-bottom: 10px;
  }
  .framework-copy > p {
    font-size: calc(14px + var(--mobile-font-increment, 0px));
    line-height: 1.6;
  }
  .framework-call-window {
    max-width: 265px;
    transform: none;
  }
  .framework-call-screen {
    height: 105px;
  }
  .framework-chat,
  .framework-plan-sheet {
    max-width: 285px;
    transform: none;
  }
  .framework-photo-caption {
    left: 23px;
    right: 23px;
    bottom: 16px;
    font-size: calc(10px + var(--mobile-font-increment, 0px));
  }
  .framework-action {
    margin-top: 28px;
  }
  .framework-action > p {
    font-size: calc(19px + var(--mobile-font-increment, 0px));
    line-height: 1.45;
  }
  .framework-action > .button {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .framework-calls,
  .framework-whatsapp,
  .framework-plan {
    background: linear-gradient(135deg, #dad9d6, #bcbdbb);
    border-bottom-color: #ffffff30;
  }
}