* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
  --h1 : clamp(30px, 5.7vw, 85px);
  --h2: clamp(26px, 4.8vw, 72px);
}

body {
    font-family: Roboto, sans-serif;
    background: #0a0b1e;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.zwc-header p,.performance-section p,.highlight-card p {
  font-size: clamp(17px, 1.3vw, 19px);
  max-width: 880px;
  color: #EBEBEB;
}
.performance-section p {
  color:#333;
  max-width: 835px;
}
.highlight-card p {
  color:#333;
}
.performance-section h2 {
  color:#010101;
}

/* zwc-header Section */
.zwc-header {
    text-align: center;
    padding: 80px 20px;
    background: #000;
    color:#fff;
}

.logo {
    font-size: 48px;
    margin-bottom: 40px;
    font-weight: 300;
}

.main-title {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.2;

}
.purple {
  background: linear-gradient(to right, #f0f, #8000ff, #0080ff);
-webkit-background-clip: text;
color: transparent;

}

/* .main-title .purple {
    color: #b45aff;
}

.main-title .blue {
    color: #4a9eff;
} */

.description {
    font-size: 14px;
    color: #b8b9d1;
    max-width: 600px;
    margin: 0 auto 50px;
    line-height: 1.8;
}
.main-title {
  font-size:var(--h1) ;

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

/* Feature Icons */
.features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.feature-item {
    text-align: center;
    flex: 0 0 auto;
}

.feature-icon {
    width: 155px;
    height:155px;
    background: #FFF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 36px;
    /* transition: transform 0.3s ease; */
}
.feature-icon div {
  width: 75px;
  height:75px;
  background-image: url(/sites/zweb/images/zoho_general_pages/zia-llm-icons.svg);
  background-size: cover;
}
.feature-icon .zwc-icon2 {
  background-position: -81px 13px;
  width: 80px;
}
.feature-icon .zwc-icon3 {
  background-position: -169px 0;
}
.feature-icon .zwc-icon4 {
  background-position: -248px 10px;
}

.feature-item:hover .feature-icon {
    /* transform: translateY(-5px); */
}

.feature-label {
  font-size: clamp(20px, 1.6vw, 24px);
    /* font-size: 13px; */
    /* color: #b8b9d1; */
}

.zwc-header .coming-soon {
    display: inline-block;
    /* background: #b45aff; */
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    /* text-decoration: none; */
    font-weight: 600;
    font-size: 18px;
    /* transition: background 0.3s ease; */
}

/* .coming-soon:hover {
    background: #9b4ae5;
} */

/* Performance Section */
.performance-section {
    padding: 80px 20px;
    text-align: center;
    background: #fff;
    color:#000;
  
}

.performance-section h2 {

}
.section-title {
    /* font-size: 42px; */
    font-weight: 600;
    margin-bottom: 20px;
}

.performance-description {
    font-size: 14px;
    /* color: #b8b9d1; */
    max-width: 600px;
    margin: 0 auto 50px;
}

.chart-container {
    /* max-width: 800px;
    margin: 0 auto;
    background: #1a1b3a;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(180, 90, 255, 0.1); */
}
.chart-container img {
  max-width: 1100px;
  width:95%;
}

.chart {
    height: 400px;
    position: relative;
    background: #0a0b1e;
    border-radius: 10px;
    padding: 20px;
}

/* How it Works Section */
.how-it-works {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(180deg, #0a0b1e 0%, #1a1b3a 100%);
}

.workflow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.workflow-item {
    background: white;
    color: #1a1b3a;
    padding: 20px 40px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 14px;
}

.workflow-arrow {
    color: #b45aff;
    font-size: 24px;
}

.workflow-item.gradient {
    background: linear-gradient(135deg, #b45aff 0%, #4a9eff 100%);
    color: white;
}

/* Highlights Section */
.highlights {
    padding: 80px 20px;
    background: #F8F9FB;
    color:#000;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    max-width: 1490px;
    /* padding:80px; */
}

.highlight-card {
    /* background: #1a1b3a; */
    padding: 40px 30px;
    /* border-radius: 20px; */
    position: relative;
    /* transition: transform 0.3s ease; */
}

.highlight-card:hover {
    /* transform: translateY(-5px); */
}

.highlight-icon {
  width: 43px;
height: 46px;
background-image: url(/sites/zweb/images/zoho_general_pages/zia-llm-icons.svg);
background-size: 360px;
background-position: -317px 0;
/* background: linear-gradient(135deg, #b45aff 0%, #4a9eff 100%); */
/* border-radius: 15px; */
display: flex
;
align-items: center;
justify-content: center;
margin-bottom: 20px;
/* font-size: 24px;
}

.feature-label {
    /* font-size: 18px; */
    font-weight: 600;
    margin-bottom: 10px;
}

.highlight-description {
    font-size: 14px;
    /* color: #b8b9d1; */
    line-height: 1.6;
}

/* Responsive */
@media (min-width: 1280px) {
  .main-title {
    line-height: 90px; 
    letter-spacing: -4.25px;
  }
  .section-title {
  line-height: 80px; 
  letter-spacing: -1px;
  }

  .zwc-header p,.performance-section p,.highlight-card p {
    line-height: 35px; 
    letter-spacing: -0.19px;
  }
}
@media (max-width: 768px) {
    .main-title {
        font-size: 36px;
    }

    .section-title {
      color: #010101;
        /* font-size: 32px; */
    }

    .features {
        gap: 20px;
    }

    .workflow {
        flex-direction: column;
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

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

/* Chart Animation */
.chart-bar {
    display: inline-block;
    width: 40px;
    margin: 0 5px;
    vertical-align: bottom;
    background: linear-gradient(180deg, #b45aff 0%, #4a9eff 100%);
    border-radius: 5px 5px 0 0;
    animation: growBar 1s ease-out forwards;
    opacity: 0;
}

@keyframes growBar {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
h1::before {
content: "";
display: block;
width: 80px;
height: 80px;
margin-bottom: 30px;
background: url(/sites/zweb/images/zoho_general_pages/zia-icon.png) 0% 0% / 85px no-repeat;
margin-inline: auto;
}
.zwc-header .coming-soon {
font-weight:600px;
background: linear-gradient(to right, #f0f, #8000ff, #0080ff);
-webkit-background-clip: text;
color: transparent;
display: block;
}
.zwc-block2 .section-title {
   text-align: center;
}
.zwc-block2 {
    padding: 80px 20px;
}
.zwc-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.zwc-icons-grid {
    max-width: 1060px;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  margin-top:50px;
}
.zwc-icons-grid li {
    text-align: center;
}
.zwc-proIcon-box {
    width: 190px;
    height: 190px;
    background-color: #eceff4;
    border-radius: 25px;
    justify-content: center;
    margin-bottom: 40px;
}
.zwc-icons-grid p {
    font-size: clamp(19px, 1.6vw, 24px);
    font-family: var(--zf-primary-medium);
color:#fff;
}