/* hero polish */
  .hero__area {
      position: relative;
      z-index: 1;
  }

  .hero__content .hero__title {
      letter-spacing: -0.6px;
      line-height: 1.08;
  }

  .hero-badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(11, 43, 42, .10);
      border-radius: 999px;
      box-shadow: 0 12px 30px rgba(2, 44, 40, .08);
      font-size: 13px;
      color: rgba(11, 43, 42, .78);
  }

  .hero-badge i {
      color: #009688;
  }

  .hero__search form {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .hero__search input {
      min-width: 260px;
      border-radius: 14px;
      border: 1px solid rgba(11, 43, 42, .14);
      padding: 14px 16px;
      background: rgba(255, 255, 255, .92);
  }

  .hero__thumb-wrapper img {
      filter: drop-shadow(0 28px 48px rgba(2, 44, 40, .18));
  }

  /* card hover */
  .services__item,
  .features__item,
  .price__item,
  .blog__item-5 {
      border-radius: 18px;
  }

  .services__item:hover,
  .features__item:hover,
  .price__item:hover,
  .blog__item-5:hover {
      transform: translateY(-3px);
      transition: all .25s ease;
      box-shadow: 0 22px 48px rgba(2, 44, 40, .12);
  }


  /* pricing wrapper */
  .pricing-wrap {
      padding: 0 26px;
  }

  .pricing-head {
      text-align: center;
      margin-bottom: 46px;
  }

  .pricing-head h2 {
      color: #1c2b2a;
      letter-spacing: -.3px;
  }

  .pricing-head p {
      margin-top: 10px;
      color: rgba(11, 43, 42, .72);
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
  }

  /* cards */
  .pricing-card {
      height: 100%;
      border-radius: 20px;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 16px 44px rgba(2, 44, 40, .08);
      transition: all .25s ease;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
  }

  .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 60px rgba(2, 44, 40, .12);
  }

  /* gradient top line */
  .pricing-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      opacity: .9;
  }

  /* header */
  .pricing-top {
      padding: 22px 22px 16px 22px;
      border-bottom: 1px solid rgba(11, 43, 42, .08);
      background: radial-gradient(600px 180px at 10% 0%, rgba(0, 150, 136, .10) 0%, rgba(255, 255, 255, 0) 65%);
  }

  .plan-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(11, 43, 42, .78);
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .18);
  }

  .plan-title {
      margin-top: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #0b2b2a;
      letter-spacing: -.2px;
  }

  .plan-sub {
      margin-top: 4px;
      color: rgba(11, 43, 42, .70);
      font-size: 13px;
  }

  .plan-price {
      padding: 18px 22px 8px 22px;
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
  }

  .price-number {
      font-size: 34px;
      font-weight: 800;
      color: #0b2b2a;
      letter-spacing: -.8px;
      line-height: 1;
  }

  .price-meta {
      font-size: 13px;
      color: rgba(11, 43, 42, .70);
      line-height: 1.4;
  }

  .plan-desc {
      padding: 0 22px 12px 22px;
      color: rgba(11, 43, 42, .72);
      line-height: 1.65;
      font-size: 14px;
  }

  /* features list */
  .plan-features {
      padding: 10px 22px 0 22px;
      flex: 1;
  }

  .plan-features ul {
      padding-left: 0;
      margin: 0;
      list-style: none;
      display: grid;
      gap: 10px;
  }

  .plan-features li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(11, 43, 42, .82);
      font-size: 14px;
      line-height: 1.45;
  }

  .plan-features li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      min-width: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(0, 150, 136, .10);
      color: #009688;
      font-weight: 900;
      margin-top: 1px;
  }

  /* footer / CTA */
  .pricing-cta {
      padding: 18px 22px 22px 22px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
  }

  .pricing-cta .w-btn {
      border-radius: 14px;
      box-shadow: 0 14px 26px rgba(0, 150, 136, .14);
      transition: all .25s ease;
  }

  .pricing-cta .w-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(0, 150, 136, .20);
  }

  .pricing-cta small {
      color: rgba(11, 43, 42, .62);
  }

  /* highlight (recommended) */
  .pricing-card.is-featured {
      border: 1px solid rgba(0, 150, 136, .25);
      box-shadow: 0 20px 64px rgba(0, 150, 136, .12);
  }

  .featured-ribbon {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 999px;
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      color: #fff;
      box-shadow: 0 14px 30px rgba(0, 150, 136, .22);
  }

  /* responsive spacing */
  @media (max-width: 575px) {
      .pricing-wrap {
          padding: 0 14px;
      }

      .price-number {
          font-size: 30px;
      }

      .plan-title {
          font-size: 18px;
      }
  }

  /* ===== Trust section (modern, enterprise) ===== */
  .trust-section {
      position: relative;
      padding: 46px;
      border-radius: 26px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(700px 350px at 12% 10%, rgba(0, 150, 136, .10) 0%, rgba(255, 255, 255, 0) 60%),
          radial-gradient(700px 350px at 88% 0%, rgba(51, 135, 175, .10) 0%, rgba(255, 255, 255, 0) 55%),
          rgba(255, 255, 255, .96);
      box-shadow: 0 26px 80px rgba(2, 44, 40, .10);
      overflow: hidden;
  }

  .trust-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 150, 136, .18);
      background: rgba(0, 150, 136, .08);
      color: rgba(11, 43, 42, .80);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .2px;
  }

  .trust-kicker i {
      color: #009688;
  }

  .trust-title {
      margin-top: 16px;
      font-size: 44px;
      line-height: 1.08;
      letter-spacing: -1px;
      color: #0b2b2a;
  }

  .trust-lead {
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.8;
      color: rgba(11, 43, 42, .72);
      max-width: 56ch;
  }

  .trust-list {
      margin-top: 18px;
      display: grid;
      gap: 12px;
      padding: 0;
      list-style: none;
  }

  .trust-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      line-height: 1.55;
      color: rgba(11, 43, 42, .82);
  }

  .trust-list li .tick {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .18);
      color: #009688;
      font-weight: 900;
      margin-top: 1px;
  }

  .trust-list b {
      color: #0b2b2a;
  }

  .trust-actions {
      margin-top: 22px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
  }

  .trust-actions .btn-primary,
  .trust-actions .btn-secondary {
      border-radius: 14px;
      padding: 12px 18px;
      font-weight: 800;
      transition: all .25s ease;
      box-shadow: 0 14px 26px rgba(0, 150, 136, .14);
  }

  .trust-actions .btn-primary:hover,
  .trust-actions .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(0, 150, 136, .20);
  }

  .trust-actions .btn-primary {
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      color: #fff;
      border: 0;
  }

  .trust-actions .btn-secondary {
      background: #fff;
      color: #0b2b2a;
      border: 1px solid rgba(11, 43, 42, .16);
      box-shadow: 0 12px 24px rgba(2, 44, 40, .08);
  }

  .trust-note {
      margin-top: 10px;
      font-size: 13px;
      color: rgba(11, 43, 42, .62);
  }

  /* Right panel */
  .trust-panel {
      height: 100%;
      border-radius: 22px;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 18px 60px rgba(2, 44, 40, .10);
      padding: 22px;
      position: relative;
      overflow: hidden;
  }

  .trust-panel::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      opacity: .9;
  }

  .trust-cards {
      margin-top: 10px;
      display: grid;
      gap: 12px;
  }

  .trust-card {
      display: flex;
      gap: 12px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .95);
  }

  .trust-icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .18);
      color: #009688;
      font-size: 18px;
      flex: 0 0 auto;
  }

  .trust-card h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 900;
      color: #0b2b2a;
      letter-spacing: -.2px;
  }

  .trust-card p {
      margin: 3px 0 0 0;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(11, 43, 42, .70);
  }

  .trust-logos {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(11, 43, 42, .08);
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
  }

  .trust-logos img {
      height: 40px;
      width: auto;
      opacity: .95;
      filter: drop-shadow(0 12px 18px rgba(2, 44, 40, .08));
  }

  /* proof strip */
  .trust-proof {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(11, 43, 42, .08);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
  }

  .proof-item {
      border-radius: 16px;
      padding: 14px;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .90);
  }

  .proof-item .n {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.4px;
      color: #0b2b2a;
      line-height: 1.1;
  }

  .proof-item .t {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(11, 43, 42, .68);
      line-height: 1.5;
  }

  @media (max-width: 991px) {
      .trust-section {
          padding: 26px;
      }

      .trust-title {
          font-size: 34px;
      }

      .trust-proof {
          grid-template-columns: 1fr;
      }
  }

  /* ===== Blog (modern cards) ===== */
  .blog-wrap {
      border-radius: 26px;
      padding: 44px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(900px 420px at 12% 0%, rgba(0, 150, 136, .06) 0%, rgba(255, 255, 255, 0) 60%),
          radial-gradient(900px 420px at 90% 10%, rgba(51, 135, 175, .06) 0%, rgba(255, 255, 255, 0) 55%),
          rgba(255, 255, 255, .96);
      box-shadow: 0 26px 80px rgba(2, 44, 40, .10);
  }

  .blog-head {
      text-align: center;
      margin-bottom: 26px;
  }

  .blog-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 150, 136, .18);
      background: rgba(0, 150, 136, .08);
      color: rgba(11, 43, 42, .80);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .2px;
  }

  .blog-kicker i {
      color: #009688;
  }

  .blog-head h2 {
      margin: 12px 0 0 0;
      font-size: 38px;
      line-height: 1.12;
      letter-spacing: -1px;
      color: #0b2b2a;
  }

  .blog-head p {
      margin: 10px auto 0;
      max-width: 80ch;
      color: rgba(11, 43, 42, .72);
      font-size: 15px;
      line-height: 1.75;
  }

  .post-card {
      height: 100%;
      border-radius: 20px;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 16px 44px rgba(2, 44, 40, .08);
      overflow: hidden;
      transition: all .25s ease;
      position: relative;
      display: flex;
      flex-direction: column;
  }

  .post-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 60px rgba(2, 44, 40, .12);
  }

  .post-thumb {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(11, 43, 42, .08);
      background: #fff;
  }

  .post-thumb img {
      width: 100%;
      height: 230px;
      object-fit: cover;
      display: block;
      transition: transform .35s ease;
  }

  .post-card:hover .post-thumb img {
      transform: scale(1.04);
  }

  /* soft overlay for readability */
  .post-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .06) 100%);
      pointer-events: none;
  }

  .post-body {
      padding: 16px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
  }

  .post-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
  }

  .post-date {
      font-size: 12px;
      color: rgba(11, 43, 42, .62);
      font-weight: 700;
  }

  .post-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(0, 150, 136, .08);
      border: 1px solid rgba(0, 150, 136, .16);
      color: rgba(11, 43, 42, .78);
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
  }

  .post-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.35;
      letter-spacing: -.2px;
      font-weight: 950;
      color: #0b2b2a;
  }

  .post-title a {
      color: #0b2b2a;
      text-decoration: none;
  }

  .post-title a:hover {
      text-decoration: underline;
  }

  .post-link {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 950;
      color: #009688;
      text-decoration: none;
      padding-top: 12px;
      border-top: 1px solid rgba(11, 43, 42, .08);
  }

  .post-link i {
      transform: translateY(1px);
  }

  .post-link:hover {
      text-decoration: underline;
  }

  @media (max-width: 991px) {
      .blog-wrap {
          padding: 24px;
      }

      .blog-head h2 {
          font-size: 30px;
      }

      .post-thumb img {
          height: 210px;
      }
  }

  /* ===== Features (modern SaaS cards) ===== */
  .features-wrap {
      border-radius: 26px;
      padding: 44px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(900px 420px at 10% 0%, rgba(0, 150, 136, .06) 0%, rgba(255, 255, 255, 0) 60%),
          radial-gradient(900px 420px at 90% 10%, rgba(51, 135, 175, .06) 0%, rgba(255, 255, 255, 0) 55%),
          rgba(255, 255, 255, .96);
      box-shadow: 0 26px 80px rgba(2, 44, 40, .10);
  }

  .feat-head {
      text-align: center;
      margin-bottom: 26px;
  }

  .feat-head h2 {
      font-size: 38px;
      line-height: 1.12;
      letter-spacing: -1px;
      color: #0b2b2a;
      margin: 0;
  }

  .feat-head p {
      margin: 10px auto 0;
      max-width: 72ch;
      color: rgba(11, 43, 42, .72);
      font-size: 15px;
      line-height: 1.75;
  }

  .feat-card {
      height: 100%;
      border-radius: 20px;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 16px 44px rgba(2, 44, 40, .08);
      transition: all .25s ease;
      overflow: hidden;
      position: relative;
      padding: 18px 18px 16px;
      display: flex;
      flex-direction: column;
  }

  .feat-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      opacity: .85;
  }

  .feat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 60px rgba(2, 44, 40, .12);
  }

  .feat-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
      margin-bottom: 10px;
  }

  .feat-icon {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .18);
      color: #009688;
      font-size: 20px;
      flex: 0 0 auto;
  }

  .feat-title {
      margin: 0;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: -.2px;
      color: #0b2b2a;
      line-height: 1.2;
  }

  .feat-sub {
      margin: 8px 0 0 0;
      color: rgba(11, 43, 42, .72);
      font-size: 13.5px;
      line-height: 1.65;
  }

  .feat-list {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(11, 43, 42, .08);
      flex: 1;
  }

  .feat-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
  }

  .feat-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(11, 43, 42, .80);
      font-size: 13.5px;
      line-height: 1.5;
  }

  .feat-list li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      min-width: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .16);
      color: #009688;
      font-weight: 900;
      margin-top: 1px;
  }

  .feat-bottom {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(11, 43, 42, .08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
  }

  .feat-bottom small {
      color: rgba(11, 43, 42, .60);
      font-size: 12px;
      line-height: 1.4;
  }

  .feat-bottom a {
      color: #009688;
      font-weight: 900;
      text-decoration: none;
  }

  .feat-bottom a:hover {
      text-decoration: underline;
  }

  .feat-more {
      margin-top: 26px;
      text-align: center;
  }

  .feat-more .w-btn {
      border-radius: 14px;
      box-shadow: 0 16px 32px rgba(0, 150, 136, .18);
      transition: all .25s ease;
  }

  .feat-more .w-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(0, 150, 136, .24);
  }

  @media (max-width: 991px) {
      .features-wrap {
          padding: 24px;
      }

      .feat-head h2 {
          font-size: 30px;
      }
  }


  /* ===== FAQ WRAPPER (compact + clean) ===== */
  .faq-wrap {
      border-radius: 26px;
      padding: 34px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(900px 420px at 10% 0%, rgba(0, 150, 136, .06) 0%, rgba(255, 255, 255, 0) 60%),
          rgba(255, 255, 255, .96);
      box-shadow: 0 22px 70px rgba(2, 44, 40, .10);
  }

  .faq-head {
      margin-bottom: 18px;
  }

  .faq-head h2 {
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: -1px;
      color: #0b2b2a;
      margin: 0;
  }

  .faq-head p {
      margin: 10px 0 0 0;
      color: rgba(11, 43, 42, .70);
      font-size: 14.5px;
      line-height: 1.7;
      max-width: 62ch;
  }

  /* LEFT PANEL: remove "card inside card" feel */
  .faq-left {
      border-radius: 20px;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 16px 44px rgba(2, 44, 40, .08);
      padding: 14px;
      /* compact */
  }

  /* Accordion reset */
  .faq-left .accordion {
      border: 0;
      margin: 0;
  }

  .faq-left .accordion-item {
      border: 0;
      border-radius: 16px;
      margin: 10px 0;
      /* compact spacing */
      overflow: hidden;
      background: rgba(255, 255, 255, .98);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 10px 26px rgba(2, 44, 40, .06);
  }

  .faq-left .accordion-header {
      margin: 0;
  }

  .faq-left .accordion-button {
      padding: 14px 14px !important;
      /* compact */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: transparent !important;
      color: #0b2b2a;
      font-weight: 900;
      font-size: 15px;
      box-shadow: none !important;
  }

  .faq-left .accordion-button:focus {
      box-shadow: 0 0 0 6px rgba(0, 150, 136, .10) !important;
      border-color: rgba(0, 150, 136, .25) !important;
  }

  /* kill bootstrap chevron */
  .faq-left .accordion-button::after {
      display: none !important;
      content: none !important;
  }

  /* text */
  .faq-left .accordion-button .acc-text {
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
  }

  /* compact icon */
  .faq-left .accordion-button .acc-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .98);
      border: 1px solid rgba(11, 43, 42, .12);
      position: relative;
  }

  .faq-left .accordion-button .acc-icon::before,
  .faq-left .accordion-button .acc-icon::after {
      content: "";
      position: absolute;
      background: rgba(11, 43, 42, .82);
      border-radius: 2px;
  }

  .faq-left .accordion-button .acc-icon::before {
      width: 12px;
      height: 2px;
  }

  .faq-left .accordion-button .acc-icon::after {
      width: 2px;
      height: 12px;
  }

  /* open => minus */
  .faq-left .accordion-button:not(.collapsed) .acc-icon::after {
      opacity: 0;
  }

  /* open state */
  .faq-left .accordion-button:not(.collapsed) {
      background: rgba(0, 150, 136, .06) !important;
  }

  .faq-left .accordion-body {
      padding: 12px 14px 14px !important;
      /* compact */
      font-size: 14px;
      line-height: 1.7;
      color: rgba(11, 43, 42, .75);
      background: rgba(0, 150, 136, .04);
      border-top: 1px solid rgba(11, 43, 42, .08);
  }

  /* RIGHT PANEL */
  .faq-side {
      border-radius: 22px;
      padding: 28px;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 18px 54px rgba(2, 44, 40, .10);
      height: 100%;
  }

  .faq-side h3 {
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -.6px;
      color: #0b2b2a;
      margin: 0 0 10px 0;
  }

  .faq-side p {
      color: rgba(11, 43, 42, .72);
      line-height: 1.7;
      font-size: 14.5px;
      margin: 0 0 16px 0;
  }

  .faq-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 14px;
  }

  .stat {
      border-radius: 16px;
      padding: 12px;
      text-align: center;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .96);
  }

  .stat .n {
      font-size: 20px;
      font-weight: 950;
      letter-spacing: -.4px;
      color: #0b2b2a;
      line-height: 1.1;
  }

  .stat .t {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(11, 43, 42, .66);
      line-height: 1.4;
  }

  .faq-cta {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .faq-cta .w-btn {
      border-radius: 14px;
      box-shadow: 0 16px 32px rgba(0, 150, 136, .18);
      transition: all .25s ease;
      width: 100%;
      text-align: center;
  }

  .faq-cta .w-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(0, 150, 136, .24);
  }

  .faq-cta small {
      color: rgba(11, 43, 42, .62);
      font-size: 12.5px;
      line-height: 1.5;
  }

  @media (max-width: 991px) {
      .faq-wrap {
          padding: 22px;
      }

      .faq-head h2 {
          font-size: 28px;
      }

      .faq-stats {
          grid-template-columns: 1fr;
      }
  }

  /* ===== Integrations (modern SaaS showcase) ===== */
  .integrations-wrap {
      position: relative;
      border-radius: 26px;
      padding: 46px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(800px 360px at 12% 0%, rgba(0, 150, 136, .10) 0%, rgba(255, 255, 255, 0) 60%),
          radial-gradient(800px 360px at 88% 10%, rgba(51, 135, 175, .10) 0%, rgba(255, 255, 255, 0) 58%),
          rgba(255, 255, 255, .96);
      box-shadow: 0 26px 80px rgba(2, 44, 40, .10);
      overflow: hidden;
  }

  .int-head {
      text-align: center;
      margin-bottom: 28px;
  }

  .int-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 150, 136, .18);
      background: rgba(0, 150, 136, .08);
      color: rgba(11, 43, 42, .80);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .2px;
  }

  .int-kicker i {
      color: #009688;
  }

  .int-title {
      margin-top: 14px;
      font-size: 40px;
      line-height: 1.12;
      letter-spacing: -1px;
      color: #0b2b2a;
  }

  .int-sub {
      margin-top: 10px;
      color: rgba(11, 43, 42, .72);
      font-size: 15px;
      line-height: 1.75;
      max-width: 70ch;
      margin-left: auto;
      margin-right: auto;
  }

  .int-grid {
      margin-top: 22px;
  }

  .int-card {
      height: 100%;
      border-radius: 20px;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 16px 44px rgba(2, 44, 40, .08);
      transition: all .25s ease;
      overflow: hidden;
      position: relative;
      padding: 18px;
      display: flex;
      flex-direction: column;
  }

  .int-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #202d7d 0%, #3387af 100%);
      opacity: .85;
  }

  .int-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 60px rgba(2, 44, 40, .12);
  }

  .int-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
      margin-bottom: 14px;
  }

  .int-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 46px;
  }

  .int-logo .mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 150, 136, .08);
      border: 1px solid rgba(0, 150, 136, .16);
      overflow: hidden;
      flex: 0 0 auto;
  }

  .int-logo .mark img {
      width: 70%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 12px 14px rgba(2, 44, 40, .08));
  }

  .int-name {
      margin: 0;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -.2px;
      color: #0b2b2a;
      line-height: 1.2;
  }

  .int-mini {
      margin: 2px 0 0 0;
      font-size: 12px;
      color: rgba(11, 43, 42, .66);
      line-height: 1.4;
  }

  .int-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .92);
      color: rgba(11, 43, 42, .76);
      white-space: nowrap;
  }

  .int-status .dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #009688;
      box-shadow: 0 0 0 6px rgba(0, 150, 136, .12);
  }

  .int-status.soon .dot {
      background: #f0b429;
      box-shadow: 0 0 0 6px rgba(240, 180, 41, .16);
  }

  .int-desc {
      color: rgba(11, 43, 42, .72);
      font-size: 14px;
      line-height: 1.65;
      margin-bottom: 12px;
  }

  .int-benefits {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 9px;
      flex: 1;
  }

  .int-benefits li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 13px;
      line-height: 1.55;
      color: rgba(11, 43, 42, .82);
  }

  .int-benefits li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      min-width: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      background: rgba(0, 150, 136, .10);
      border: 1px solid rgba(0, 150, 136, .16);
      color: #009688;
      font-weight: 900;
      margin-top: 1px;
  }

  .int-footer {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(11, 43, 42, .08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
  }

  .int-footer small {
      color: rgba(11, 43, 42, .60);
      font-size: 12px;
      line-height: 1.4;
  }

  .int-footer a {
      font-weight: 900;
      color: #009688;
      text-decoration: none;
  }

  .int-footer a:hover {
      text-decoration: underline;
  }

  .int-cta {
      margin-top: 26px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      padding-top: 18px;
      border-top: 1px solid rgba(11, 43, 42, .08);
  }

  .int-cta .w-btn {
      border-radius: 14px;
      box-shadow: 0 14px 26px rgba(0, 150, 136, .14);
      transition: all .25s ease;
  }

  .int-cta .w-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(0, 150, 136, .20);
  }

  .int-cta .note {
      color: rgba(11, 43, 42, .66);
      font-size: 13px;
      line-height: 1.6;
      max-width: 70ch;
  }

  @media (max-width: 991px) {
      .integrations-wrap {
          padding: 26px;
      }

      .int-title {
          font-size: 32px;
      }
  }

  /* ===== HERO (clean + conversion-first) ===== */
  .hero-modern {
      position: relative;
      padding-top: 30px;
      z-index: 1;

  }

  /* ZEMİN YEŞİLLİĞİ DÜZELTİLDİ (daha nötr/premium) */
  .hero-modern::before {
      content: "";
      position: absolute;

      /* 🔥 KRİTİK NOKTA */
      top: 260px;
      /* üst taraf TAM BEYAZ kalır */
      left: -30px;
      right: -30px;
      bottom: -80px;

      background:
          radial-gradient(900px 460px at 50% 0%, rgba(0, 150, 136, .08) 0%, rgba(255, 255, 255, 0) 60%),
          radial-gradient(900px 460px at 85% 30%, rgba(51, 135, 175, .08) 0%, rgba(255, 255, 255, 0) 55%),
          linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 252, 251, 1) 100%);

      z-index: -1;
      pointer-events: none;
  }

  .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 150, 136, .18);
      background: rgba(0, 150, 136, .08);
      color: rgba(11, 43, 42, .80);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .25px;
  }

  .hero-kicker i {
      color: #009688;
  }

  .hero-title {
      margin-top: 14px;
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -1.2px;
      color: #0b2b2a;
  }

  .hero-lead {
      margin-top: 14px;
      color: rgba(11, 43, 42, .72);
      font-size: 16px;
      line-height: 1.85;
      max-width: 64ch;
  }

  .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
  }

  .proof-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      color: rgba(11, 43, 42, .78);
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 14px 30px rgba(2, 44, 40, .08);
  }

  .proof-pill i {
      color: #009688;
  }

  .hero-form {
      margin-top: 22px;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(11, 43, 42, .10);
      border-radius: 20px;
      padding: 16px;
      box-shadow: 0 18px 60px rgba(2, 44, 40, .10);
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 680px;
  }

  .hero-fields {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .hero-input {
      flex: 1 1 240px;
      border-radius: 14px;
      border: 1px solid rgba(11, 43, 42, .14);
      padding: 14px 14px;
      background: rgba(255, 255, 255, .96);
      outline: none;
      transition: all .2s ease;
  }

  .hero-input:focus {
      border-color: rgba(0, 150, 136, .35);
      box-shadow: 0 0 0 6px rgba(0, 150, 136, .10);
  }

  /* Telefon kalkınca input çok uzamasın */
  .hero-fields .hero-input {
      max-width: 420px;
  }

  @media (max-width: 991px) {
      .hero-fields .hero-input {
          max-width: 100%;
      }
  }

  .hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
  }

  .hero-btn-primary {
      border-radius: 14px;
      padding: 12px 16px;
      font-weight: 900;
      transition: all .25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      cursor: pointer;
      border: 0;
      color: #fff;
      background: linear-gradient(90deg, #009688 0%, #3387af 100%);
      box-shadow: 0 16px 32px rgba(0, 150, 136, .18);
  }

  .hero-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(0, 150, 136, .24);
  }

  .hero-note {
      margin-top: 2px;
      color: rgba(11, 43, 42, .62);
      font-size: 12.5px;
      line-height: 1.5;
  }

  /* right visual */
  .hero-visual {
      height: 100%;
      border-radius: 24px;
      border: 1px solid rgba(11, 43, 42, .10);
      background:
          radial-gradient(800px 300px at 20% 0%, rgba(0, 150, 136, .10) 0%, rgba(255, 255, 255, 0) 60%),
          rgba(255, 255, 255, .92);
      box-shadow: 0 26px 80px rgba(2, 44, 40, .12);
      overflow: hidden;
      position: relative;
  }

  .hero-visual::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #202d7d 0%, #3387af 100%);
      opacity: .85;
      z-index: 2;
  }

  .hero-visual .meta {
      padding: 18px 18px 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
  }

  .hero-visual .meta .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      background: rgba(0, 150, 136, .08);
      border: 1px solid rgba(0, 150, 136, .16);
      color: rgba(11, 43, 42, .78);
  }

  .hero-visual .meta .tag i {
      color: #009688;
  }

  .hero-visual .meta .mini {
      font-size: 12px;
      color: rgba(11, 43, 42, .62);
      font-weight: 700;
  }

  .hero-visual .shot {
      padding: 16px 18px 18px 18px;
  }

  .hero-visual img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 18px;
      border: 1px solid rgba(11, 43, 42, .10);
      box-shadow: 0 18px 40px rgba(2, 44, 40, .10);
      background: #fff;
  }

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

  .micro {
      border-radius: 16px;
      padding: 12px;
      border: 1px solid rgba(11, 43, 42, .10);
      background: rgba(255, 255, 255, .90);
  }

  .micro .n {
      font-weight: 950;
      color: #0b2b2a;
      letter-spacing: -.3px;
      font-size: 14px;
      line-height: 1.2;
  }

  .micro .t {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(11, 43, 42, .66);
      line-height: 1.45;
  }

  @media (max-width: 991px) {
      .hero-title {
          font-size: 40px;
      }

      .hero-form {
          max-width: 100%;
      }

      .hero-microproof {
          grid-template-columns: 1fr;
      }
  }

  .hero-inline-form {
      display: flex;
      gap: 12px;
      align-items: stretch;
      flex-wrap: wrap;
  }

  /* input */
  .hero-inline-form .hero-input {
      flex: 1 1 auto;
      min-width: 260px;
      max-width: none;
  }

  /* button */
  .hero-inline-form .hero-btn-primary {
      white-space: nowrap;
      padding-left: 20px;
      padding-right: 20px;
  }

  /* MOBİL: alt alta */
  @media (max-width: 575px) {
      .hero-inline-form {
          flex-direction: column;
      }

      .hero-inline-form .hero-btn-primary {
          width: 100%;
          justify-content: center;
      }
  }

  /* =========================
   PERF PATCH (scroll jank fix)
   ========================= */

  /* 1) CSS filters like drop-shadow are expensive during scroll */
  .hero__thumb-wrapper img,
  .trust-logos img,
  .int-logo .mark img {
      filter: none !important;
  }

  /* 2) Contain paints to prevent huge repaint areas on scroll */
  .pricing-card,
  .feat-card,
  .int-card,
  .post-card,
  .trust-panel,
  .faq-left,
  .faq-side,
  .cta-modern,
  .pricing-wrap,
  .features-wrap,
  .integrations-wrap,
  .trust-section,
  .blog-wrap,
  .faq-wrap {
      contain: layout paint;
  }

  /* 3) Let browser skip offscreen rendering (Chrome/Edge) */
  .services__area,
  .about__area,
  .price__area,
  .faq__area,
  .features__area,
  .blog__area,
  .cta__area {
      content-visibility: auto;
      contain-intrinsic-size: 900px;
  }

  /* 4) Reduce extreme shadow blur a bit (large blur hurts scrolling) */
  .pricing-wrap,
  .features-wrap,
  .integrations-wrap,
  .trust-section,
  .blog-wrap {
      box-shadow: 0 18px 50px rgba(2, 44, 40, .10) !important;
  }

  .trust-panel,
  .cta-modern {
      box-shadow: 0 16px 44px rgba(2, 44, 40, .10) !important;
  }

  /* 5) Pause WOW/other animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
      .wow {
          animation: none !important;
          transition: none !important;
      }

      .circle-animation,
      .features__shape img,
      .services__shape img {
          animation: none !important;
      }
  }

   /* ===== Footer Modern ===== */
   .footer-modern {
       border-top: 1px solid rgba(11, 43, 42, .10);
       background:
           radial-gradient(900px 420px at 10% 0%, rgba(0, 150, 136, .06) 0%, rgba(255, 255, 255, 0) 60%),
           radial-gradient(900px 420px at 90% 10%, rgba(51, 135, 175, .06) 0%, rgba(255, 255, 255, 0) 55%),
           linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(247, 252, 251, 1) 100%);
   }

   .footer-top-card {
       border-radius: 26px;
       border: 1px solid rgba(11, 43, 42, .10);
       background: rgba(255, 255, 255, .92);
       box-shadow: 0 18px 60px rgba(2, 44, 40, .10);
       padding: 34px;
       position: relative;
       overflow: hidden;
   }

   .footer-top-card::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 6px;
       background: linear-gradient(90deg, #009688 0%, #3387af 100%);
       opacity: .85;
   }

   .footer-title {
       font-weight: 950;
       letter-spacing: -.3px;
       color: #0b2b2a;
       font-size: 16px;
       margin-bottom: 12px;
   }

   .footer-desc {
       color: rgba(11, 43, 42, .72);
       line-height: 1.75;
       font-size: 14px;
       margin: 12px 0 0 0;
       max-width: 52ch;
   }

   .footer-links ul {
       list-style: none;
       padding: 0;
       margin: 0;
       display: grid;
       gap: 10px;
   }

   .footer-links a {
       color: rgba(11, 43, 42, .72);
       text-decoration: none;
       font-weight: 700;
       transition: all .2s ease;
   }

   .footer-links a:hover {
       color: #009688;
       text-decoration: underline;
   }

   .footer-badges {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 16px;
   }

   .f-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 12px;
       border-radius: 999px;
       border: 1px solid rgba(11, 43, 42, .10);
       background: rgba(255, 255, 255, .94);
       color: rgba(11, 43, 42, .78);
       font-size: 12px;
       font-weight: 900;
       white-space: nowrap;
   }

   .f-badge i {
       color: #009688;
   }

   .footer-social {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       margin-top: 8px;
   }

   .footer-social a {
       width: 40px;
       height: 40px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid rgba(11, 43, 42, .12);
       background: rgba(255, 255, 255, .96);
       color: rgba(11, 43, 42, .70);
       box-shadow: 0 12px 26px rgba(2, 44, 40, .08);
       transition: all .2s ease;
       text-decoration: none;
   }

   .footer-social a:hover {
       transform: translateY(-2px);
       color: #009688;
       box-shadow: 0 16px 34px rgba(2, 44, 40, .10);
   }

   .footer-cta {
       margin-top: 16px;
   }

   .footer-cta .w-btn {
       border-radius: 14px;
       box-shadow: 0 16px 32px rgba(0, 150, 136, .18);
       transition: all .25s ease;
       width: 100%;
       text-align: center;
   }

   .footer-cta .w-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 20px 40px rgba(0, 150, 136, .24);
   }

   .footer-bottom-bar {
       margin-top: 26px;
       padding: 18px 0;
       border-top: 1px solid rgba(11, 43, 42, .10);
       color: rgba(11, 43, 42, .66);
       font-size: 13px;
   }

   .footer-certs {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
       justify-content: flex-end;
   }

   .footer-certs img {
       width: 92px;
       height: auto;
       display: block;
       background: #fff;
       border-radius: 10px;
       border: 1px solid rgba(11, 43, 42, .10);
       padding: 6px;
   }

   @media (max-width: 991px) {
       footer.footer__area {
           padding-top: 130px !important;
       }

       .footer-top-card {
           padding: 22px;
       }

       .footer-certs {
           justify-content: flex-start;
       }
   }