/* =========================================================
   GROWTHSPELL - CASE STUDIES HERO SECTION (1300px STANDARD)
========================================================= */

:root {
  --cs-green: #00d977;
  --cs-green-hover: #00bf68;
  --cs-black: #101714;
  --cs-dark-teal: #06271e;
  --cs-text-sub: #586863;
  --cs-bg-light: #f7fcf9;
  --cs-border: #dbebe3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--cs-black);
  -webkit-font-smoothing: antialiased;
}

.gs-cs-hero {
  position: relative;
  width: 100%;
  padding: 50px 0 60px;
  background: radial-gradient(circle at 85% 20%, rgba(0, 217, 119, 0.07), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
  overflow: hidden;
}

.gs-cs-hero__container {
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4vw, 56px);
}

.gs-cs-hero__content {
  min-width: 0;
}

.gs-cs-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(0, 217, 119, 0.08);
  border: 1px solid rgba(0, 217, 119, 0.25);
  border-radius: 100px;
  margin-bottom: 22px;
}

.gs-cs-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 8px rgba(0, 217, 119, 0.6);
}

.gs-cs-hero__badge-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-dark-teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gs-cs-hero__title {
  margin: 0 0 20px;
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--cs-black);
}

.gs-cs-hero__title span {
  color: var(--cs-green);
}

.gs-cs-hero__subhead {
  margin: 0 0 30px;
  font-size: clamp(14.5px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cs-text-sub);
  max-width: 580px;
}

.gs-cs-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gs-cs-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 10px;
  background: var(--cs-green);
  color: var(--cs-black);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.gs-cs-hero__cta svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.gs-cs-hero__cta:hover {
  background: var(--cs-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 217, 119, 0.25);
}

.gs-cs-hero__cta:hover svg {
  transform: translateX(4px);
}

/* 3D Visual Section */
.gs-cs-hero__visual {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.gs-cs-3d-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  border-radius: 24px;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
}

.gs-cs-3d-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(16, 23, 20, 0.1);
  border: 1px solid rgba(0, 217, 119, 0.15);
}

.gs-cs-3d-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(0, 217, 119, 0.25) 0%, transparent 70%);
  filter: blur(35px);
  z-index: -1;
  pointer-events: none;
}

/* Floating Glass Cards */
.gs-cs-3d-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(10, 30, 20, 0.12);
  z-index: 5;
  animation: gs-cs-float 6s ease-in-out infinite;
}

.gs-cs-3d-card--1 {
  top: 8%;
  left: -4%;
}

.gs-cs-3d-card--2 {
  bottom: 8%;
  right: -4%;
  animation-delay: -3s;
}

.gs-cs-3d-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 217, 119, 0.15);
  color: #00be68;
}

.gs-cs-3d-card-icon svg {
  width: 20px;
  height: 20px;
}

.gs-cs-3d-card strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cs-black);
  line-height: 1.2;
}

.gs-cs-3d-card span {
  display: block;
  font-size: 11px;
  color: var(--cs-text-sub);
  margin-top: 2px;
}

@keyframes gs-cs-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Responsive Breakpoints */
@media (max-width: 1050px) {
  .gs-cs-hero__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gs-cs-hero__content {
    text-align: center;
  }

  .gs-cs-hero__subhead {
    margin-left: auto;
    margin-right: auto;
  }

  .gs-cs-hero__actions {
    justify-content: center;
  }

  .gs-cs-hero__visual {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .gs-cs-hero {
    padding: 35px 0 45px;
  }

  .gs-cs-hero__container {
    width: calc(100% - 40px);
  }

  .gs-cs-hero__badge {
    margin-bottom: 16px;
  }

  .gs-cs-hero__title {
    font-size: clamp(26px, 7vw, 36px);
    margin-bottom: 14px;
  }

  .gs-cs-hero__subhead {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 22px;
  }

  .gs-cs-3d-card {
    padding: 10px 14px;
  }

  .gs-cs-3d-card--1 {
    top: -10px;
    left: 0;
  }

  .gs-cs-3d-card--2 {
    bottom: -10px;
    right: 0;
  }
}

.crmcase {
  --crmcase-green: #00d977;
  --crmcase-black: #101714;

  padding: 45px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.crmcase,
.crmcase * {
  box-sizing: border-box;
}

/* 1300px standard container */
.crmcase__container {
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
}

.crmcase__header {
  margin-bottom: 20px;
  padding: 0 4px;
}

.crmcase__header>p {
  margin: 0 0 8px;
  color: #758399;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crmcase__header h2 {
  margin: 0;
  color: var(--crmcase-black);
  font-family: inherit;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.05em;
}

.crmcase__header h2 span {
  color: var(--crmcase-green);
}

/* First row: 2 cards. Second row: 3 cards */
.crmcase__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.crmcase__card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e1eaf2;
  border-radius: 14px;
  background: #fff;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.crmcase__card--featured {
  grid-column: span 3;
}

/* Shorter illustration panels */
.crmcase__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  overflow: hidden;
  border-radius: 10px;
}

