/* =============================================
   GRID PAGE STYLES
  
   ============================================= */

/* Design tokens (:root variables) are defined globally in style.css */

/* =============================================
   GRID PAGE COMPONENT STYLES
   (from grid-style.css)
   ============================================= */
.grids {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*max-width: 1440px;*/
  align-items: stretch;
  position: relative;
  background-color: var(--dark-white);
  overflow-x: hidden;
  margin: 0px auto;
}
	
body{
   background-color: var(--dark-white);
}

/* ── NAVBAR (scoped under .grids to override global navbar for this page) ── */
.grids .navbar {
  display: flex;
  width: 100%;
  height: 98px;
  justify-content: space-between;
  padding: 24px 72px;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.grids .navbar-logo {
  position: relative;
  width: 174.92px;
  height: 19.08px;
}

.grids .nav-links-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  padding: 12px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 7px;
  box-shadow:
    0px 15px 33px #0000001a, 0px 60px 60px #00000017, 0px 135px 81px #0000000d, 0px 240px 96px #00000003, 0px 374px 105px transparent;
}

.grids .nav-links-list {
  display: inline-flex;
  gap: 16px;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.grids .nav-item {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.grids .navbar-cta-wrap {
  display: flex;
  flex-direction: column;
  width: 174px;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}

.grids .navbar-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  padding: 4px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 7px;
  box-shadow:
    0px 15px 33px #0000001a, 0px 60px 60px #00000017, 0px 135px 81px #0000000d, 0px 240px 96px #00000003, 0px 374px 105px transparent;
}

.grids .navbar-cta-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--green);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.grids .btn-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.grids .grids-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding: 162px 0px 64px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.grids .chart-hero.grids-hero{
  padding: 19px  0px 64px 0px;
}

.grids .grids-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.grids .grids-hero-title-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.grids .grids-hero-category {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #866dd0;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids h1.grids-hero-headline {
  position: relative;
  width: min(844px, 90%) !important;
  color: transparent;
  text-align: center;
}
.fc-poc-hero-title {
	width: min(844px, 90%) !important;
}
.fc-poc-why-section .wp-block-columns, .fc-poc-who-inner .wp-block-columns, .why-section .wp-block-columns, .data-card .wp-block-columns{
	margin-bottom:0px !important;
}
.poc-form{
	padding:80px 0px 16px 0px !important;
}
.made-with-poc-section{
	padding:80px 0px 60px 0px !important;
}

.grids .grids-hero-headline-accent {
  color: #866dd0;
  /*letter-spacing: var(--desktop-h1-letter-spacing);
  font-family: var(--desktop-h1-font-family);
  font-style: var(--desktop-h1-font-style);
  font-weight: var(--desktop-h1-font-weight);
  line-height: var(--desktop-h1-line-height);
  font-size: var(--desktop-h1-font-size);*/
}

.grids .grids-hero-headline-text {
  color: #000000;
  /*letter-spacing: var(--desktop-h1-letter-spacing);
  font-family: var(--desktop-h1-font-family);
  font-style: var(--desktop-h1-font-style);
  font-weight: var(--desktop-h1-font-weight);
  line-height: var(--desktop-h1-line-height);
  font-size: var(--desktop-h1-font-size);*/
}

.grids .grids-hero-description {
  position: relative;
  width: min(613px, 90%) !important;
   text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
 /* font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: var(--black);
  font-size: var(--desktop-body-font-size);

  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);*/
}

.grids .grids-hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.grids .grids-hero-addtocart-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--color-theme-grid-page);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}
.use-case-cta-btn a{
  background: no-repeat;

}
.grids .grids-hero-addtocart-btn a{
background: no-repeat;
    color: var(--white);
}
.grids .grids-hero-price a{
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
  background: no-repeat;
}

.grids .grid-feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  position: relative;
  width: 100%;
  padding: 0 72px;
  box-sizing: border-box;
}

.grids .grid-feature-card {
  display: flex;
  flex-direction: column;
  height: 285px;
  align-items: center;
  gap: 3px;
  padding: 4px;
  position: relative;
  background-color: var(--dark-white-2);
  border-radius: 3.47px;
  border: 0.87px solid;
  border-color: var(--border);
  box-shadow: var(--cards-shadow);
}

.grids .grid-feature-card-img-wrap {
  display: flex;
  height: 229.04px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 3.47px;
}

.grids .grid-feature-card-img {
  position: relative;
  flex: 1;
  flex-grow: 1;
 /* margin-bottom: -3252.20px;
  margin-right: -8313.00px;*/
  aspect-ratio: 2.28;
  object-fit: cover;
}
.grid-feature-cards-grid .wp-block-columns{
  margin-bottom: 0px! important;
}
.grids .grid-feature-card-label-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100% !important;
  flex-grow: 1;
}

