/*
  App Modernization service page (app-modernization.php) — scoped
  redesign. Every rule is prefixed with .app-modernization-page so
  nothing here leaks onto the sibling service pages (consulting-services.php,
  saas-platform-development.php, digital-transformation.php, additional-services.php)
  that share the exact same .solution-box / .expertise-box / .benefit-box /
  .step-item / .service-bg / #myHeader markup and CSS classes, defined in
  assets/css/main.css.

  Adapted directly from assets/css/digital-transformation-page.css (the
  ground-truth pattern for this design language). Card counts differ on this
  page (5 solution-box / 9 expertise-box / 9 benefit-box / 8 step-item), so
  the expertise grid uses 3 columns here (3 clean rows of 9) instead of 4.
*/

.app-modernization-page{--amx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

/* ---------------------------------------------------------------------- */
/* 1) Hero — richer gradient, faint diagonal signal-line texture, eyebrow  */
/*    badge, pulsing status dot.                                          */
/* ---------------------------------------------------------------------- */
/* !important is required here: the hero markup carries an inline
   `style="background: rgba(0,0,0,.7)"` on this element, which otherwise
   always wins over any external stylesheet rule regardless of selector
   specificity. */
.app-modernization-page .main-video-section .video-overlay-main{
  background: linear-gradient(125deg, rgba(8,14,28,.88) 0%, rgba(24,88,202,.60) 55%, rgba(8,14,28,.84) 100%) !important;
  position: absolute;
}
.app-modernization-page .main-video-section .video-overlay-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  opacity:.6;
}
.app-modernization-page .main-video-section .container{position:relative;z-index:1;}
.app-modernization-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family: var(--amx-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.app-modernization-page .hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4A8AFE;
  box-shadow:0 0 0 4px rgba(74,138,254,.3);
  animation: amxPulse 2.2s ease-in-out infinite;
}
@keyframes amxPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.app-modernization-page .main-video-section .section-content .title{text-shadow:0 2px 20px rgba(0,0,0,.3);}

/* ---------------------------------------------------------------------- */
/* 2) Sticky sub-nav — glass bar + a real sliding indicator driven by the  */
/*    IntersectionObserver scrollspy added in the page's inline script     */
/*    (previously the "active" class was hard-coded on the first item and */
/*    never updated on scroll).                                            */
/* ---------------------------------------------------------------------- */
.app-modernization-page .single-header-main{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16,24,40,.06);
}
.app-modernization-page .single-header-main.sticky{background: rgba(255,255,255,.86);}
.app-modernization-page .single-header-main .container{position:relative;}
.app-modernization-page .main-menu .menu-item .menu-link{font-weight:600;}
.app-modernization-page .main-menu .menu-item .menu-link::after{display:none;}
.app-modernization-page .menu-indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:2.5px;
  width:0;
  border-radius:3px 3px 0 0;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
  transition: transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  opacity:0;
}
.app-modernization-page .menu-indicator.is-ready{opacity:1;}

/* ---------------------------------------------------------------------- */
/* 3) "Why Choose" grid — 5 cards (odd count) reflowed as a CSS grid so    */
/*    the 5th ("Innovation", carries .border-bottom-0 with no matching     */
/*    partner) can be promoted to a full-width closing card instead of    */
/*    sitting alone in a half-empty row.                                  */
/*                                                                          */
/*    GOTCHA: the row is a Bootstrap `.row.mt-5.g-0` flex container with  */
/*    `.col-lg-6` children. Switching the row to `display:grid` does NOT  */
/*    remove the children's flex-basis/width rules on its own — those     */
/*    still come from Bootstrap's `.col-lg-6{flex:0 0 auto;width:50%}`    */
/*    and, unlike flexbox, a grid item's sizing is controlled by the      */
/*    grid track, not the item's own width/flex properties, so in practice*/
/*    this is harmless — but padding/max-width from the column classes    */
/*    DO still apply and must be zeroed out explicitly below.             */
/*                                                                          */
/*    Note: this page's solution-box icon <img> tags carry an extra       */
/*    width="50" HTML attribute; the CSS max-width rule below still wins. */
/* ---------------------------------------------------------------------- */
.app-modernization-page .solution-section-main{background:var(--vtc-bg-main-bg-9);}
.app-modernization-page .solution-section-main .row.mt-5.g-0{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.app-modernization-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]{
  width:auto;max-width:none;padding:0;
}
.app-modernization-page .solution-box{
  border:1px solid var(--vtc-border-border-1) !important;
  border-radius:16px;
  background:#fff;
  padding:32px 28px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.app-modernization-page .solution-box:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(24,88,202,.28);
  border-color: transparent !important;
}
.app-modernization-page .solution-box .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;height:58px;
  border-radius:14px;
  background: var(--vtc-bg-main-bg-6);
  transition: background-color .3s ease, transform .3s ease;
}
.app-modernization-page .solution-box .icon img{max-width:28px;max-height:28px;width:28px;}
.app-modernization-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);transform: scale(1.06);}
.app-modernization-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.app-modernization-page .solution-box .heading2 h3::after{display:none;}

