:root{
      --max-width: 1400px;
      --accent: #2f67ff;
      --muted: #6b6b6b;
      --bg: #ffffff;
      --card-shadow: 0 12px 30px rgba(20,30,60,0.08);
    }

    /* Reset-ish */
/*     *{box-sizing:border-box;margin:0;padding:0} */
/*     body{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--bg);
      color:#111;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding:30px 16px;
    } */

    .wrapper-heading{
      max-width:var(--max-width);
      margin:0 auto;
    }

    /* TOP SECTION */
    .intro {
      text-align:center;
      padding:28px 16px;
    }
    .intro h2{
      font-size:clamp(22px, 4.2vw, 3rem);
      line-height:1.05;
      font-weight:700;
      margin-bottom:10px;
      color:#3C3C3C;
    }
.intro h2 span{
display: block;
  background: linear-gradient(90deg, #3384FF, #1E40AF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;

}

/*     .intro h2 .accent{
      color:var(--accent);
      display:inline-block;
      margin-left:6px;
    } */
    .intro p{
      max-width:800px;
      margin:0 auto;
      color:#505050;
      font-size:clamp(14px, 1.6vw, 20px);
    }
.intro h2 img{
height:30px;
  width:30px;

}

    /* IMAGE STAGE (second main block) */
    .image-stage{
      margin-top:30px;
      position:relative;
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      padding:18px;
    }

    /* container that keeps images centered and controls height */
    .image-frame{
   width: 100%;
    max-width: 1400px;
    aspect-ratio: 16 / 9;
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    }

    /* Individual image wrappers to help styles & responsiveness */
    .img-central,
    .img-left,
    .img-right{
      position:absolute;
      display:block;
/*       transition: transform .32s ease, box-shadow .32s ease; */
/*       border-radius:14px; */
      overflow:hidden;
/*       background:linear-gradient(180deg,#fff,#fafafa); */
/*       box-shadow: var(--card-shadow); */
    }

    /* CENTER DASHBOARD image (base) */
    .img-central{
      width: 80%;
    height: 100%;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    }
    .img-central img{
      width:100%;
      height:100%;
      display:block;
      object-fit:fit;
    }

    /* LEFT small box overlapping from bottom-left */
    .img-left{
      width: 40%;
    height: 40%;
    z-index: 4;
    left: 0%;
    bottom: 7%;
      transform: translateY(12%); /* slight lift so it sits overlapping bottom-left */
/*       border-radius:12px; */
/*       border:3px solid rgba(255,255,255,0.6); subtle white border */
    }
    .img-left img{ width:100%; height:100%; object-fit:fit; display:block; }

    /* RIGHT mobile image overlapping from top-right */
    .img-right{
      width: 22%;
    height: 64%;
    z-index: 6;
    right: 5%;
    top: -8%;
    transform: translate(6%, -6%);
    /* border-radius: 20px; */
    /* background: linear-gradient(180deg, #fff, #f7faff);
/*       border-radius:20px; */
/*       background:linear-gradient(180deg,#fff,#f7faff); */
    }
    .img-right img{ width:100%; height:100%; object-fit:cover; display:block; }

    /* Hover/active-ish micro interactions on wider screens */
    @media(min-width:900px){
/*       .image-frame:hover .img-central{ transform: translate(-50%,-50%) scale(1.01); }
      .image-frame:hover .img-left{ transform: translateY(4%) scale(1.02); }
      .image-frame:hover .img-right{ transform: translate(4%,-4%) scale(1.03); } */
    }

    /* RESPONSIVE ADJUSTMENTS */
    /* Medium screens: reduce overlaps & sizes */
    @media (max-width:1100px){
      .img-central{ width:78%; height:76%; }
      .img-left{ width:26%; height:36%; left:6%; bottom:2%; transform: translateY(8%); }
      .img-right{ width:22%; height:48%; right:4%; top:4%; transform: translate(4%,-4%); }
    }

    /* Small screens: stack vertically and keep overlaps subtle */
    @media (max-width:700px){
/*       body{ padding:18px 12px; } */
      .intro{ padding:18px 8px; }
      .image-frame{ aspect-ratio:unset; height:auto; padding-bottom:12px; }

      /* Make central full width and not too tall */
      .img-central{
        position:relative;
        width:100%;
        height:auto;
        left:50%;
        top:0;
        transform:translateX(-50%);
        border-radius:12px;
      }
      .img-central img{ height:auto; }

      /* Left box become a small card overlapping bottom-left corner of central */
      .img-left{
        display:none;
/*         position:absolute;
        width:36%;
        height:auto;
        left:6%;
        bottom:-12%;
        transform:none;
        z-index:5;
        border-radius:10px; */
      }
      .img-left img{ height:auto; display:block; }

      /* Right mobile image will move to top-right corner of the section (smaller) */
      .img-right{
        display:none;
/*         position:absolute;
        width:26%;
        height:auto;
        right:6%;
        top:-8%;
        transform:none;
        z-index:6;
        border-radius:14px; */
      }

      /* reduce shadows on tiny screens */
      .img-central, .img-left, .img-right { box-shadow: 0 8px 20px rgba(20,30,60,0.06); }
    }

    /* Very small phones: scale down overlay cards to avoid overflow */
    @media (max-width:420px){
      .img-left{ 
/*         width:40%; left:4%; bottom:-10%;  */
        display:none;
      }
      .img-right{
        display:none;
/*         width:30%; right:4%; top:-6%;  */
      }
      .img-central{ border-radius:10px; }
    }