@import url(light.css);
    @import url(dark.css);

    :root {
      --md-ref-typeface-brand: 'Roboto Flex', sans-serif;
      --md-ref-typeface-plain: 'Roboto Flex', sans-serif;

      font-family: var(--md-ref-typeface-plain);
      font-size: 16px;

      /*      background: var(--md-sys-color-background);*/
      /*      color: var(--md-sys-color-on-background);*/
    }

    
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 24px 16px;
    }

    @media (min-width: 40rem) {
      .main {
        max-width: 40rem;
        padding-left: 24px;
        padding-right: 24px;
      }
    }

    @media (min-width: 48rem) {
      .main {
        max-width: 48rem;
      }
    }

    @media (min-width: 64rem) {
      .main {
        max-width: 64rem;
        padding-left: 32px;
        padding-right: 32px;
      }
    }

    @media (min-width: 80rem) {
      .main {
        max-width: 80rem;
      }
    }

    @media (min-width: 96rem) {
      .main {
        max-width: 96rem;
      }
    }

    .slightly-opaque {
      background-color: rgb(0 0 0 / 0.3);
    }

    .green,
    .success {
      color: var(--success-color);
    }

    .red,
    .error {
      color: var(--error-color);
    }

    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }

    .flex {
      display: flex;
    }

    .flexr {
      display: flex;
    }

    .flexw {
      display: flex;
      flex-wrap: wrap;
    }

    .grid {
      display: grid;
    }

    /* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */
    @media (width < 840px) {
      .flexr {
        flex-direction: column;
      }

      .mobOrder1 {
        order: -100;
      }

      .mobOrder2 {
        order: -50;
      }

      .mobOrder3 {
        order: -20;
      }

      .lteMedium {
        display: block;
      }

      .gtMedium {
        /* aka expanded */
        display: none;
      }
    }

    @media (width >=840px) {
      .gtMedium {
        display: block;
      }

      .lteMedium {
        display: none;
      }
    }

    .row {
      flex-direction: row;
    }

    .col {
      flex-direction: column;
    }

    .jcc {
      justify-content: center;
    }

    .jcsb {
      justify-content: space-between;
    }

    .jcse {
      justify-content: space-evenly;
    }

    .jce {
      justify-content: end;
    }

    .aic {
      align-items: center;
    }

    .rc4 {
      border-radius: 4px;
    }

    .a2 {
      text-decoration: none;
      color: white;
    }

    /* .a2:hover {
    text-decoration: underline;
  } */

    .ais {
      align-items: flex-start;
    }

    .aie {
      align-items: flex-end;
    }

    .flex1 {
      flex: 1;
    }

    .g4 {
      gap: 4px;
    }

    .g6 {
      gap: 6px;
    }

    .g8 {
      gap: 8px;
    }

    .g10 {
      gap: 10px;
    }

    .g12 {
      gap: 12px;
    }

    .g16 {
      gap: 16px;
    }

    .g20 {
      gap: 20px;
    }

    .g24 {
      gap: 24px;
    }
    .g32 {
      gap: 32px;
    }

    .p4 {
      padding: 4px;
    }
    .p8 {
      padding: 8px;
    }
    .p12 {
      padding: 12px;
    }
    .p16 {
      padding: 16px;
    }
    .p20 {
      padding: 20px;
    }
    .p24 {
      padding: 24px;
    }
    .p32 {
      padding: 32px;
    }

    .pt12 {
      padding-top: 12px;
    }
    .pt40 {
      padding-top: 40px;
    }

    .pb40 {
      padding-bottom: 40px;
    }

    .mt4 {
      margin-top: 4px;
    }

    .mt8 {
      margin-top: 8px;
    }

    .mt12 {
      margin-top: 12px;
    }

    .mt16 {
      margin-top: 16px;
    }

    .mt20 {
      margin-top: 20px;
    }

    .mt24 {
      margin-top: 24px;
    }
    .mt32 {
      margin-top: 32px;
    }
    .mt48 {
      margin-top: 48px;
    }

    .mb4 {
      margin-bottom: 4px;
    }

    .mb8 {
      margin-bottom: 8px;
    }

    .mb12 {
      margin-bottom: 12px;
    }

    .mb16 {
      margin-bottom: 16px;
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .mb24 {
      margin-bottom: 24px;
    }

    .mb32 {
      margin-bottom: 32px;
    }

    .mb40 {
      margin-bottom: 40px;
    }

    .mb48 {
      margin-bottom: 48px;
    }

    .mb64 {
      margin-bottom: 64px;
    }

    .tac {
      text-align: center;
    }

    .w100 {
      width: 100%;
    }

    .shadow {
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.15) !important;
    }

    .bg-light {
      background-color: #151c2b !important;
    }

    .br4 {
      border-radius: 4px;
    }

    .br8 {
      border-radius: 8px;
    }
    .br50 {
      border-radius: 50%;
    }
    .wh36 {
      height: 36px;
      width: 36px;
    }

    .text-muted {
      color: #8492a6 !important;
    }
    .text-center {
      text-align: center;
    }
    .text-end {
      text-align: end;
    }
    .small {
      font-size: smaller;
    }

    .card {
      color: var(--md-sys-color-on-primary);
    }

    footer {
      margin-top: 48px;
    }

    /* Hero & Homepage Sections */
    .hero-section {
      padding: 3.5rem 1rem 4.5rem;
      position: relative;
      overflow: hidden;
    }

    @media (min-width: 640px) {
      .hero-section {
        padding: 5.5rem 1.5rem 6rem;
      }
    }

    .features-section {
      padding: 5rem 1rem 7rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    }

    @media (min-width: 640px) {
      .features-section {
        padding: 6.5rem 1.5rem 8rem;
      }
    }

    .social-highlights-section {
      padding: 5rem 1rem 6rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    }

    @media (min-width: 640px) {
      .social-highlights-section {
        padding: 6.5rem 1.5rem 7.5rem;
      }
    }

    .gchat-section {
      padding: 5rem 1rem 6rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    }

    @media (min-width: 640px) {
      .gchat-section {
        padding: 6.5rem 1.5rem 7.5rem;
      }
    }

    .pricing-section {
      padding: 5rem 1rem 6rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
      text-align: center;
    }

    @media (min-width: 640px) {
      .pricing-section {
        padding: 6rem 1.5rem 7rem;
      }
    }

    .testimonials-section {
      padding: 5rem 1rem 6rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    }

    @media (min-width: 640px) {
      .testimonials-section {
        padding: 6.5rem 1.5rem 7.5rem;
      }
    }

    .cta-section {
      padding: 5rem 1rem 6rem;
      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
      text-align: center;
    }

    @media (min-width: 640px) {
      .cta-section {
        padding: 6rem 1.5rem 7rem;
      }
    }

    /* Hero Badge */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.2;
      border-radius: 9999px;
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.3);
      margin-bottom: 2rem;
      white-space: nowrap;
    }

    :root.dark .hero-badge,
    :root[data-theme='dark'] .hero-badge,
    .dark .hero-badge {
      background: rgba(16, 185, 129, 0.18);
      color: #34d399;
      border-color: rgba(16, 185, 129, 0.4);
    }

    /* Feature Section Layout */
    .features-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .features-header {
      text-align: center;
      margin-bottom: 5rem;
    }

    .feature-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      margin-bottom: 6rem;
    }

    .feature-row:last-child {
      margin-bottom: 0;
    }

    .feature-col-text {
      width: 100%;
      box-sizing: border-box;
    }

    .feature-col-media {
      width: 100%;
      box-sizing: border-box;
    }

    @media (min-width: 1024px) {
      .feature-row {
        flex-direction: row;
        gap: 5rem;
        margin-bottom: 8rem;
      }

      .feature-row.reverse {
        flex-direction: row-reverse;
      }

      .feature-col-text {
        flex: 1 1 50%;
        width: 50%;
      }

      .feature-col-media {
        flex: 1 1 50%;
        width: 50%;
      }
    }

    /* Feature Badges */
    .feature-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 1.1rem;
      font-size: 0.825rem;
      font-weight: 700;
      border-radius: 9999px;
      margin-bottom: 1.25rem;
      white-space: nowrap;
    }

    .feature-badge.primary {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .feature-badge.emerald {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    :root.dark .feature-badge.primary,
    :root[data-theme='dark'] .feature-badge.primary,
    .dark .feature-badge.primary,
    :root.dark .feature-badge.emerald,
    :root[data-theme='dark'] .feature-badge.emerald,
    .dark .feature-badge.emerald {
      background: rgba(16, 185, 129, 0.18);
      color: #34d399;
      border-color: rgba(16, 185, 129, 0.4);
    }

    .feature-badge.accent {
      background: rgba(217, 119, 6, 0.12);
      color: #d97706;
      border: 1px solid rgba(217, 119, 6, 0.3);
    }

    :root.dark .feature-badge.accent,
    :root[data-theme='dark'] .feature-badge.accent,
    .dark .feature-badge.accent {
      background: rgba(245, 158, 11, 0.18);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, 0.4);
    }

    .feature-badge.secondary {
      background: rgba(99, 102, 241, 0.12);
      color: #6366f1;
      border: 1px solid rgba(99, 102, 241, 0.3);
    }

    :root.dark .feature-badge.secondary,
    :root[data-theme='dark'] .feature-badge.secondary,
    .dark .feature-badge.secondary {
      background: rgba(99, 102, 241, 0.18);
      color: #a5b4fc;
      border-color: rgba(99, 102, 241, 0.4);
    }

    /* Feature Headings & Text */
    .feature-heading {
      font-size: 1.875rem;
      line-height: 1.25;
      font-weight: 800;
      color: var(--md-sys-color-on-surface, #0f172a) !important;
      margin: 0 0 1.25rem 0;
      letter-spacing: -0.025em;
    }

    @media (min-width: 640px) {
      .feature-heading {
        font-size: 2.25rem;
      }
    }

    .feature-description {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--md-sys-color-on-surface-variant, #475569) !important;
      margin: 0 0 1.75rem 0;
    }

    /* Feature Check List */
    .feature-checklist {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .feature-checklist-item {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--md-sys-color-on-surface, #0f172a) !important;
    }

    .feature-check-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 9999px;
      font-size: 0.85rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .feature-check-icon.primary {
      background: rgba(16, 185, 129, 0.18);
      color: #059669;
    }

    :root.dark .feature-check-icon.primary,
    :root[data-theme='dark'] .feature-check-icon.primary,
    .dark .feature-check-icon.primary {
      background: rgba(16, 185, 129, 0.25);
      color: #34d399;
    }

    .feature-check-icon.accent {
      background: rgba(217, 119, 6, 0.18);
      color: #d97706;
    }

    :root.dark .feature-check-icon.accent,
    :root[data-theme='dark'] .feature-check-icon.accent,
    .dark .feature-check-icon.accent {
      background: rgba(245, 158, 11, 0.25);
      color: #fbbf24;
    }

    /* Feature Media Card */
    .feature-media-frame {
      position: relative;
      background: var(--md-sys-color-surface-container, #ffffff);
      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
      border-radius: 1.25rem;
      padding: 0.5rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    :root.dark .feature-media-frame,
    :root[data-theme='dark'] .feature-media-frame,
    .dark .feature-media-frame {
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    }

    /* Dark mode text accents */
    :root.dark .text-emerald-600,
    :root[data-theme='dark'] .text-emerald-600,
    .dark .text-emerald-600 {
      color: #34d399 !important;
    }

    :root.dark .text-amber-600,
    :root[data-theme='dark'] .text-amber-600,
    .dark .text-amber-600 {
      color: #fbbf24 !important;
    }

    .text-amber-400,
    .star-rating {
      color: #fbbf24 !important;
      font-size: 1.15rem;
      letter-spacing: 2px;
    }

    .bg-amber-500 {
      background-color: #f59e0b !important;
    }

    .text-white {
      color: #ffffff !important;
    }

    .feature-media-frame:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.12), 0 12px 14px -6px rgba(0, 0, 0, 0.08);
    }

    .feature-media-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0.85rem;
      object-fit: cover;
    }

    /* Testimonial Cards Layout */
    .testimonials-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 768px) {
      .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
      }
    }

    
.display-medium {
  font-weight: 400;
  font-size: 45px;
  line-height: 52px;
}

.headline-small {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}
.headline-medium {
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
}

  .title-medium {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.15px;
    line-height: 24px;
  }

  .title-large {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 28px;
  }