/* 5th card ("Innovation", carries .border-bottom-0) spans both columns    */
/* and switches to a horizontal icon+copy layout — a closing statement     */
/* rather than a 5th item awkwardly alone in the grid.                     */
/* GOTCHA: `grid-column` only affects actual grid ITEMS — the grid items   */
/* here are the `.col-lg-6` wrapper divs, not `.solution-box` (a           */
/* grandchild), so setting it directly on `.solution-box` has NO effect.   */
/* `:has()` targets the wrapper by what it contains instead. */
.app-modernization-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]:has(.solution-box.border-bottom-0){
  grid-column: 1 / -1;
}
.app-modernization-page .solution-box.border-bottom-0{
  display:flex;
  align-items:center;
  gap:28px;
  background: linear-gradient(120deg, var(--vtc-bg-main-blue-1), #fff 60%);
}
.app-modernization-page .solution-box.border-bottom-0 .icon{flex-shrink:0;margin-bottom:0 !important;}
.app-modernization-page .solution-box.border-bottom-0 .heading2{flex:1;}

@media (max-width:767px){
  .app-modernization-page .solution-section-main .row.mt-5.g-0{grid-template-columns:1fr;}
  .app-modernization-page .solution-box.border-bottom-0{flex-direction:column;align-items:flex-start;text-align:left;gap:16px;}
}

/* ---------------------------------------------------------------------- */
/* 4) CTA bands (.service-bg / .mini-section-main) — brand-tinted overlay  */
/*    on the full-bleed photo banners for stronger text contrast, and a   */
/*    restrained top hairline on the lighter .service-bg bands so all     */
/*    CTA moments read as one consistent family rather than each getting  */
/*    its own decoration. This page has three .mini-section-main bands    */
/*    (assessment-main-bg, performance-main-bg, contact-get-started-main- */
/*    bg) and three .service-bg bands — none of them carry an inline      */
/*    background style (unlike the hero), so no !important is needed here.*/
/* ---------------------------------------------------------------------- */
.app-modernization-page .mini-section-main{position:relative;}
.app-modernization-page .mini-section-main::before{
  content:"";position:absolute;inset:0;z-index:0;
  background: linear-gradient(100deg, rgba(6,14,34,.86) 0%, rgba(24,88,202,.48) 60%, rgba(6,14,34,.68) 100%);
}
.app-modernization-page .mini-section-main .section-absolute{z-index:1;}
.app-modernization-page .service-bg{border-top:1px solid rgba(24,88,202,.12);}

/* ---------------------------------------------------------------------- */
/* 5) "Our Expertise" grid — 9 cards, 3-column grid (3 clean rows), each   */
/*    promoted to a real bordered card with a full-width image. The       */
/*    existing box1..box9 colour variety on the icon strip is kept as-is. */
/* ---------------------------------------------------------------------- */
.app-modernization-page .expertise-section .row.g-0{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.app-modernization-page .expertise-section .row.g-0 > [class*="col-"]{width:auto;max-width:none;padding:0;}
.app-modernization-page .expertise-box{
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--vtc-border-border-1);
  border-radius:16px;
  overflow:hidden;
}
.app-modernization-page .expertise-box:hover{box-shadow: 0 20px 44px -20px rgba(24,88,202,.28);}
.app-modernization-page .expertise-box .icon{height:190px;margin-bottom:0;padding:0;}
.app-modernization-page .expertise-box .icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
.app-modernization-page .expertise-box .content{padding:22px 22px 26px;}
.app-modernization-page .expertise-box .content h3{font-size:18px;}
.app-modernization-page .expertise-box .content p{font-size:14px;}

@media (max-width:1199px){
  .app-modernization-page .expertise-section .row.g-0{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:575px){
  .app-modernization-page .expertise-section .row.g-0{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- */
/* 6) "Benefits to Clients" — 9 glass cards on the dark photo band get a   */
/*    CLI-prompt "> " marker and alternate blue/amber left accent for a   */
/*    quiet visual rhythm across the grid (kept subtle — column count and */
/*    the existing glass-card treatment are left untouched).              */
/* ---------------------------------------------------------------------- */
.app-modernization-page .benefit-box h3{position:relative;padding-left:20px;}
.app-modernization-page .benefit-box h3::before{
  content:">";position:absolute;left:0;top:-1px;
  color:#7DAEFF;font-weight:800;
}
/* .benefit-box is the sole child of its `.col-lg-6` wrapper, so the        */
/* alternation has to key off the wrapper's position among its siblings —  */
/* `.benefit-box:nth-child(even)` would never match (it's always the       */
/* wrapper's only/first child, i.e. always odd).                           */
.app-modernization-page .benefits-section .row > div:nth-child(even) .benefit-box{border-left-color: var(--vtc-bg-main-bg-3);}
.app-modernization-page .benefits-section .row > div:nth-child(even) .benefit-box h3::before{color: var(--vtc-bg-main-bg-3);}

/* ---------------------------------------------------------------------- */
/* 7) "Our Process" — left untouched. An earlier pass on the sibling       */
/*    digital-transformation.php page tried to add an "app window" chrome */
/*    frame directly on `.how-we-work-img`, but that class also carries   */
/*    the layout's `padding-right:100px` (main.css) used purely as        */
/*    invisible spacing before the text column — painting a dark          */
/*    background on it turned that spacing into a visible dark rectangle  */
/*    next to every step image. Do not repeat that here. The only safe    */
/*    enhancement is a gradient tint on the active timeline rail.         */
/* ---------------------------------------------------------------------- */
.app-modernization-page .step-item.active::after,
.app-modernization-page .step-item .step-content.active::after,
.app-modernization-page .step-item:has(.step-content.active)::after{
  background: linear-gradient(180deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
}
.app-modernization-page .step-content.active .step-number{transform: scale(1.08);}

/* ---------------------------------------------------------------------- */
/* 8) Reduced motion                                                       */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .app-modernization-page .hero-badge .dot{animation:none;}
  .app-modernization-page .solution-box,
  .app-modernization-page .expertise-box,
  .app-modernization-page .menu-indicator{transition:none;}
  .app-modernization-page .solution-box:hover{transform:none;}
}