.grids .grid-feature-card-label {
  position: relative;
  width: fit-content;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
  white-space: nowrap;
}

.grids .grid-feature-card-img-export {
  position: relative;
  flex: 1;
  flex-grow: 1;
  aspect-ratio: 2.09;
  object-fit: cover;
}

.grids .grid-feature-card-img-rowsel {
  position: relative;
  width: 263px;
  height: 104.58px;
  background-image: url(./img/image-13.png);
  background-size: cover;
  background-position: 50% 50%;
}

.grids .grid-feature-card-img-colgroup {
  position: relative;
  width: 263px;
  height: 125.72px;
  background-image: url(./img/image-14.png);
  background-size: cover;
  background-position: 50% 50%;
}

.grids .grid-feature-card-label-wide {
  position: relative;
  width: 259.2px;
  margin-top: -6.52px;
  margin-bottom: -4.52px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.grids .grid-feature-card-img-realtime {
  position: relative;
  width: 263px;
  height: 107.58px;
  background-image: url(./img/image-15.png);
  background-size: cover;
  background-position: 50% 50%;
}

.grids .grid-feature-card-img-sort {
  position: relative;
  width: 263px;
  height: 92.35px;
  background-image: url(./img/image-16.png);
  background-size: cover;
  background-position: 50% 50%;
}

.grids .grid-feature-card-img-search {
  position: relative;
  flex: 1;
  flex-grow: 1;
  aspect-ratio: 1.89;
  object-fit: cover;
}

.grids .grid-feature-card-img-anim {
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-bottom: -3240.65px;
  margin-right: -6150.00px;
  aspect-ratio: 2.85;
  object-fit: cover;
}

.grids .grid-feature-card-label-flex {
  position: relative;
  flex: 1;
  margin-top: -6.52px;
  margin-bottom: -4.52px;
  font-family: "GT Standard Trial-LRg", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12.1px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.grids .highlight-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 96px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}

.grids .highlight-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 256px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.grids .highlight-text-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.grids h1.highlight-heading {
  position: relative;
  width: min(708px, 90%);
  margin-top: -1.00px;
   color: transparent;text-align: center;
}

.grids .highlight-heading-text {
  color: #000000;
}

.grids .highlight-heading-accent {
  color: #866dd0;
}

.grids .highlight-description {
  position: relative;
  width: min(530px, 90%);
  color: var(--black);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);

}

.grids .highlight-cta-btn {
  display: flex;
  width: 81px;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: relative;
  background-color: #866dd0;
  border-radius: 4px;
}

.grids .highlight-cta-label a {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
  color: white !important   ;
  text-decoration: none !important ; z-index: 99999;
}

.grids .highlight-deco {
  position: absolute;
  top: 75px;
  left: 88px;
  width: 1364px;
  height: 713px;
}

.grids .highlight-deco-rect-1 {
  position: absolute;
  top: 8px;
  left: 0;
  width: 115px;
  height: 158px;
  background-color: #876ed129;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-rect-2 {
  position: absolute;
  top: 8px;
  left: 124px;
  width: 115px;
  height: 74px;
  background-color: #876ed129;
  border-radius: 4px;
}

.grids .highlight-deco-rect-3 {
  position: absolute;
  top: 0;
  left: 880px;
  width: 115px;
  height: 116px;
  background-color: #876ed129;
  border-radius: 4px;
}

.grids .highlight-deco-arrow {
  position: absolute;
  top: 74px;
  left: 953px;
  width: 30px;
  height: 28px;
}

.grids .highlight-deco-img {
  position: absolute;
  width: 115px;
  height: 116px;
  top: 482px;
  left: 0;
}

.grids .highlight-deco-rect-4 {
  position: absolute;
  top: 92px;
  left: 124px;
  width: 115px;
  height: 74px;
  background-color: #876ed10f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-rect-5 {
  position: absolute;
  top: 495px;
  left: 690px;
  width: 115px;
  height: 68px;
  background-color: #876ed129;
  border-radius: 4px;
}

