/*
  SaaS Platform Development service page (saas-platform-development.php) —
  scoped redesign. Every rule is prefixed with .saas-platform-development-page
  so nothing here leaks onto the sibling service pages (consulting-services.php,
  digital-transformation.php, app-modernization.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 from assets/css/digital-transformation-page.css (see that file for
  the original rationale). Differences driven by this page's actual content:
    - Hero: no inline background style on .video-overlay-main (kept !important
      anyway as a safety net).
    - Solution grid: 12 cards (even) — clean 6x2 grid, no odd-card promotion.
    - Expertise grid: 11 cards, 3 columns — 3 full rows + 1 partial row of 2
      (not a lone card, so no single-card promotion is applicable/needed).
    - Benefits: 17 cards (not 16) — alternation still keyed off the wrapper
      column, same nth-child(even) gotcha as the digital-transformation page.
    - Our Process: 12 stages.
    - Three .mini-section-main CTA bands on this page (after "About", after
      "Our Process", and between testimonials and case studies) plus three
      .service-bg bands (after Why SaaS, after Expertise, after Benefits) —
      all handled generically so no fixed count needs to be assumed.
*/

.saas-platform-development-page{--spd-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 kept as a safety net in case an inline background style is   */
/* ever added to this element (main.css/inline styles would otherwise      */
/* always win over an external stylesheet rule). */
.saas-platform-development-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;
}
.saas-platform-development-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;
}
.saas-platform-development-page .main-video-section .container{position:relative;z-index:1;}
.saas-platform-development-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(--spd-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.saas-platform-development-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: spdPulse 2.2s ease-in-out infinite;
}
@keyframes spdPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.saas-platform-development-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).                                            */
/* ---------------------------------------------------------------------- */
.saas-platform-development-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);
}
.saas-platform-development-page .single-header-main.sticky{background: rgba(255,255,255,.86);}
.saas-platform-development-page .single-header-main .container{position:relative;}
.saas-platform-development-page .main-menu .menu-item .menu-link{font-weight:600;}
.saas-platform-development-page .main-menu .menu-item .menu-link::after{display:none;}
.saas-platform-development-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;
}
.saas-platform-development-page .menu-indicator.is-ready{opacity:1;}

/* ---------------------------------------------------------------------- */
/* 3) "Why SaaS" grid — 12 cards (even count), reflowed as a clean 6x2 CSS */
/*    grid. Unlike the digital-transformation page's 5-card grid, there is */
/*    no odd card to promote to full width here.                          */
/*                                                                          */
/*    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, but a grid  */
/*    item's sizing is controlled by the grid track, not the item's own    */
/*    width/flex properties — the only thing that must be zeroed out       */
/*    explicitly is the padding/max-width still applied by the column      */
/*    classes.                                                             */
/* ---------------------------------------------------------------------- */
.saas-platform-development-page .solution-section-main{background:var(--vtc-bg-main-bg-9);}
.saas-platform-development-page .solution-section-main .row.mt-5.g-0{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.saas-platform-development-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]{
  width:auto;max-width:none;padding:0;
}
.saas-platform-development-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;
}
.saas-platform-development-page .solution-box:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(24,88,202,.28);
  border-color: transparent !important;
}
.saas-platform-development-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;
}
.saas-platform-development-page .solution-box .icon img{max-width:28px;max-height:28px;}
.saas-platform-development-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);transform: scale(1.06);}
.saas-platform-development-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.saas-platform-development-page .solution-box .heading2 h3::after{display:none;}

@media (max-width:767px){
  .saas-platform-development-page .solution-section-main .row.mt-5.g-0{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- */
/* 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 every   */
/*    CTA moment on the page reads as one consistent family. This page    */
/*    has THREE .mini-section-main bands (after "About", after "Our       */
/*    Process", and between testimonials and case studies) and THREE      */
/*    .service-bg bands (after "Why SaaS", after "Expertise", after       */
/*    "Benefits") — handled generically so no fixed count is assumed.     */
/* ---------------------------------------------------------------------- */
.saas-platform-development-page .mini-section-main{position:relative;}
.saas-platform-development-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%);
}
.saas-platform-development-page .mini-section-main .section-absolute{z-index:1;}
.saas-platform-development-page .service-bg{border-top:1px solid rgba(24,88,202,.12);}

/* ---------------------------------------------------------------------- */
/* 5) "Our Expertise" grid — 11 cards, 3-column grid (3 full rows plus one */
/*    partial row of 2 — a normal, non-awkward outcome for a card grid,   */
/*    and NOT a lone card, so no single-card full-width promotion is      */
/*    needed here). Each card promoted to a real bordered card with a     */
/*    full-width image, matching the latest state of the icon treatment   */
/*    on digital-transformation-page.css (height:190px icon container,    */
/*    object-fit:contain image with no max-width/max-height constraints). */
/* ---------------------------------------------------------------------- */
.saas-platform-development-page .expertise-section .row.g-0{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.saas-platform-development-page .expertise-section .row.g-0 > [class*="col-"]{width:auto;max-width:none;padding:0;}
.saas-platform-development-page .expertise-box{
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--vtc-border-border-1);
  border-radius:16px;
  overflow:hidden;
}
.saas-platform-development-page .expertise-box:hover{box-shadow: 0 20px 44px -20px rgba(24,88,202,.28);}
.saas-platform-development-page .expertise-box .icon{height:190px;margin-bottom:0;padding:0;}
.saas-platform-development-page .expertise-box .icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
.saas-platform-development-page .expertise-box .content{padding:22px 22px 26px;}
.saas-platform-development-page .expertise-box .content h3{font-size:18px;}
.saas-platform-development-page .expertise-box .content p{font-size:14px;}

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

/* ---------------------------------------------------------------------- */
/* 6) "Benefits to Clients" — 17 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).              */
/* ---------------------------------------------------------------------- */
.saas-platform-development-page .benefit-box h3{position:relative;padding-left:20px;}
.saas-platform-development-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).                           */
.saas-platform-development-page .benefits-section .row > div:nth-child(even) .benefit-box{border-left-color: var(--vtc-bg-main-bg-3);}
.saas-platform-development-page .benefits-section .row > div:nth-child(even) .benefit-box h3::before{color: var(--vtc-bg-main-bg-3);}

/* ---------------------------------------------------------------------- */
/* 7) "Our Process" — 12-stage timeline. Only the active-rail gradient and */
/*    a slight scale on the active step number are added. `.how-we-work-  */
/*    img` is intentionally left untouched: it also carries a pre-existing */
/*    `padding-right:100px` from main.css (invisible spacing before the    */
/*    text column) — a background painted directly on that class would    */
/*    turn that invisible gap into a visible rectangle next to every step  */
/*    image (this happened on the digital-transformation page and was     */
/*    reverted). Do not reintroduce that here.                             */
/* ---------------------------------------------------------------------- */
.saas-platform-development-page .step-item.active::after,
.saas-platform-development-page .step-item .step-content.active::after,
.saas-platform-development-page .step-item:has(.step-content.active)::after{
  background: linear-gradient(180deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
}
.saas-platform-development-page .step-content.active .step-number{transform: scale(1.08);}

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