/* ==========================================
   Design Tokens (from Figma)
   ========================================== */
  :root {
    --color-primary: #E9142B;
    --color-primary-hover: #DE0920;

    --text-dark: #000;
    --text-body: #444;
    --text-muted: #454545;
    --text-light: #FFF;

    --bg-page: #FFF;
    --bg-feature-overview: #f5f5fc;
    --bg-deep-dive: #f2fffc;

    --border-card: #edf0f2;
    --border-card-security: #ebedf2;
    --border-connector: #e0e3e8;
    --border-slide: #e5e8ed;

    --shadow-card: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);

    --radius-sm: 6px;
    --radius-card: 12px;
    --radius-slide: 8px;

    --font-family: 'Zoho Puvi', 'ZohoPuvi', sans-serif;

    /* Typography Scale */
    --h1-size: 48px;
    --h1-weight: 600;
    --h2-size: 36px;
    --h2-weight: 600;
    --h3-size: 26px;
    --h3-weight: 500;
    --h4-size: 20px;
    --h4-weight: 500;
    --p-size: 17px;
    --p-weight: 400;
  }

  /* ==========================================
   Global Reset
   ========================================== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-body);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }

  button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }
h4,p {
    margin: 0px;
}

  /* ==========================================
   Layout
   ========================================== */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }

  .section {
    padding: 80px 40px;
  }

  .section__title {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: normal;
    color: var(--text-dark);
    text-align: center;
    letter-spacing: 0.5px;
  }

  .section__body {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: var(--text-body);
    text-align: center;
    letter-spacing: 0.1px;
  }

  /* ==========================================
   Buttons
   ========================================== */
  .btn {
    display: inline-block;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--h3-weight);
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 14px 25px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .btn--primary {
    background: var(--color-primary);
    color: var(--text-light);
    border: none;
  }

  .btn--primary:hover {
    background: var(--color-primary-hover);
    text-decoration: none;
  }

  /* CTA Links */
  .cta-link {
    display: block;
    font-size: 16px;
    font-weight: var(--h4-weight);
    color: var(--text-dark);
    text-decoration: underline;
    text-align: center;
    margin-top: 40px;
    letter-spacing: 0.1px;
    line-height: 20px;
    transition: opacity 0.3s;
  }

  .cta-link:hover {
    opacity: 0.7;
    text-decoration: underline;
  }

  .cta-link--dark {
    color: var(--text-dark);
    margin-top: 0;
  }

  /* ==========================================
   Section 1: Hero
   ========================================== */
  .section--hero {
    background-color: #e4f3fc;
    background-image: url('https://www.manageengine.com/products/desktop-central/./images/mcp-bg.svg'), linear-gradient(135deg, #cce8f8 0%, #d4edfb 30%, #ddf2fd 60%, #e4f3fc 100%);
    background-size: cover, cover;
    background-position: center top, center;
    background-repeat: no-repeat, no-repeat;
    padding: 80px 40px 120px;
    text-align: center;
  }

  .hero__content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .hero__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 1100px;
    max-width: 100%;
    text-align: center;
  }

  .hero__title {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: normal;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    text-align: center;
  }

  .hero__subtitle {
    font-size: var(--h4-size);
    font-weight: var(--p-weight);
    line-height: 28px;
    color: var(--text-body);
    text-align: center;
  }

  .hero__bullets {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero__bullet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    letter-spacing: 0.1px;
    line-height: 20px;
    background: #f7f9ff;
    border: 1px solid #e0e7f4;
    border-radius: 100px;
    padding: 8px 16px 8px 14px;
  }

  .hero__bullet-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  /* ==========================================
   Section 2: Value Proposition
   ========================================== */
  .section--value-prop {
    background: var(--bg-page);
    text-align: center;
  }

  .value-prop__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .value-prop__inner .section__title {
    width: 1000px;
    max-width: 100%;
  }

  .value-prop__inner .section__body {
    width: 900px;
    max-width: 100%;
  }

  .value-prop__diagram {
    margin-top: 16px;
    width: 100%;
    max-width: 920px;
  }

  .value-prop__diagram-img {
    width: 100%;
    height: auto;
  }

  /* ==========================================
   Section 3: Feature Overview
   ========================================== */
  .section--feature-overview {
    background: var(--bg-feature-overview);
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
  }

  .feature-card {
    background: var(--bg-page);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .feature-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .feature-card__icon img {
    width: 48px;
    height: 48px;
  }

  .feature-card__title {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: normal;
    color: var(--text-body);
     margin: 0px;
  }

  .feature-card__body {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: var(--text-body);
    letter-spacing: 0.1px;
    margin: 0px;
  }

  /* ==========================================
   Section 4: How It Works
   ========================================== */
  .section--how-it-works {
    background: var(--bg-page);
  }

  .how-it-works__layout {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
  }

  .how-it-works__visual {
    flex-shrink: 0;
    width: 400px;
    height: 545px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-slide);
    overflow: hidden;
  }

  .how-it-works__img {
    width: 100%;
    height: auto;
  }

  .timeline {
    display: flex;
    flex-direction: column;
  }

  .timeline__step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .timeline__marker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    align-self: stretch;
  }

  .timeline__marker {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--p-size);
    font-weight: var(--h4-weight);
    line-height: 27.2px;
    letter-spacing: 0.1px;
    flex-shrink: 0;
  }

  .timeline__marker--blue {
    background: #f5faff;
    color: #0a57c4;
  }

  .timeline__marker--violet {
    background: #f5f5fc;
    color: #6b54bf;
  }

  .timeline__marker--green {
    background: #f5fcf5;
    color: #4d994d;
  }

  .timeline__marker--orange {
    background: #fcf5f5;
    color: #c63;
  }

  .timeline__connector {
    width: 2px;
    flex: 1;
    min-height: 8px;
    background: var(--border-connector);
    border-radius: 1px;
  }

  .timeline__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 20px;
    width: 400px;
    overflow: hidden;
  }

  .timeline__step:last-child .timeline__content {
    padding-bottom: 0;
  }

  .timeline__title {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: normal;
    color: var(--text-body);
    letter-spacing: 0.1px;
  }

  .timeline__body {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: var(--text-body);
    letter-spacing: 0.1px;
    width: 380px;
    max-width: 100%;
  }

  .section--how-it-works .cta-link {
    margin-top: 40px;
  }

  /* ==========================================
   Section 5: Feature Deep-Dive
   ========================================== */
  .section--deep-dive {
    background: var(--bg-deep-dive);
  }

  .deep-dive__rows {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 24px;
    margin-top: 40px;
  }

  .deep-dive__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
  }

  .deep-dive__text {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 35%;
    min-width: 250px;
    flex-shrink: 0;
  }

  .deep-dive__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .deep-dive__icon img {
    width: 48px;
    height: 48px;
  }

  .deep-dive__desc {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .deep-dive__title {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: normal;
    color: var(--text-dark);
  }

  .deep-dive__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 15px;
  }

  .deep-dive__item {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s;
  }

  .deep-dive__bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: #aaa;
    flex-shrink: 0;
    transition: background 0.3s;
  }

  .deep-dive__item-text {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: #000 !important;
    flex: 1;
    transition: color 0.3s;
  }

  .deep-dive__item--active .deep-dive__bar {
    background: #4d994d;
  }

  .deep-dive__item--active .deep-dive__item-text {
    color: var(--text-muted);
  }

  .deep-dive__visual {
    width: 60%;
    aspect-ratio: 712 / 358;
    flex-shrink: 0;
    background: #faf9f6;
    border: 1px solid var(--border-slide);
    border-radius: var(--radius-slide);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: relative;
  }

  .deep-dive__dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .deep-dive__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }

  .deep-dive__dot:hover {
    background: rgb(225 245 238);
  }

  .deep-dive__dot--active {
        background: #0f6e56;
    border-color: #0f6e56;
    transform: scale(1.08);
  }


  .deep-dive__slide {
    display: none;
    width: 100%;
    height: 100%;
  }

  .deep-dive__slide--active {
    display: block;
  }

  .deep-dive__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .section--deep-dive .cta-link {
    margin-top: 40px;
  }

  /* ==========================================
   Section 6: Security
   ========================================== */
  .section--security {
    background: var(--bg-page);
  }

  .security__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .security__header .section__title {
    width: 1000px;
    max-width: 100%;
  }

  .security__header .section__body {
    width: 800px;
    max-width: 100%;
  }

  .security-grid {
    display: flex;
    gap: 24px;
    margin-top: 40px;
  }

  .security-card {
    flex: 1;
    background: var(--bg-page);
    border-radius: var(--radius-card);
    padding: 28px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-card-security);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .security-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .security-card__icon img {
    width: 48px;
    height: 48px;
  }

  .security-card__title {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: normal;
    color: var(--text-body);
    margin: 0px;
  }

  .security-card__body {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: var(--text-body);
    letter-spacing: 0.1px;
    margin: 0px;
  }

  /* ==========================================
   Section 7: Closing CTA
   ========================================== */
  .section--closing {
    background-color: #e4f3fc;
    background-image: url('https://www.manageengine.com/products/desktop-central/./images/mcp-bg.svg'), linear-gradient(135deg, #cce8f8 0%, #d4edfb 30%, #ddf2fd 60%, #e4f3fc 100%);
    background-size: cover, cover;
    background-position: center top, center;
    background-repeat: no-repeat, no-repeat;
    text-align: center;
    padding: 120px 40px 60px;
  }

  .closing__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .closing__title {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: normal;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    text-align: center;
    width: 1085px;
    max-width: 100%;
  }

  .closing__body {
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: 27.2px;
    color: var(--text-body);
    letter-spacing: 0.1px;
    text-align: center;
  }

  /* ==========================================
   Scroll Reveal Animation
   ========================================== */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }

  .reveal--visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ==========================================
   Responsive
   ========================================== */
  @media (max-width: 1024px) {
    .how-it-works__layout {
      flex-direction: column;
      gap: 40px;
    }

    .how-it-works__visual {
      width: 100%;
      max-width: 400px;
      height: auto;
    }

    .timeline {
      width: 100%;
      max-width: 500px;
    }

    .timeline__content {
      width: auto;
      flex: 1;
    }

    .timeline__body {
      width: 100%;
    }

    .deep-dive__row,
    .deep-dive__row--reversed {
      flex-direction: column;
      gap: 40px;
    }

    .deep-dive__visual {
      width: 100%;
      height: auto;
      aspect-ratio: 712 / 358;
    }

    .deep-dive__text {
      width: 100%;
      min-width: 0;
    }

    .deep-dive__dots {
      bottom: 10px;
    }

    .hero__header {
      width: 100%;
    }
  }

  @media (max-width: 760px) {
    .section {
      padding: 60px 20px;
    }

    .hero__title {
      font-size: var(--h2-size);
    }

    .hero__subtitle {
      font-size: 18px;
      width: 100%;
    }

    .hero__subtitle br {
      display: none;
    }

    .hero__title br {
      display: none;
    }

    .section--hero {
      padding: 80px 20px 60px;
    }

    .hero__bullets {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .section__title {
      font-size: 28px;
    }

    .section__title br {
      display: none;
    }

    .closing__title {
      font-size: 30px;
      width: 100%;
    }

    .feature-grid {
      grid-template-columns: 1fr;
    }

    .security-grid {
      flex-direction: column;
    }

    .value-prop__inner .section__title,
    .value-prop__inner .section__body {
      width: 100%;
    }

    .security__header .section__title,
    .security__header .section__body {
      width: 100%;
    }

    .deep-dive__rows {
      padding: 0;
    }

    .deep-dive__visual {
      width: 100%;
      height: auto;
      aspect-ratio: 712 / 358;
    }

    .deep-dive__dots {
      bottom: 8px;
      gap: 8px;
      padding: 7px 9px;
    }

    .deep-dive__dot {
      width: 9px;
      height: 9px;
    }
  }

  section.section.section--hero::after,
  .section--feature-overview::after,
  .section--deep-dive::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    /* adjust as needed */

    /* Gradient: top = parent bg (transparent), bottom = #fff */
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%);
    pointer-events: none;
    /* allow clicks through */
  }

  section.section {
    position: relative;
  }

  .section--feature-overview::before,
  .section--deep-dive::before,
  .section--closing::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    pointer-events: none;
  }

  .sec-pTB.mbH,
  div#scroll,
  section#customers,
  .btmBar.min-mbH,
  .heading-menu {
    display: none;
  }
button.deep-dive__item {
    position: relative;
cursor: default;
}

button.deep-dive__item::before {
    content: '';
    background: #dfdede;
    height: 28px;
    width: 4px;
    position: absolute;
    top: 0px;
    left: -14px;
    border-radius: 2px;
}

button.deep-dive__item.deep-dive__item--active::before {
    background: #0d9488;
}
button.deep-dive__item::before {
    content: '';
    position: absolute;
    top: 0px;
    left: -14px;
    border-radius: 3px;
    height: 6px;
    width: 6px;
    bottom: 0px;
    margin: auto;
    background: #000 !important;
}