.grids .highlight-deco-rect-6 {
  position: absolute;
  top: 495px;
  left: 813px;
  width: 115px;
  height: 144px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-rect-7 {
  position: absolute;
  top: 648px;
  left: 813px;
  width: 115px;
  height: 65px;
  background-color: #876ed15c;
  border-radius: 4px;
}

.grids .highlight-deco-rect-8 {
  position: absolute;
  top: 570px;
  left: 690px;
  width: 115px;
  height: 72px;
  background-color: #876ed10f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-chart {
  position: absolute;
  top: 230px;
  left: 1131px;
  width: 235px;
  height: 114px;
}

.grids .highlight-deco-chart-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 233px;
  height: 114px;
  background-color: #876ed129;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-percent {
  position: absolute;
  top: 9px;
  left: 175px;
  opacity: 0.5;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #866dd0;
  font-size: var(--desktop-h5-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  white-space: nowrap;
  font-style: var(--desktop-h5-font-style);
}

.grids .highlight-deco-bar-1 {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 17px;
  height: 104px;
  background-color: #876ed129;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-2 {
  position: absolute;
  top: 5px;
  left: 85px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-3 {
  position: absolute;
  top: 5px;
  left: 105px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-4 {
  position: absolute;
  top: 5px;
  left: 125px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-5 {
  position: absolute;
  top: 5px;
  left: 25px;
  width: 17px;
  height: 104px;
  background-color: #876ed142;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-6 {
  position: absolute;
  top: 5px;
  left: 45px;
  width: 17px;
  height: 104px;
  background-color: #876ed15c;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}

.grids .highlight-deco-bar-7 {
  position: absolute;
  top: 5px;
  left: 65px;
  width: 17px;
  height: 104px;
  background-color: #876ed175;
  border-radius: 4px;
  border: 1px solid;
  border-color: #876ed166;
}
@media (max-width: 768px) {
  .grids .highlight-deco {
    display: none;
  }

  .grids .highlight-inner {
    padding: 0 16px;
    gap: 0;
    background-image: 
      url('/wp-content/uploads/2026/03/deco-top-mobile.svg'),
      url('/wp-content/uploads/2026/03/deco-bottom-mobile.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 100%, 100%;
  }

  .grids .highlight-text-group {
    margin: 160px 0;
  }
}
.grids .use-case-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px var(--container-lr-padding);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.grids .features-text-inner {
gap:16px;
}
.grids .use-case-card {
  display: flex;
  width: min(1290px, calc(100% - 32px));
  height: 450px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: relative;
  background-color: #866dd0;
  border-radius: 3.66px;
}

.grids .use-case-text-col {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  align-items: flex-start;
  gap: 8px;
  padding: 0px 24px;
  position: relative;
  box-sizing: border-box;
}

.grids .use-case-text-content {
  display: flex;
  flex-direction: column;
  width: min(632px, 100%);
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.grids .use-case-heading {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  color: #ffffff;
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
  font-style: var(--desktop-h3-font-style);
}

.grids .use-case-list {
  width: min(562px, 100%);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; color: white !important  ;
}

.grids .use-case-list-item {
  color: #ffffff;
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.grids .use-case-list-text {
  letter-spacing: var(--desktop-body-letter-spacing);
  font-family: var(--desktop-body-font-family);
  font-style: var(--desktop-body-font-style);
  font-weight: var(--desktop-body-font-weight);
  line-height: var(--desktop-body-line-height);
  font-size: var(--desktop-body-font-size);
}

.grids .use-case-cta-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  background-color: #000000;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.grids .white-btn-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--white);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.grids .use-case-image-col {
  position: relative;
  width: 437px;
  height: 418px;
  background-color: #000207;
  border-radius: 3.66px;
  padding:20px !important;
}

.grids .use-case-img-bottom {
  position: absolute;
  top: 212px;
  left: 36px;
  width: 365px !important;
  height: 149px;
   aspect-ratio: 2.44;
  object-fit: cover;
}

.grids .use-case-img-bottom img, .grids .use-case-img-top img {
 width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100% ;
  max-height: 100%;
}
.grids .use-case-img-top {
  position: absolute;
  top: 44px;
  left: 36px;
  width: 365px;
  height: 149px;
  aspect-ratio: 2.44;
  object-fit: cover;
}

.grids .complement-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px clamp(0px, 12.7%, 134px) 0px var(--container-lr-padding);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.use-case-image-col {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  padding: 20px;
}

.grids .use-case-img-top,
.grids .use-case-img-bottom {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 90% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.grids .complement-heading {
  position: relative;
  width: min(545px, 100%) !important;
  margin-top: -1.00px;

}
.grids .complement-heading h2{
  color: var(--black);
}

.grids .complement-list {
  width: min(524px, 100%);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.grids .complement-list-item{
  color: var(--black);
  position: relative;
  align-self: stretch;
}
.grids .complement-list li {
}
.complement-list .wp-block-columns{
  margin-bottom: 0px !important ;
}
.grids .cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.grids .cta-card {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 400px;
  align-items: center;
  gap: 20px;
  padding: 76px clamp(20px, 7.3%, 221px);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #866dd0;
  border-radius: 3.65px;
  overflow: hidden;
  box-sizing: border-box;
}

.grids h2.cta-heading {
  position: relative;
  z-index: 1;
  width: min(858px, 90%);
  margin-top: -0.91px;
  color: transparent;
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
}

.grids .cta-heading-text {
  color: #ffffff;
  letter-spacing: var(--desktop-h2-letter-spacing);

}

.grids .cta-heading-accent {
  color: #0e0e0e;
  letter-spacing: var(--desktop-h2-letter-spacing);

}

.grids .cta-description {
  position: relative;
  z-index: 1;
  width: min(635px, 90%);
  color: #ffffff;
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);

}

.grids .cta-addtocart-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  margin-bottom: -3.00px;
  background-color: var(--white);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.grids .cta-deco {
  position: absolute;
  top: -644px;
  left: -30px;
  width: 1436px;
  height: 1606px;
  z-index: 0;
}

.grids .cta-deco-rect-1 {
  position: absolute;
  top: 982px;
  left: 286px;
  width: 288px;
  height: 624px;
  background-color: #9b86d8;
}

.grids .cta-deco-rect-2 {
  position: absolute;
  top: 878px;
  left: 1px;
  width: 287px;
  height: 728px;
  background-color: #9b86d8;
}

.grids .cta-deco-rect-3 {
  position: absolute;
  top: 1036px;
  left: 574px;
  width: 287px;
  height: 546px;
  background-color: #9b86d8;
}

.grids .cta-deco-rect-4 {
  position: absolute;
  top: 947px;
  left: 861px;
  width: 288px;
  height: 659px;
  background-color: #9b86d8;
}

.grids .cta-deco-rect-5 {
  position: absolute;
  top: 1px;
  left: 1149px;
  width: 287px;
  height: 707px;
  background-color: #9b86d8;
}

.grids .footer {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 820px;
  background-color: #ffffff;
  overflow: hidden;
}

.grids .footer-deco-line-1 {
  top: 299px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.grids .footer-deco-line-2 {
  top: 400px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.grids .footer-deco-line-3 {
  top: 501px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.grids .footer-deco-line-4 {
  top: 198px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.grids .footer-deco-line-5 {
  top: 97px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.grids .footer-deco-rect-1 {
  position: absolute;
  top: 199px;
  left: 360px;
  width: 360px;
  height: 621px;
  background-color: #866dd0;
}

.grids .footer-deco-rect-2 {
  position: absolute;
  top: 502px;
  left: 0;
  width: 360px;
  height: 318px;
  background-color: #866dd0;
}

.grids .footer-deco-rect-3 {
  position: absolute;
  top: 300px;
  left: 720px;
  width: 360px;
  height: 520px;
  background-color: #866dd0;
}

.grids .footer-deco-rect-4 {
  position: absolute;
  top: 1px;
  left: 1080px;
  width: 360px;
  height: 820px;
  background-color: #866dd0;
}

.grids .footer-cta-btn {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 385px;
  left: 403px;
  background-color: #000000;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.grids .footer-col-product {
  display: flex;
  flex-direction: column;
  width: 83px;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 403px;
}

.grids .footer-col-heading {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-col-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.grids .footer-link-primary {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-link {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-col-developers {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 573px;
}

.grids .footer-link-wide {
  position: relative;
  width: 99px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-col-compare {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 755px;
}

.grids .footer-col-compare-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.grids .footer-col-poc {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 940px;
}

.grids .footer-connect-heading {
  position: absolute;
  top: 346px;
  left: 1128px;
  width: 99px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-connect-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 378px;
  left: 1128px;
}

.grids .footer-community-title {
  position: relative;
  width: 212px;
  margin-top: -1.00px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #000000;
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  font-style: var(--desktop-h5-font-style);
}

.grids .footer-discord-btn {
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
}

.grids .footer-discord-label {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #071c21;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  font-style: var(--desktop-tags-font-style);
}

.grids .footer-discord-icon {
  position: relative;
  width: 25px;
  height: 25px;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  aspect-ratio: 1;
  object-fit: cover;
}

.grids .footer-logo {
  position: absolute;
  top: 651px;
  left: 22px;
  width: 1393px;
  height: 152px;
}

/* =====================
   RESPONSIVE STYLES
   ===================== */

/* Tablet: ≤1024px */
@media (max-width: 1024px) {
  .grids .navbar {
    padding: 16px 32px;
    height: auto;
  }

  .grids .nav-links-pill {
    gap: 16px;
    padding: 10px 12px;
  }

  .grids .highlight-inner {
    padding: 160px 0;
  }

  .grids .highlight-deco {
    width: calc(100% - 40px);
    left: 20px;
    overflow: hidden;
  }

  .grids .use-case-card {
    flex-direction: column;
    height: auto;
  }

  .grids .use-case-text-col {
    width: 100%;
    padding: 24px 16px;
  }

  .grids .use-case-text-content {
    width: 100%;
  }

  .grids .use-case-list {
    width: 100%;
    height: auto;
  }

  .grids .use-case-image-col {
    width: 100%;
    min-height: 300px;
    height: auto;
  }

  .grids .use-case-img-bottom {
    width: calc(100% - 72px) !important;
    height: auto;
  }

  .grids .use-case-img-top {
    width: calc(100% - 72px);
    height: auto;
  }

  .grids .complement-section {
    flex-direction: column;
    padding: 60px 40px;
    gap: 32px;
  }

  .grids .complement-heading {
    width: 100%;
  }

  .grids .complement-list {
    width: 100%;
    height: auto;
  }

  .grids .cta-card {
    padding: 60px 40px;
    height: auto;
  }

  .grids .cta-heading {
    width: 100%;
  }
}

/* Mobile: ≤768px */
@media (max-width: 768px) {
  /* Navbar */
  .grids .navbar {
    flex-wrap: wrap;
    padding: 16px 20px;
    gap: 12px;
  }

  .grids .nav-links-pill {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .grids .nav-links-list {
    flex-wrap: wrap;
    gap: 8px;
  }

  .grids .navbar-cta-wrap {
    width: auto;
  }

  /* Hero */
  .grids .grids-hero {
    padding: 100px 0;
    gap: 24px;
  }

  .grids .grid-feature-cards-grid {
    padding: 0 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* Highlight section */
  .grids .highlight-section {
    padding: 40px 0;
  }

  .grids .highlight-inner {
    padding: 60px 20px;
  }

  .grids .highlight-text-group {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .grids .highlight-heading,
  .grids .highlight-description {
    width: 100%;
  }

  .grids .highlight-deco {
    display: none;
  }

  /* Text-image card */
  .grids .use-case-section {
    padding: 32px 16px;
  }

  .grids .use-case-card {
    width: 100%;
    border-radius: 8px;
  }

  .grids .use-case-text-col {
    padding: 20px 16px;
  }

  .grids .use-case-image-col {
    border-radius: 0 0 8px 8px;
    min-height: 220px; flex-basis: 100% !important;
    width: 100% !important;
  }

  .grids .use-case-img-top {
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
  }

  .grids .use-case-img-bottom {
    top: auto;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px) !important;
  }
    .gantt-feature-text-col {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Title-text */
  .grids .complement-section {
    padding: 40px 20px;
    gap: 20px;
  }

  /* CTA */
  .grids .cta-section {
    padding: 24px 16px;
  }

  .grids .cta-card {
    padding: 40px 20px;
    height: auto;
    border-radius: 8px;
  }

  .grids .cta-heading,
  .grids .cta-description {
    width: 100%;
  }

  /* Footer: switch from absolute to flow layout */
  .grids .footer {
    height: auto;
    padding: 40px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .grids .footer .footer-deco-line-1,
  .grids .footer .footer-deco-line-2,
  .grids .footer .footer-deco-line-3,
  .grids .footer .footer-deco-line-4,
  .grids .footer .footer-deco-line-5,
  .grids .footer-deco-rect-1,
  .grids .footer-deco-rect-2,
  .grids .footer-deco-rect-3,
  .grids .footer-deco-rect-4 {
    display: none;
  }

  .grids .footer-logo {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    order: -1;
  }

  .grids .footer-logo img {
    width: 100%;
    height: auto;
  }

  .grids .footer-cta-btn {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
  }

  .grids .footer-col-product,
  .grids .footer-col-developers,
  .grids .footer-col-compare,
  .grids .footer-col-poc {
    position: relative;
    top: auto;
    left: auto;
    display: inline-flex;
  }

  .grids .footer-connect-heading {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .grids .footer-connect-group {
    position: relative;
    top: auto;
    left: auto;
  }
}
@media (min-width: 1024px) {
.grid-feature-cards-home-top{
  margin-left: 195px;
}
.grid-feature-cards-home-bottom{
  margin-right: 75px;
}
}


/* ============================================================
   HERO
   ============================================================ */
.fc-poc-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 138px 72px 64px !important;
  width: 100%;
}

.fc-poc-hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 900px !important;
}

.fc-poc-hero-title-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fc-poc-hero-title {
  letter-spacing: var(--desktop-h1-letter-spacing);
  line-height: var(--desktop-h1-line-height);
  text-align: center;
  color: transparent;
}

.fc-poc-highlight {
  color: #3871bf;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-normal {
  color: #000000;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-hero-desc {
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  max-width: 613px;
}

.fc-poc-hero-btns {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.fc-poc-btn-primary {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  padding: 3px 13px;
  background-color: var(--blue);
  border-radius: 4px;
  cursor: pointer;
  gap: 8px;
}
.fc-poc-btn-primary a{
  background: no-repeat;
}
.fc-poc-btn-dark {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  padding: 3px 13px;
  background-color: #000000;
  border-radius: 4px;
  cursor: pointer;
  gap: 8px;
}
.fc-poc-btn-dark a{
  background: no-repeat;
}
.fc-poc-btn-white-label {
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--white);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
}

/* ============================================================
   WHY FUSIOCHARTS SECTION
   ============================================================ */
.fc-poc-why-section {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 112px var(--container-lr-padding) !important;
  width: 100%;
  gap: 40px;
}

.fc-poc-section-head {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex-shrink: 0;
}

.fc-poc-section-title {
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
  color: transparent;
  max-width: 382px;
}

.fc-poc-title-black {
  color: #000000;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-title-blue {
  color: #3971c0;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-feature-grid {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 15px 16px;
  max-width: 853px;
}

.fc-poc-feature-card {
  display: flex;
  flex-direction: column;
  height: 200px;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  flex: 1 1 200px;
  background-color: var(--blue);
  border-radius: 4px;
  min-width: 180px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.fc-poc-feature-card:hover {
  background-color: #000000;
  transform: rotate(-3deg) scale(1.03);
}

.fc-poc-feature-card-body {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.fc-poc-feature-card-heading {
  width: 197px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: var(--white);
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
}

.fc-poc-feature-card-body-full {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.fc-poc-feature-card-heading-full {
  align-self: stretch;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: var(--white);
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
}


/* ============================================================
   WHO THIS IS FOR
   ============================================================ */
.fc-poc-who-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.fc-poc-who-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 112px 72px !important;
  width: 100%;
  background-color: var(--blue);
  gap: 40px;
}

.fc-poc-who-title {
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
  color: transparent;
  max-width: 261px;
}

.fc-poc-who-title-white {
  color: #ffffff;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-audience-card {
  display: flex;
  flex-direction: column;
  height: 200px;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  flex: 1 1 200px;
  background-color: var(--white);
  border-radius: 4px;
  min-width: 180px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.fc-poc-audience-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.fc-poc-audience-card-text {
  width: 197px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: var(--background);
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
}

.fc-poc-audience-card-text-colored {
  align-self: stretch;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  color: transparent;
}

.fc-poc-dark-text {
  color: #071c21;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.fc-poc-blue-text {
  color: #3871bf;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ============================================================
   LOGOS
   ============================================================ */
.fc-poc-logos-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0px 120px 0px !important;
  width: 100%;
}

.fc-poc-logos-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 23px;
}

.fc-poc-divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 0;
}

.fc-poc-logos-tagline {
  opacity: 0.6;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
  padding: 6px 20px;
  border:1px solid rgba(0, 0, 0, 0.2);
   border-left: 0px;
  border-right: 0px;

}

.fc-poc-logos-img {
  height: 139px;
  max-width: 100%;
  object-fit: contain;
  margin-top: 24px;
}

.fc-poc-logos-bottom-line {
  width: 100%;
  height: 1px;
  object-fit: cover;
  margin-top: 24px;
}



/* INTEGRATION PAGE*/
/* ── WHY INTEGRATE SECTION ── */

/* Small tag label above the main hero title (integration-specific) */
.hero-tag {
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--medium-blue);
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
}
.why-section {
     display: flex;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 120px 72px !important;
    position: relative;
    flex: 0 0 auto;
    gap: 40px !important;
    margin: 0px auto;
}

.why-title {
  position: relative;
  max-width: 545px;
  width: 45%;
  color: #000000;

}

.why-list {
  max-width: 524px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px; margin-left: auto !important;
}

.why-item {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}

.why-item-text {
  font-family: var(--desktop-body-font-family);
  font-style: var(--desktop-body-font-style);
  font-weight: var(--desktop-body-font-weight);
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}



/* ── SHARED SECTION HEADER ── */
.section-header {
  display: flex;
    flex-direction: column !important;
    max-width: 860px !important;
    width: 100% !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative;
    flex: 0 0 auto;
    padding: 0px !important;
}

.frontend-section .section-title h2, .backend-section .section-title h2{
  position: relative;
  width: 100%;
  color: #ffffff;
  text-align: center;
}

.frontend-section .section-desc, .backend-section .section-desc {
  position: relative;
  max-width: 732px !important;
  width: 100%;
  color: #ffffff !important;
  text-align: center !important;
}

/* ── INTEGRATION CARDS ── */
.cards-grid {
  display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    align-items: flex-start !important;
    gap: 16px !important;
    position: relative;
    padding: 0px !important;
}
.cards-grid .wp-block-columns{
	margin-bottom:0px !important;
}
.integration-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 260px;
  max-width: 312px;
  min-height: 304px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  position: relative;
  background-color: #fffffff7;
  border-radius: 4px;
}

.integration-card--stretch {
  flex: 1 1 300px;
  max-width: none;
}

.cards-grid--backend { justify-content: center; }

.card-header {
  display: flex;
  flex-direction: column;
  max-width: 187px;
  align-items: flex-start;
  gap: 16px;
  flex: 0 0 auto;
}

.card-name {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #071c21;
  font-size: var(--desktop-h4-font-size);
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
}

.card-desc {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: #000000;
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);
}

/* ── FRONTEND INTEGRATIONS SECTION ── */
.frontend-section {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 64px !important;
  padding: 120px 72px 60px !important;
  position: relative;
  flex: 0 0 auto !important;
  background-color: #3971c0;
}
.time-page .frontend-section {
	background-color: var(--color-theme-time-page);
	margin:0px !important;
	 padding: 80px 72px 80px !important;
}

/* ── BACKEND INTEGRATIONS SECTION ── */
.backend-section {
  display: flex  !important;
  flex-direction: column !important;
  width: 100%  !important;
  align-items: center !important;
  justify-content: center  !important;
  gap: 64px  !important;
  padding: 60px 72px 120px  !important;
  position: relative !important;
  flex: 0 0 auto  !important;
  background-color: #3971c0  !important;
}

/* ── DATA & BI SECTION ── */
.data-section {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 80px 24px !important;
  position: relative;
  width: 100%;
  flex: 0 0 auto !important;
}

.data-card {
  display: flex !important;
  width: 100% !important;
  max-width: 1290px;
  min-height: 450px;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  position: relative;
  background-color: #ffffff;
  border-radius: 3.66px !important;
  box-shadow: 3px 11px 25px #0000000a, 10px 44px 45px #0000000a,
    23px 99px 61px #00000005, 42px 176px 72px #00000003 !important;
  gap: 24px !important;
}

.data-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 400px;
  align-items: flex-start;
  gap: 8px;
  padding: 0 24px;
}

.data-card-text {
  display: flex !important;
  flex-direction: column!important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}

.data-title {
  position: relative;
  width: 100%;
  max-width: 544px;
  font-family: var(--desktop-h3-font-family);
  font-weight: var(--desktop-h3-font-weight);
  color: #000000;
  font-size: var(--desktop-h3-font-size);
  letter-spacing: var(--desktop-h3-letter-spacing);
  line-height: var(--desktop-h3-line-height);
}

.data-list {
  width: 100% !important;
  max-width: 515px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding-bottom: 13px !important;
}

.data-item {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}

.data-item-text {
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}

.btn-dark {
  all: unset;
  box-sizing: border-box;
  position: relative;
  background-color: var(--black);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3px 13px;
  border-radius: 4px;
  cursor: pointer;
}
.wp-block-button__link{
  border: none !important;
}
.wp-block-list{
margin:0px ;
}
.wp-block-list li{
  font-size: medium;
}
.btn-dark .wp-block-button__link {
  background: no-repeat;
}
.btn-text-white {
  position: relative;
  width: fit-content;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #ffffff;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: nowrap;
}

/* */
.principles-header {
  display: flex !important;
  flex-direction: column !important;
  max-width: 843px !important;
  width: 100%;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}
/* effects on hover integration card */
.integration-card-wrapper {
  perspective: 900px;
}

.integration-card {

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.integration-card:hover {
  transform: rotateY(8deg) rotateX(-4deg) scale(1.03);
  box-shadow: -8px 12px 40px rgba(0, 255, 200, 0.2);
  border-color: rgba(0, 255, 200, 0.4);
}

/* ── CTA SECTION ── */
.integration-cta-section .cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.integration-cta-section .cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 71px 221px;
  position: relative;
  width: 100%;
  background-color: var(--blue);
  border-radius: 3.65px;
  overflow: hidden;
}

.integration-cta-section .cta-title  h2{
  position: relative;
  max-width: 858px;
  width: 100%;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: #ffffff;
  font-size: var(--desktop-h2-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
}

.integration-cta-section .cta-body {
  max-width: 635px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.integration-cta-section .cta-text {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #ffffff;
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}

.integration-cta-section .cta-text-inner {
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  font-size: var(--desktop-body-font-size);
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
}

.integration-cta-section .btn-cta {
  all: unset;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
  cursor: pointer;
}

.integration-cta-section .cta-deco { position: absolute; top: -644px; left: -30px; width: 1436px; height: 1606px; pointer-events: none; }
.integration-cta-section .cta-bar { position: absolute; background-color: var(--medium-blue); }
.integration-cta-section .cta-bar--1 { top: 982px;  left: 286px;  width: 288px; height: 624px; }
.integration-cta-section .cta-bar--2 { top: 878px;  left: 1px;    width: 287px; height: 728px; }
.integration-cta-section .cta-bar--3 { top: 1036px; left: 574px;  width: 287px; height: 546px; }
.integration-cta-section .cta-bar--4 { top: 947px;  left: 861px;  width: 288px; height: 659px; }
.integration-cta-section .cta-bar--5 { top: 1px;    left: 1149px; width: 287px; height: 707px; }



/* ==============================================
   RESPONSIVE BREAKPOINTS
   ============================================== */

/* ── LARGE TABLET (≤ 1100px) ── */
@media (max-width: 1100px) {
  .fc-poc-navbar { padding: 24px 40px; }
  .fc-poc-hero { padding: 64px 40px 48px !important; }
  .footer--integration { padding: 60px 40px 40px; min-height: auto; }
  .footer-col-bg, .footer-rule { display: none; }

  .banner { padding: 80px 24px; }
  .banner-deco-dots, .banner-chart-img, .banner-bar-chart,
  .banner-column-chart, .banner-wave-chart { display: none; }

  .why-section { padding: 80px 40px !important; flex-wrap: wrap; }
  .why-title { width: 100%; max-width: 100%; }
  .why-list { width: 100%; max-width: 100%; }

  .frontend-section { padding: 80px 40px 60px; }
  .backend-section  { padding: 60px 40px 80px; }

  .data-card { flex-wrap: wrap; min-height: auto; }
  .data-card-content { flex: 1 1 100%; }
  .data-visual { width: 100%; height: 360px; }
  .chart-box { width: 100%; height: 360px; }

  .cta-section { padding: 24px; }
  .cta-box { padding: 60px 8%; }
  .cta-deco { display: none; }
  .integration-cta-section .cta-box {
	  padding:71px 50px !important;
  }
}

/* ── TABLET (≤ 900px) ── */
@media (max-width: 900px) {
  .fc-poc-navbar { padding: 20px 24px; }
  .fc-poc-nav-pill { gap: 16px; padding: 10px 12px; }
  .fc-poc-nav-links { gap: 12px; }
  .fc-poc-hero { padding: 56px 24px 40px !important; }
  .fc-poc-hero-title { font-size: 56px; }

  .footer--integration { padding: 48px 24px 40px; }

  .why-section { padding: 60px 24px !important; flex-direction: column; }
  .frontend-section { padding: 60px 24px 40px; }
  .backend-section  { padding: 40px 24px 60px; }

  .integration-card { max-width: none; flex: 1 1 220px; min-height: auto; }

  .data-visual { height: 280px; }
  .chart-box { height: 280px; }

  .cta-box { padding: 48px 5%; }

  .fc-poc-footer-nav { gap: 24px; }
  .fc-poc-footer-col { min-width: calc(50% - 12px); }
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {
  .fc-poc-navbar {
    padding: 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
  }
  .fc-poc-nav-pill { order: 3; width: 100%; justify-content: flex-start; }
  .fc-poc-nav-links { flex-wrap: wrap; gap: 8px 12px; }

  .fc-poc-hero { padding: 40px 16px 32px !important; }
  .fc-poc-hero-title { font-size: 36px; }
  .hero-tag { white-space: normal; text-align: center; }
  .fc-poc-hero-btns { flex-wrap: wrap; justify-content: center; }

  .banner { padding: 48px 16px; }
  .why-section { padding: 48px 16px !important; }
  .frontend-section, .backend-section { padding: 48px 16px 32px; }
  .integration-card { flex: 1 1 100%; max-width: 100%; min-height: auto; }

  .data-section { padding: 40px 16px; }
  .data-visual { height: 220px; }
  .chart-box { height: 220px; }

  .principles-section { padding: 48px 16px 64px; gap: 32px; }
  .principle-card { flex: 1 1 100%; max-width: 100%; min-height: auto; }

  .cta-section { padding: 16px; }
  .cta-box { padding: 40px 16px; border-radius: 4px; }
  .cta-title { font-size: clamp(1.4rem, 6vw, 2rem); }

  .footer--integration { padding: 40px 20px 32px; }
  .fc-poc-footer-nav { gap: 24px; }
  .fc-poc-footer-col { min-width: 100%; }
}

/* ── SMALL MOBILE (≤ 400px) ── */
@media (max-width: 400px) {
  .fc-poc-navbar { padding: 12px; }
  .fc-poc-hero { padding: 32px 12px 24px !important; }
  .frontend-section, .backend-section { padding: 32px 12px; }
  .cta-box { padding: 32px 12px; }
}