.data-hero {
        background: radial-gradient(circle at top left, #0d133a, #384bff);
        color: #fff;
        text-align: center;
        padding: 120px 20px 100px;
        background-image: url("https://img.freepik.com/free-vector/ai-cloud-background-with-connecting-lines_1017-27537.jpg");
        background-size: cover;
        background-position: center;
        position: relative;
      }

      .data-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(6, 10, 38, 0.8);
      }

      .data-hero .container {
        position: relative;
        z-index: 2;
      }

      .data-hero h1 {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 15px;
      }

      .data-hero p {
        color: #d0d8ff;
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto;
      }

      /* ===== About Section ===== */
      .data-about {
        background: #f5f8ff;
        padding: 90px 0;
      }

      .data-about h2 {
        font-weight: 700;
        color: #11183b;
        margin-bottom: 20px;
      }

      .data-about p {
        color: #555;
        line-height: 1.7;
        margin-bottom: 15px;
      }

      .data-about img {
        width: 100%;
        border-radius: 15px;
        box-shadow: 0 12px 30px rgba(56, 75, 255, 0.25);
        transition: 0.4s;
      }

      .data-about img:hover {
        transform: scale(1.05);
      }

      .theme-btn {
        display: inline-block;
        background: #384bff;
        color: #fff;
        padding: 12px 28px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: 0.3s;
      }

      .theme-btn:hover {
        background: #1f2aff;
        transform: translateY(-3px);
      }

      /* ===== Tech Stack Section ===== */
      .ai-tech {
        background: linear-gradient(135deg, #0d133a, #384bff);
        color: #fff;
        padding: 100px 0;
      }

      .ai-tech h2 {
        font-weight: 700;
        font-size: 2.3rem;
        margin-bottom: 15px;
      }

      .ai-tech p {
        color: #d4ddff;
        max-width: 700px;
        margin: 0 auto 50px;
      }

      .ai-card {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        padding: 35px 25px;
        transition: all 0.4s ease;
        backdrop-filter: blur(6px);
        min-height: 230px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
      }

      .ai-card i {
        font-size: 45px;
        color: #ffdf00;
        margin-bottom: 15px;
        transition: 0.3s;
      }

      .ai-card h5 {
        color: #fff;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .ai-card p {
        color: #d1d8ff;
        font-size: 14px;
        line-height: 1.6;
      }

      .ai-card:hover {
        transform: translateY(-10px);
        background: rgba(56, 75, 255, 0.3);
        box-shadow: 0 8px 30px rgba(56, 75, 255, 0.5);
      }

      .ai-card:hover i {
        color: #fff;
        transform: rotate(8deg);
      }