:root {
     --ink:#061b3a;
     --blue:#1677f8; 
     --sky:#36b6ff; 
     --muted:#60708a; 
     --line:rgba(11,44,92,.1); 
 
}
.detail-hero { 
      min-height:70vh;
      position:relative;
      isolation:isolate;
      color:#fff;
      display:flex;
      align-items:center;
      overflow:hidden
}

.detail-hero__image,.detail-hero__overlay {
      position:absolute;
      inset:0;
      z-index:-2 
}

.detail-hero__image { 
      background:center/cover no-repeat;
      transform:scale(1.03);
      transition:background-image .45s ease
}

.detail-hero__overlay{
      z-index:-1;
      background:linear-gradient(105deg,rgba(0,18,57,.94),rgba(0,45,111,.78) 55%,rgba(0,22,68,.56));
}
.detail-hero__content{
      padding:6.5rem 0 4rem
}
.breadcrumb{
      display:flex;
      gap:.7rem;
      align-items:center;
      font-size:.88rem;
      color:rgba(255,255,255,.7);
      margin-bottom:2rem
}

.breadcrumb a:hover{
      color:#fff;
}

.breadcrumb i{
      font-size:.65rem
}

.service-eyebrow,.section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:.72rem;
      font-weight:800
}

.service-eyebrow{
      padding:.55rem .85rem;
      border:1px solid rgba(255,255,255,.25);
      border-radius:999px;
      background:rgba(255,255,255,.1);
      backdrop-filter:blur(12px)
}
.detail-hero h1{
      font-size:clamp(2.7rem,6vw,5.5rem);
      letter-spacing:-.065em;
      line-height:1.03;
      max-width:850px;
      margin:1rem 0
}
.hero-subtitle{
      font-size:clamp(1.1rem,2vw,1.4rem);
      font-weight:600;
      margin:0 0 .7rem
}
.hero-description{
      max-width:680px;
      color:rgba(255,255,255,.82);
      font-size:1.04rem;margin:0
}
.detail-actions{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
      margin-top:2rem
}
.detail-section{
      padding:6.4rem 0
}
.split-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:5rem;
      align-items:center
}
.section-kicker{
      color:var(--blue);
      margin-bottom:.8rem
}
.detail-section h2,.final-cta h2{
      color:var(--ink);
      font-size:clamp(2rem,3.4vw,3.25rem);
      letter-spacing:-.045em;
      line-height:1.12;
      margin:.1rem 0 1.15rem
}
.detail-section p{
      color:var(--muted);
      font-size:1rem
}
.service-visual,.benefit-art{
      position:relative
}
.service-visual img,.benefit-art img{
      width:100%;
      aspect-ratio:1.1;
      object-fit:cover;
      border-radius:26px;
      box-shadow:0 26px 60px rgba(3,24,62,.2)
}
.visual-chip{
      position:absolute;
      right:-1.3rem;
      bottom:1.3rem;
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:1rem 1.2rem;
      background:rgba(255,255,255,.88);
      box-shadow:0 18px 35px rgba(2,22,56,.14);
      backdrop-filter:blur(12px);
      border-radius:14px;
      font-weight:700;
      color:var(--ink)
}
.visual-chip i{
      color:var(--blue);
      font-size:1.3rem
}
.text-link{
      display:inline-flex;
      gap:.6rem;
      color:var(--blue);
      font-weight:800;
      margin-top:1rem
}
.services-section, .why-section{
      background:linear-gradient(135deg,#f5faff,#eef4ff)
}
.services-section .section-intro, .why-section .section-intro {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
}
.section-intro{
      max-width:680px;
      margin-bottom:2.6rem
}
.section-intro.center{
      text-align:center;
      margin-left:auto;
      margin-right:auto
}
.include-grid, .why-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1.15rem
}
.why-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.6rem;
}
.why-card {
      position: relative;
      background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(240,246,255,0.6) 100%);
      border: 1px solid rgba(22,119,248,0.06);
      backdrop-filter: blur(16px);
      border-radius: 24px;
      padding: 2.2rem 1.75rem;
      box-shadow: 0 10px 30px rgba(9,36,79,0.03);
      transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      overflow: hidden;
      z-index: 1;
}
.why-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--sky));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
      z-index: 2;
}
.why-card::after {
      content: '';
      position: absolute;
      bottom: -60px;
      right: -60px;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(54, 182, 255, 0.18) 0%, transparent 70%);
      border-radius: 50%;
      z-index: -1;
      transition: all 0.5s ease;
}
.why-card:hover::before {
      transform: scaleX(1);
}
.why-card:hover::after {
      width: 180px;
      height: 180px;
      bottom: -40px;
      right: -40px;
      background: radial-gradient(circle, rgba(22, 119, 248, 0.28) 0%, transparent 70%);
}
.why-card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 30px 60px rgba(22,119,248,0.18), 0 10px 20px rgba(0,0,0,0.02);
      border-color: rgba(22,119,248,0.3);
      background: #ffffff;
}
.why-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(22,119,248,0.07), rgba(54,182,255,0.07));
      color: var(--blue);
      font-size: 1.35rem;
      margin-bottom: 1.4rem;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 0 8px 18px rgba(22,119,248,0.06);
      transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.why-card:hover .why-icon {
      transform: scale(1.12) rotate(-8deg);
      background: linear-gradient(135deg, var(--blue), var(--sky));
      color: #ffffff;
      box-shadow: 0 12px 24px rgba(22,119,248,0.35);
}
.why-card h3 {
      font-size: 1.08rem;
      font-weight: 800;
      color: var(--ink);
      margin: 0 0 0.6rem 0;
      line-height: 1.35;
      transition: color 0.3s ease;
}
.why-card:hover h3 {
      color: var(--blue);
}
.why-card p {
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
}