.crmcase__card--featured .crmcase__visual {
  height: 130px;
}

.crmcase__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
}

.crmcase__visual--mint {
  background: linear-gradient(135deg, #effbf6, #eaf9f3);
}

.crmcase__visual--blue {
  background: linear-gradient(135deg, #f0f8ff, #eaf5ff);
}

.crmcase__visual--purple {
  background: linear-gradient(135deg, #f7f3ff, #edf0ff);
}

.crmcase__visual--teal {
  background: linear-gradient(135deg, #edfaff, #e7f7fb);
}

.crmcase__visual--lavender {
  background: linear-gradient(135deg, #f4f0ff, #eef0ff);
}

.crmcase__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 4px 2px;
}

.crmcase__body h3 {
  margin: 0 0 4px;
  color: var(--crmcase-black);
  font-family: inherit;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.crmcase__industry {
  margin: 0 0 8px;
  color: #7890a9;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crmcase__description {
  margin: 0 0 12px;
  color: #667181;
  font-size: clamp(13px, 0.95vw, 14.5px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* Metrics align at the bottom of each card */
.crmcase__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.crmcase__metrics--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crmcase__metrics>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eafbf3;
  color: #174c36;
}

.crmcase__metrics strong {
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.crmcase__metrics span {
  margin-top: 2px;
  font-size: clamp(10.5px, 0.75vw, 12px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.crmcase__footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.crmcase__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--crmcase-green);
  color: var(--crmcase-black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.crmcase__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crmcase__button:focus-visible {
  outline: 3px solid var(--crmcase-black);
  outline-offset: 4px;
}

.crmcase__flow {
  animation: crmcase-flow 3s linear infinite;
}

.crmcase__bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: crmcase-bars 4s ease-in-out infinite;
}

.crmcase__bar:nth-child(2) {
  animation-delay: 0.2s;
}

.crmcase__bar:nth-child(3) {
  animation-delay: 0.4s;
}

.crmcase__bar:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes crmcase-flow {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes crmcase-bars {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.88);
  }
}

@media (hover: hover) {
  .crmcase__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(40, 60, 75, 0.06);
  }

  .crmcase__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(0, 217, 119, 0.18);
  }
}

@media (max-width: 1100px) {
  .crmcase__container {
    width: calc(100% - 64px);
  }

  .crmcase__grid {
    gap: 14px;
  }

  .crmcase__metrics {
    gap: 6px;
  }

  .crmcase__metrics>div {
    padding: 7px 8px;
  }
}

@media (max-width: 900px) {
  .crmcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crmcase__card,
  .crmcase__card--featured {
    grid-column: auto;
  }

  .crmcase__visual,
  .crmcase__card--featured .crmcase__visual {
    height: 125px;
  }

  .crmcase__body h3 {
    font-size: 17px;
  }

  .crmcase__description {
    font-size: 13.5px;
  }

  .crmcase__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crmcase__metrics strong {
    font-size: 13px;
  }

  .crmcase__metrics span {
    font-size: 11.5px;
  }
}

@media (max-width: 600px) {
  .crmcase {
    padding: 35px 0;
  }

  .crmcase__container {
    width: calc(100% - 40px);
  }

  .crmcase__header {
    margin-bottom: 18px;
  }

  .crmcase__header>p {
    font-size: 10px;
  }

  .crmcase__header h2 {
    font-size: clamp(24px, 6.5vw, 32px);
  }

  .crmcase__header h2 br {
    display: none;
  }

  .crmcase__header h2 span {
    display: block;
  }

  .crmcase__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .crmcase__card {
    padding: 12px;
    border-radius: 14px;
  }

  .crmcase__visual,
  .crmcase__card--featured .crmcase__visual {
    height: 120px;
  }

  .crmcase__body {
    padding: 10px 4px 2px;
  }

  .crmcase__description {
    font-size: 13.5px;
  }

  .crmcase__button {
    width: 100%;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 12px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .crmcase__flow,
  .crmcase__bar {
    animation: none;
  }

  .crmcase__card,
  .crmcase__button {
    transition: none;
  }
}

.gweb {
  --gweb-green: #00d977;
  --gweb-black: #101714;

  padding: 45px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gweb,
.gweb * {
  box-sizing: border-box;
}

.gweb__container {
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
}

.gweb__header {
  margin-bottom: 20px;
  padding: 0 4px;
}

.gweb__header>p {
  margin: 0 0 8px;
  color: var(--gweb-green);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.gweb__header h2 {
  margin: 0;
  color: var(--gweb-black);
  font-family: inherit;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.05em;
}

.gweb__header h2 span {
  color: var(--gweb-green);
}

.gweb__projects {
  display: grid;
  gap: 16px;
}

.gweb__project {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: 20px;
  padding: 16px;
  border: 1px solid #e0e5eb;
  border-radius: 16px;
  background: #fff;
}

/* Website screenshot frame */
.gweb__preview {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e7ee;
  border-radius: 12px;
  background: #f4f6f8;
}

.gweb__browser {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  background: linear-gradient(180deg, #f5f6f8, #eff1f4);
  border-bottom: 1px solid #e3e7ed;
}

.gweb__browser span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #87909b;
}

.gweb__image {
  position: relative;
  width: 100%;
  max-height: 290px;
  overflow: hidden;
  background: #f4f6f8;
}

.gweb__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top left;
}

/* Case study copy */
.gweb__content {
  min-width: 0;
  padding: 1px 0;
}

.gweb__project-header {
  margin-bottom: 12px;
}

.gweb__project-header h3 {
  margin: 0 0 4px;
  color: var(--gweb-black);
  font-family: inherit;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.gweb__project-header>p {
  margin: 0;
  color: #8591a0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

.gweb__detail+.gweb__detail {
  margin-top: 12px;
}

.gweb__detail h4,
.gweb__result h4 {
  margin: 0 0 4px;
  color: var(--gweb-green);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.gweb__detail p,
.gweb__result p {
  margin: 0;
  color: #657080;
  font-size: clamp(13px, 0.95vw, 14.5px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* Highlighted result */
.gweb__result {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(110deg, #eafbf3, #eefbf7);
}

.gweb__result>svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--gweb-green);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.gweb__result p {
  color: #506d61;
}

/* Closing button */
.gweb__footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.gweb__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--gweb-green);
  color: var(--gweb-black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.gweb__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.gweb__button:focus-visible {
  outline: 3px solid var(--gweb-black);
  outline-offset: 4px;
}

@media (hover: hover) {
  .gweb__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 217, 119, 0.18);
  }

  .gweb__button:hover svg {
    transform: translateX(3px);
  }
}

@media (max-width: 1200px) {
  .gweb__container {
    width: calc(100% - 64px);
  }

  .gweb__project {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 16px;
    padding: 14px;
  }

  .gweb__project-header h3 {
    font-size: 18px;
  }

  .gweb__detail p,
  .gweb__result p {
    font-size: 13.5px;
  }
}

@media (max-width: 900px) {
  .gweb__project {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  .gweb__image {
    max-height: 260px;
  }

  .gweb__project-header h3 {
    font-size: 19px;
  }

  .gweb__detail p,
  .gweb__result p {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .gweb {
    padding: 35px 0;
  }

  .gweb__container {
    width: calc(100% - 40px);
  }

  .gweb__header {
    margin-bottom: 18px;
  }

  .gweb__header>p {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .gweb__header h2 {
    font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.17;
  }

  .gweb__header h2 br {
    display: none;
  }

  .gweb__projects {
    gap: 14px;
  }

  .gweb__project {
    padding: 12px;
    border-radius: 14px;
    gap: 14px;
  }

  .gweb__content {
    padding: 0 2px 2px;
  }

  .gweb__image {
    max-height: 220px;
  }

  .gweb__project-header h3 {
    font-size: 18px;
  }

  .gweb__project-header>p {
    font-size: 12px;
  }

  .gweb__detail h4,
  .gweb__result h4 {
    font-size: 13px;
  }

  .gweb__detail p,
  .gweb__result p {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .gweb__result {
    padding: 12px 12px;
    gap: 8px;
  }

  .gweb__button {
    width: 100%;
    justify-content: space-between;
    padding: 12px 18px;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gweb__button,
  .gweb__button svg {
    transition: none;
  }
}

.gbeyond {
  --gbeyond-green: #00d977;
  --gbeyond-black: #101714;

  padding: 45px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gbeyond,
.gbeyond * {
  box-sizing: border-box;
}

.gbeyond__container {
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 52px);
}

.gbeyond__content {
  min-width: 0;
}

.gbeyond__eyebrow {
  margin: 0 0 12px;
  color: #7e899f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gbeyond__content h2 {
  margin: 0 0 16px;
  color: var(--gbeyond-black);
  font-family: inherit;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.05em;
}

.gbeyond__content h2 span {
  color: var(--gbeyond-green);
}

.gbeyond__description {
  margin: 0;
  color: #788299;
  font-size: clamp(13.5px, 1.05vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.gbeyond__description strong {
  color: var(--gbeyond-green);
  font-weight: 600;
}

.gbeyond__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--gbeyond-green);
  color: var(--gbeyond-black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.gbeyond__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.gbeyond__button:focus-visible {
  outline: 3px solid var(--gbeyond-black);
  outline-offset: 4px;
}

/* Connected visual */
.gbeyond__visual {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.gbeyond__visual::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 32%,
      rgba(170, 246, 219, 0.4),
      transparent 48%),
    radial-gradient(ellipse at 60% 60%,
      rgba(179, 225, 254, 0.42),
      transparent 53%),
    radial-gradient(ellipse at 90% 64%,
      rgba(223, 205, 253, 0.32),
      transparent 44%);
}

.gbeyond__diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 420;
}

.gbeyond__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gbeyond__services {
  position: absolute;
  inset: 0 0 auto;
  height: 33%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gbeyond__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 6px;
  border: 1px solid var(--gbeyond-border);
  border-radius: 14px;
  background: var(--gbeyond-background);
  text-align: center;
}

.gbeyond__tile--mint {
  --gbeyond-border: #d0f1e5;
  --gbeyond-background: linear-gradient(135deg, #effcf6, #e4faf1);
  --gbeyond-icon: #00c780;
}

.gbeyond__tile--blue {
  --gbeyond-border: #d3e9fc;
  --gbeyond-background: linear-gradient(135deg, #edf7ff, #e5f2ff);
  --gbeyond-icon: #278cf1;
}

.gbeyond__tile--purple {
  --gbeyond-border: #e5dafa;
  --gbeyond-background: linear-gradient(135deg, #f8f3ff, #f0e9ff);
  --gbeyond-icon: #9870e8;
}

.gbeyond__tile>svg {
  width: clamp(26px, 2.5vw, 42px);
  height: clamp(26px, 2.5vw, 42px);
  flex-shrink: 0;
  fill: none;
  stroke: var(--gbeyond-icon);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gbeyond__tile>span {
  color: var(--gbeyond-black);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.gbeyond__tile>.gbeyond__chart,
.gbeyond__tile>.gbeyond__blocks {
  fill: var(--gbeyond-icon);
  stroke: none;
}

.gbeyond__hub {
  position: absolute;
  top: 58%;
  left: 25%;
  width: 50%;
  height: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dceef5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(77, 151, 177, 0.08);
}

.gbeyond__hub svg {
  width: 28%;
  height: auto;
}

.gbeyond__hub>span {
  color: var(--gbeyond-black);
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.gbeyond__suite {
  position: relative;
  padding: 14px 14px 12px;
  border: 1px solid #dcecf2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(77, 151, 177, 0.04);
}

.gbeyond__suite>p {
  margin: 0 0 10px;
  color: #8892aa;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-align: center;
}

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

.gbeyond__products .gbeyond__tile {
  min-height: 80px;
  border-radius: 12px;
}

/* Gentle animations */
.gbeyond__flow {
  animation: gbeyond-flow 3.5s linear infinite;
}

.gbeyond__pulse {
  animation: gbeyond-pulse 3s ease-in-out infinite;
}

.gbeyond__services .gbeyond__tile>svg {
  animation: gbeyond-float 5.5s ease-in-out infinite;
}

.gbeyond__services .gbeyond__tile:nth-child(2)>svg {
  animation-delay: -1.8s;
}

.gbeyond__services .gbeyond__tile:nth-child(3)>svg {
  animation-delay: -3.6s;
}

.gbeyond__voice {
  animation: gbeyond-pulse 2.5s ease-in-out infinite;
}

@keyframes gbeyond-flow {
  to {
    stroke-dashoffset: -63;
  }
}

@keyframes gbeyond-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes gbeyond-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (hover: hover) {
  .gbeyond__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(0, 217, 119, 0.18);
  }

  .gbeyond__button:hover svg {
    transform: translate(2px, -2px);
  }
}

@media (max-width: 1150px) {
  .gbeyond__container {
    width: calc(100% - 64px);
    gap: 24px;
  }

  .gbeyond__services {
    gap: 9px;
  }

  .gbeyond__tile {
    gap: 7px;
    padding: 10px 4px;
    border-radius: 14px;
  }

  .gbeyond__suite {
    padding: 12px 10px 10px;
  }

  .gbeyond__products {
    gap: 8px;
  }

  .gbeyond__products .gbeyond__tile {
    min-height: 75px;
  }
}

@media (max-width: 900px) {
  .gbeyond__container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gbeyond__content h2 {
    font-size: clamp(24px, 4.5vw, 34px);
  }

  .gbeyond__description {
    font-size: 14px;
  }

  .gbeyond__visual {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }

  .gbeyond__tile>svg {
    width: 32px;
    height: 32px;
  }

  .gbeyond__tile>span {
    font-size: 13px;
  }

  .gbeyond__hub>span {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .gbeyond {
    padding: 35px 0;
  }

  .gbeyond__container {
    width: calc(100% - 40px);
    gap: 24px;
  }

  .gbeyond__eyebrow {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .gbeyond__content h2 {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 14px;
  }

  .gbeyond__description {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .gbeyond__button {
    width: 100%;
    justify-content: space-between;
    padding: 12px 18px;
    font-size: 13.5px;
  }

  .gbeyond__services {
    gap: 6px;
  }

  .gbeyond__tile {
    padding: 8px 4px;
    gap: 6px;
    border-radius: 11px;
  }

  .gbeyond__tile>svg {
    width: 24px;
    height: 24px;
  }

  .gbeyond__tile>span {
    font-size: 9.5px;
  }

  .gbeyond__hub {
    border-radius: 14px;
    gap: 4px;
  }

  .gbeyond__hub>span {
    font-size: clamp(11px, 3vw, 14px);
  }

  .gbeyond__suite {
    padding: 12px 8px 8px;
    border-radius: 15px;
  }

  .gbeyond__suite>p {
    font-size: 9.5px;
    margin-bottom: 8px;
  }

  .gbeyond__products {
    gap: 6px;
  }

  .gbeyond__products .gbeyond__tile {
    min-height: 68px;
    border-radius: 10px;
  }

  .gbeyond__products .gbeyond__tile>span {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gbeyond__flow,
  .gbeyond__pulse,
  .gbeyond__voice,
  .gbeyond__services .gbeyond__tile>svg {
    animation: none;
  }

  .gbeyond__button,
  .gbeyond__button svg {
    transition: none;
  }
}

.gbeyond {
  --gbeyond-green: #00d977;
  --gbeyond-black: #101714;

  padding: 64px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gbeyond,
.gbeyond * {
  box-sizing: border-box;
}

.gbeyond__container {
  width: min(1720px, calc(100% - 96px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(35px, 5vw, 85px);
}

.gbeyond__content {
  min-width: 0;
}

.gbeyond__eyebrow {
  margin: 0 0 22px;
  color: #7e899f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.gbeyond__content h2 {
  margin: 0 0 28px;
  color: var(--gbeyond-black);
  font-family: inherit;
  font-size: clamp(33px, 3.5vw, 59px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.05em;
}

.gbeyond__content h2 span {
  color: var(--gbeyond-green);
}

.gbeyond__description {
  margin: 0;
  color: #788299;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.gbeyond__description strong {
  color: var(--gbeyond-green);
  font-weight: 600;
}

.gbeyond__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 57px;
  margin-top: 28px;
  padding: 16px 26px;
  border-radius: 12px;
  background: var(--gbeyond-green);
  color: var(--gbeyond-black);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.gbeyond__button svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.gbeyond__button:focus-visible {
  outline: 3px solid var(--gbeyond-black);
  outline-offset: 5px;
}

/* Connected visual */
.gbeyond__visual {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.gbeyond__visual::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 32%,
      rgba(170, 246, 219, 0.4),
      transparent 48%),
    radial-gradient(ellipse at 60% 60%,
      rgba(179, 225, 254, 0.42),
      transparent 53%),
    radial-gradient(ellipse at 90% 64%,
      rgba(223, 205, 253, 0.32),
      transparent 44%);
}

.gbeyond__diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 440;
}

.gbeyond__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gbeyond__services {
  position: absolute;
  inset: 0 0 auto;
  height: 33%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gbeyond__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 8px;
  border: 1px solid var(--gbeyond-border);
  border-radius: 21px;
  background: var(--gbeyond-background);
  text-align: center;
}

.gbeyond__tile--mint {
  --gbeyond-border: #d0f1e5;
  --gbeyond-background: linear-gradient(135deg, #effcf6, #e4faf1);
  --gbeyond-icon: #00c780;
}

.gbeyond__tile--blue {
  --gbeyond-border: #d3e9fc;
  --gbeyond-background: linear-gradient(135deg, #edf7ff, #e5f2ff);
  --gbeyond-icon: #278cf1;
}

.gbeyond__tile--purple {
  --gbeyond-border: #e5dafa;
  --gbeyond-background: linear-gradient(135deg, #f8f3ff, #f0e9ff);
  --gbeyond-icon: #9870e8;
}

.gbeyond__tile>svg {
  width: clamp(34px, 3.8vw, 61px);
  height: clamp(34px, 3.8vw, 61px);
  flex-shrink: 0;
  fill: none;
  stroke: var(--gbeyond-icon);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gbeyond__tile>span {
  color: var(--gbeyond-black);
  font-size: clamp(12px, 1.15vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.gbeyond__tile>.gbeyond__chart,
.gbeyond__tile>.gbeyond__blocks {
  fill: var(--gbeyond-icon);
  stroke: none;
}

.gbeyond__hub {
  position: absolute;
  top: 58%;
  left: 25%;
  width: 50%;
  height: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #dceef5;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 27px rgba(77, 151, 177, 0.1);
}

.gbeyond__hub svg {
  width: 31%;
  height: auto;
}

.gbeyond__hub>span {
  color: var(--gbeyond-black);
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.gbeyond__suite {
  position: relative;
  padding: 20px 18px 17px;
  border: 1px solid #dcecf2;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(77, 151, 177, 0.05);
}

.gbeyond__suite>p {
  margin: 0 0 17px;
  color: #8892aa;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-align: center;
}

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

.gbeyond__products .gbeyond__tile {
  min-height: 117px;
  border-radius: 17px;
}

/* Gentle animations */
.gbeyond__flow {
  animation: gbeyond-flow 3.5s linear infinite;
}

.gbeyond__pulse {
  animation: gbeyond-pulse 3s ease-in-out infinite;
}

.gbeyond__services .gbeyond__tile>svg {
  animation: gbeyond-float 5.5s ease-in-out infinite;
}

.gbeyond__services .gbeyond__tile:nth-child(2)>svg {
  animation-delay: -1.8s;
}

.gbeyond__services .gbeyond__tile:nth-child(3)>svg {
  animation-delay: -3.6s;
}

.gbeyond__voice {
  animation: gbeyond-pulse 2.5s ease-in-out infinite;
}

@keyframes gbeyond-flow {
  to {
    stroke-dashoffset: -63;
  }
}

@keyframes gbeyond-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes gbeyond-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (hover: hover) {
  .gbeyond__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 217, 119, 0.18);
  }

  .gbeyond__button:hover svg {
    transform: translate(2px, -2px);
  }
}

@media (max-width: 1150px) {
  .gbeyond__container {
    width: calc(100% - 64px);
    gap: 32px;
  }

  .gbeyond__services {
    gap: 11px;
  }

  .gbeyond__tile {
    gap: 9px;
    padding: 13px 6px;
    border-radius: 17px;
  }

  .gbeyond__suite {
    padding: 17px 12px 13px;
  }

  .gbeyond__products {
    gap: 9px;
  }

  .gbeyond__products .gbeyond__tile {
    min-height: 100px;
  }
}

@media (max-width: 900px) {
  .gbeyond__container {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .gbeyond__content h2 {
    font-size: clamp(39px, 5.6vw, 57px);
  }

  .gbeyond__description {
    font-size: 18px;
  }

  .gbeyond__visual {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }

  .gbeyond__tile>svg {
    width: 48px;
    height: 48px;
  }

  .gbeyond__tile>span {
    font-size: 16px;
  }

  .gbeyond__hub>span {
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  .gbeyond {
    padding: 42px 0;
  }

  .gbeyond__container {
    width: calc(100% - 40px);
    gap: 30px;
  }

  .gbeyond__eyebrow {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .gbeyond__content h2 {
    font-size: clamp(31px, 8vw, 43px);
    margin-bottom: 23px;
  }

  .gbeyond__description {
    font-size: 16px;
    line-height: 1.75;
  }

  .gbeyond__button {
    width: 100%;
    justify-content: space-between;
    padding: 16px 21px;
    font-size: 14px;
  }

  .gbeyond__services {
    gap: 8px;
  }

  .gbeyond__tile {
    padding: 9px 5px;
    gap: 7px;
    border-radius: 13px;
  }

  .gbeyond__tile>svg {
    width: 30px;
    height: 30px;
  }

  .gbeyond__tile>span {
    font-size: 10px;
  }

  .gbeyond__hub {
    border-radius: 18px;
    gap: 6px;
  }

  .gbeyond__hub>span {
    font-size: clamp(12px, 3.2vw, 17px);
  }

  .gbeyond__suite {
    padding: 14px 10px 10px;
    border-radius: 19px;
  }

  .gbeyond__suite>p {
    font-size: 10px;
    margin-bottom: 11px;
  }

  .gbeyond__products {
    gap: 7px;
  }

  .gbeyond__products .gbeyond__tile {
    min-height: 83px;
    border-radius: 12px;
  }

  .gbeyond__products .gbeyond__tile>span {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gbeyond__flow,
  .gbeyond__pulse,
  .gbeyond__voice,
  .gbeyond__services .gbeyond__tile>svg {
    animation: none;
  }

  .gbeyond__button,
  .gbeyond__button svg {
    transition: none;
  }
}

.gprojectcta {
  --gp-green: #00d977;
  --gp-black: #101714;

  padding: 54px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gprojectcta,
.gprojectcta * {
  box-sizing: border-box;
}

.gprojectcta__panel {
  width: min(1300px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(34px, 4.3vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: 36px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 78% 50%,
      rgba(175, 243, 217, 0.36),
      transparent 45%),
    linear-gradient(115deg, #f0fbf6, #f7fcfa 55%, #eef7ff);
}

.gprojectcta__content {
  min-width: 0;
}

.gprojectcta__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 8px 13px;
  border: 1px solid #cdebdc;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #55786a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.gprojectcta__label>span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gp-green);
}

.gprojectcta__content h2 {
  margin: 0 0 23px;
  color: var(--gp-black);
  font-family: inherit;
  font-size: clamp(35px, 3.8vw, 65px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.gprojectcta__content h2 span {
  color: var(--gp-green);
}

.gprojectcta__description {
  max-width: 590px;
  margin: 0;
  color: #6a7b88;
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.gprojectcta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.gprojectcta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 57px;
  padding: 16px 24px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--gp-black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.gprojectcta__button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.gprojectcta__button--primary {
  background: var(--gp-green);
}

.gprojectcta__button--secondary {
  background: rgba(255, 255, 255, 0.85);
  border-color: #ccd7dd;
}

.gprojectcta__button:focus-visible {
  outline: 3px solid var(--gp-black);
  outline-offset: 5px;
}

.gprojectcta__visual {
  min-width: 0;
  width: 100%;
}

.gprojectcta__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Subtle illustration animations */
.gprojectcta__back,
.gprojectcta__front,
.gprojectcta__badge {
  animation: gp-float 6s ease-in-out infinite;
}

.gprojectcta__front {
  animation-delay: -2s;
}

.gprojectcta__badge {
  animation-delay: -4s;
}

.gprojectcta__pulse {
  animation: gp-pulse 3.5s ease-in-out infinite;
}

.gprojectcta__bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: gp-bars 4s ease-in-out infinite;
}

.gprojectcta__bar:nth-child(2) {
  animation-delay: 0.2s;
}

.gprojectcta__bar:nth-child(3) {
  animation-delay: 0.4s;
}

.gprojectcta__bar:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes gp-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes gp-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes gp-bars {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.86);
  }
}

@media (hover: hover) {
  .gprojectcta__button:hover {
    transform: translateY(-3px);
  }

  .gprojectcta__button--primary:hover {
    box-shadow: 0 10px 25px rgba(0, 217, 119, 0.18);
  }

  .gprojectcta__button--secondary:hover {
    background: #fff;
  }

  .gprojectcta__button--primary:hover svg {
    transform: translate(2px, -2px);
  }

  .gprojectcta__button--secondary:hover svg {
    transform: translateX(3px);
  }
}

@media (max-width: 1150px) {
  .gprojectcta__panel {
    width: calc(100% - 48px);
    padding: 38px;
    gap: 22px;
  }

  .gprojectcta__button {
    font-size: 14px;
    gap: 15px;
    padding: 15px 20px;
  }
}

@media (max-width: 900px) {
  .gprojectcta__panel {
    grid-template-columns: 1fr;
    padding: 42px;
    gap: 22px;
  }

  .gprojectcta__content h2 {
    font-size: clamp(40px, 6vw, 58px);
  }

  .gprojectcta__description {
    font-size: 19px;
  }

  .gprojectcta__visual {
    max-width: 490px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .gprojectcta {
    padding: 36px 0;
  }

  .gprojectcta__panel {
    width: calc(100% - 32px);
    padding: 30px 24px 20px;
    border-radius: 23px;
  }

  .gprojectcta__label {
    font-size: 11px;
    margin-bottom: 18px;
  }

  .gprojectcta__content h2 {
    font-size: clamp(31px, 8.2vw, 43px);
    margin-bottom: 20px;
  }

  .gprojectcta__description {
    font-size: 16px;
  }

  .gprojectcta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .gprojectcta__button {
    width: 100%;
    justify-content: space-between;
    min-height: 54px;
  }

  .gprojectcta__visual {
    width: calc(100% + 20px);
    max-width: none;
    margin-left: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gprojectcta__back,
  .gprojectcta__front,
  .gprojectcta__badge,
  .gprojectcta__pulse,
  .gprojectcta__bar {
    animation: none;
  }

  .gprojectcta__button,
  .gprojectcta__button svg {
    transition: none;
  }
}

/* ========================================
   GROWTHSPELL — GLOBAL SECTION GAP SPACING
======================================== */

.crmcase,
.gweb,
.gbeyond,
.gprojectcta {
  margin-top: clamp(28px, 3.5vw, 52px);
}

/* =========================================================
   FREQUENTLY ASKED QUESTIONS (FAQ)
========================================================= */
.gs-faq-section {
  --faq-green: #00d977;
  --faq-green-dark: #00be68;
  --faq-deep-green: #06271e;
  --faq-dark: #071814;
  --faq-text: #5d6a66;
  --faq-border: #dce7e2;
  --faq-soft: #f3f8f5;
  --faq-white: #ffffff;

  position: relative;
  width: 100%;
  padding: 80px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 217, 119, 0.05), transparent 25%),
    linear-gradient(135deg, #f8fbf9 0%, #ffffff 55%, #f5faf7 100%);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-faq-container {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(30px, 4.5vw, 70px);
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
}

.gs-faq-intro {
  position: relative;
  align-self: start;
  padding-top: 5px;
}

.gs-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--faq-green-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gs-faq-eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--faq-green);
  content: "";
}

.gs-faq-intro h2 {
  max-width: 530px;
  margin: 0;
  color: var(--faq-deep-green);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.gs-faq-intro > p {
  max-width: 440px;
  margin: 14px 0 0;
  color: var(--faq-text);
  font-size: 14px;
  line-height: 1.6;
}

.gs-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--faq-deep-green);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.gs-faq-contact:hover {
  color: var(--faq-green-dark);
}

.gs-faq-contact-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6f7f0;
  color: var(--faq-green-dark);
}

.gs-faq-contact-icon svg {
  width: 16px;
  height: 16px;
}

.gs-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-faq-item {
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  background: var(--faq-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.gs-faq-item[open] {
  border-color: var(--faq-green-dark);
  box-shadow: 0 4px 20px rgba(0, 190, 104, 0.08);
}

.gs-faq-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--faq-deep-green);
  user-select: none;
}

.gs-faq-summary::-webkit-details-marker {
  display: none;
}

.gs-faq-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--faq-green-dark);
  opacity: 0.8;
}

.gs-faq-question {
  flex: 1;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4;
}

.gs-faq-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.gs-faq-toggle::before,
.gs-faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--faq-deep-green);
  transition: transform 0.2s ease;
}

.gs-faq-toggle::before {
  width: 12px;
  height: 2px;
  margin-top: -1px;
  margin-left: -6px;
}

.gs-faq-toggle::after {
  width: 2px;
  height: 12px;
  margin-top: -6px;
  margin-left: -1px;
}

.gs-faq-item[open] .gs-faq-toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

.gs-faq-answer {
  padding: 0 24px 20px 53px;
  color: var(--faq-text);
  font-size: 14.5px;
  line-height: 1.65;
}

.gs-faq-answer p {
  margin: 0;
}

@media (max-width: 900px) {
  .gs-faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}