/* =========================================================
   Power Giggs Technologies — Web & App Development page only
   Loaded only by web-app-development.html.
   All selectors are scoped to .web-app-development-page so
   these styles cannot affect alignment or layout elsewhere.
   ========================================================= */

.web-app-development-page .webapp-page-hero{
  padding:72px 0;
  overflow:hidden;
}

.web-app-development-page .webapp-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}

.web-app-development-page .webapp-hero-copy h1{
  max-width:780px;
  margin:22px 0;
  font-size:clamp(3rem,5.5vw,5.2rem);
  line-height:.98;
  letter-spacing:-.055em;
}

.web-app-development-page .webapp-hero-copy h1 span{
  color:#77c8f1;
}

.web-app-development-page .webapp-hero-copy p{
  max-width:680px;
  font-size:1.08rem;
  line-height:1.7;
}

.web-app-development-page .webapp-hero-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  margin-top:26px;
  color:#e8f4fb;
  font-size:.9rem;
  font-weight:750;
}

.web-app-development-page .webapp-hero-highlights span::before{
  content:"✓";
  color:#ff887c;
  font-weight:900;
  margin-right:7px;
}

.web-app-development-page .webapp-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.web-app-development-page .webapp-page-hero .btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.06);
}

.web-app-development-page .webapp-page-hero .btn-outline:hover{
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,.12);
}

.web-app-development-page .webapp-hero-visual{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 28px 70px rgba(2,42,76,.32);
  min-height:430px;
  background:#062e50;
}

.web-app-development-page .webapp-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    135deg,
    rgba(8,105,178,.08),
    transparent 46%,
    rgba(217,61,45,.10)
  );
}

.web-app-development-page .webapp-hero-visual img{
  width:100%;
  height:100%;
  min-height:430px;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:950px){
  .web-app-development-page .webapp-page-hero{
    padding:62px 0;
  }

  .web-app-development-page .webapp-hero-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .web-app-development-page .webapp-hero-copy h1{
    max-width:820px;
  }

  .web-app-development-page .webapp-hero-visual,
  .web-app-development-page .webapp-hero-visual img{
    min-height:380px;
  }
}

@media(max-width:650px){
  .web-app-development-page .webapp-page-hero{
    padding:50px 0;
  }

  .web-app-development-page .webapp-hero-copy h1{
    font-size:clamp(2.7rem,12vw,4rem);
  }

  .web-app-development-page .webapp-hero-highlights{
    display:grid;
    gap:8px;
  }

  .web-app-development-page .webapp-hero-actions{
    align-items:stretch;
  }

  .web-app-development-page .webapp-hero-actions .btn{
    width:100%;
  }

  .web-app-development-page .webapp-hero-visual{
    min-height:285px;
    border-radius:20px;
  }

  .web-app-development-page .webapp-hero-visual img{
    min-height:285px;
  }
}