.include-card {
      position: relative;
      background: #ffffff;
      border: 1px solid rgba(22,119,248,0.06);
      border-left: 4px solid var(--blue);
      border-radius: 20px;
      padding: 2rem 1.6rem;
      box-shadow: 0 10px 30px rgba(9,36,79,0.02);
      transition: all .35s cubic-bezier(0.165, 0.84, 0.44, 1);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      overflow: hidden;
}
.include-card:hover {
      transform: translateY(-8px);
      border-color: rgba(22,119,248,0.25);
      border-left-color: var(--sky);
      box-shadow: 0 25px 50px rgba(22, 119, 248, 0.12), 0 5px 15px rgba(0, 0, 0, 0.03);
      background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
}
.include-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(22,119,248,0.06);
      color: var(--blue);
      font-size: 1.2rem;
      margin-bottom: 1.2rem;
      margin-left: 0;
      margin-right: 0;
      transition: all .35s cubic-bezier(0.165, 0.84, 0.44, 1);
      box-shadow: inset 0 2px 4px rgba(22,119,248,0.05);
}
.include-card:hover .include-icon {
      transform: scale(1.1) rotate(5deg);
      background: linear-gradient(135deg, var(--blue), var(--sky));
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(22,119,248,0.3);
}
.include-card h3 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--ink);
      margin: 0 0 0.5rem 0;
      line-height: 1.35;
      transition: color .3s ease;
}
.include-card:hover h3 {
      color: var(--blue);
}
.include-card p {
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
}
.tech-section{
      background:#fff
}
.tech-grid{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:1rem
}
.tech-card{
      width:145px;
      min-height:120px;
      display:grid;
      place-content:center;
      text-align:center;
      gap:.6rem;
      background:linear-gradient(145deg,#fff,#f0f7ff);
      border:1px solid var(--line);
      background-origin: padding-box;
      color:var(--ink);
      font-weight:800;
      box-shadow:0 12px 25px rgba(8,52,113,.06);
      transition:.3s
}
.tech-card i{
      font-size:1.8rem;
      color:var(--blue)
}
.tech-card:hover{
      background:var(--ink);
      color:#fff;
      transform:translateY(-5px)
}
.process-section{
      background:#081d42
}
.process-section h2{
      color:#fff
}
.process-section .section-kicker{
      color:#7dccff
}
.process-track{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:.8rem;
      position:relative
}
.process-track:before{
      content:"";
      position:absolute;
      top:30px;
      left:6%;
      right:6%;
      height:1px;
      background:linear-gradient(90deg,transparent,#5caeff,transparent)
}
.process-item{
      position:relative;
      text-align:center;
      flex:1 1 140px;
      max-width:170px
}
.process-number{
      width:60px;
      height:60px;
      margin:0 auto 1rem;
      display:grid;
      place-items:center;
      border:1px solid rgba(125,204,255,.5);
      border-radius:50%;
      background:#0c2f67;
      color:#8fd4ff;
      font-weight:800
}
.process-item h3{
      color:#fff;
      font-size:.9rem;
      margin:0
}
.process-item p{
      font-size:.78rem;
      color:#9cb6db;
      margin:.35rem 0
}

.benefits-section{
      background:linear-gradient(145deg,#f7fbff,#eaf3ff)
}
.benefit-art__orb{
      position:absolute;
      width:130px;
      height:130px;
      border-radius:50%;
      right:-28px;
      top:-28px;
      background:linear-gradient(135deg,#1f82f6,#72cdfc);
      opacity:.75;
      z-index:-1
}
.benefit-list{
      padding:0;
      margin:1.7rem 0 0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.8rem;
      list-style:none
}
.benefit-list li{
      font-weight:650;
      color:var(--ink);
      font-size:.92rem
}
.benefit-list i{
      color:#14af75;
      margin-right:.55rem
}
.faq-layout{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:5rem;
      align-items:start
}
.faq-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      margin-bottom:.75rem;
      overflow:hidden
}
.faq-question{
      width:100%;
      border:0;
      background:transparent;
      text-align:left;
      padding:1.1rem 1.25rem;
      font-weight:750;
      color:var(--ink);
      display:flex;
      justify-content:space-between;
      gap:1rem;
      cursor:pointer
}
.faq-question i{
      color:var(--blue);transition:.25s
}
.faq-answer{
      display:grid;
      grid-template-rows:0fr;
      transition:grid-template-rows .28s
}
.faq-answer p{
      overflow:hidden;
      margin:0;
      padding:0 1.25rem
}
.faq-item.open .faq-answer{
      grid-template-rows:1fr
}
.faq-item.open .faq-answer p{
      padding:0 1.25rem 1.2rem
}
.faq-item.open .faq-question i{
      transform:rotate(45deg)
}
.testimonial-section{
      background:#f5f9ff
}
.testimonial-card{
      min-height:250px;
      position:relative;
      background:linear-gradient(135deg,#fff,#edf6ff);
      border-radius:24px;
      border:1px solid var(--line);
      padding:3.4rem 6rem;
      box-shadow:0 20px 48px rgba(9,48,105,.08);
      text-align:center
}
.testimonial-quote{
      color:var(--blue);
      font-size:1.8rem
}
.testimonial-card blockquote{
      font-size:clamp(1rem,2vw,1.25rem);
      color:var(--ink);
      font-weight:500;
      max-width:780px;
      margin:1rem auto
}
.client{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.8rem
}
.client img{
      width:46px;
      height:46px;
      object-fit:cover;
      border-radius:50%;
      border:3px solid #cce5ff
}
.client-name{
      text-align:left;
      font-weight:800;
      color:var(--ink);
      line-height:1.2
}
.client-name small{
      display:block;
      color:var(--muted);
      font-weight:500
}
.stars{
      color:#f7b928;
      font-size:.8rem;
      margin-bottom:.35rem
}
.slider-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      border:0;
      width:42px;
      height:42px;
      border-radius:50%;
      background:#fff;
      color:var(--blue);
      box-shadow:0 8px 20px rgba(9,45,101,.12);
      cursor:pointer
}
.slider-btn:hover{
      background:var(--blue);
      color:#fff
}
.prev{
      left:1.5rem
}
.next{
      right:1.5rem
}
.final-cta{
   background:radial-gradient(circle at 85% 15%,#1368c9,transparent 30%),#061a3b;
   color:#fff;
   padding:5.5rem 0
}
.final-cta__inner{
      display:flex;
      justify-content:space-between;
      gap:2rem;
      align-items:center
}
.final-cta h2{
      color:#fff;
      max-width:600px
}
.final-cta p{
      max-width:650px;
      color:#b9d1ef
}
.tc-footer{
      background:#04142e;
      color:#c5d6e9;
      padding:3.8rem 0 0;
}
.simple-footer{
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:3rem
}
.simple-footer .brand{
      color:#fff
}
.simple-footer p{
      max-width:370px
}
.simple-footer h3{
      color:#fff;
      margin-top:0
}
.simple-footer a:not(.brand){
      display:block;
      margin:.55rem 0
}
.simple-footer a:hover{
      color:#75c4ff
}
.footer-copyright{
      border-top:1px solid rgba(255,255,255,.1);
      padding:1.2rem 1rem;
      text-align:center;
      margin-top:2.8rem;
      font-size:.85rem
}

@media(max-width:1050px){
      .include-grid,.why-grid{
            grid-template-columns:repeat(2,1fr)
      }
      .process-track:before{
            display:none
      }
}
@media(max-width:760px){
      .detail-hero{
            min-height:650px
      }
      .detail-section{
            padding:4.4rem 0
      }
      .split-grid,.faq-layout{
            grid-template-columns:1fr;
            gap:2.5rem
      }
      .overview-section .service-visual{order:2}
      .include-grid,.why-grid{
            grid-template-columns:1fr
      }
      .benefits-grid .benefit-art{order:2}
      .benefit-list{
      grid-template-columns:1fr
}
.final-cta__inner{
      display:block
}
.final-cta .detail-actions{
      margin-top:1.6rem
      }
      .simple-footer{
            grid-template-columns:1fr;
            gap:1.5rem
      }
      .testimonial-card{
            padding:2.5rem 3.8rem
      }
      .prev{
            left:.75rem
      }
      .next{right:.75rem}
      .visual-chip{right:.5rem}
      .nav-actions .btn{padding:.8rem 1rem}}

/* Keep the light process cards readable against the dark process section. */
.process-item h3 { 
      color: var(--ink); 
      font-weight: 800; 
      line-height: 1.35; 
}
.process-item p { 
      color: #55739b; 
      line-height: 1.45; 
      margin-top: .45rem; 
}