/* ============================================================
   ===============   SOLUTIONS PAGE  ==========================
   ============================================================ */

/* Inner banner — breadcrumb + title + subtitle on a deep-blue gradient */
.innerbanner {
   position: relative;
   padding: 160px 0 66px;
   background:
      radial-gradient(1100px 520px at 50% 120%, rgba(37, 99, 255, 0.42), transparent 62%),
      radial-gradient(760px 420px at 0% 0%, rgba(31, 80, 214, 0.28), transparent 60%),
      linear-gradient(180deg, #050914 0%, #0a1430 55%, #0b1226 100%);
   overflow: hidden;
}

.ib_crumb {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 22px;
}

.ib_crumb a {
   color: #6da2ff;
   text-decoration: none;
   transition: color 0.2s ease;
}

.ib_crumb a:hover {
   color: #a9c6ff;
}

.ib_crumb .ib_sep {
   color: rgba(255, 255, 255, 0.35);
}

.ib_crumb .ib_current {
   color: #e7edfb;
}

.ib_title {
   color: #fff;
   font-size: clamp(38px, 4vw, 76px);
   font-weight: 400;
   line-height: 1.02;
   letter-spacing: -0.02em;
   margin: 0 0 20px;
}

.ib_lead {
   color: #cdd8ef;
   font-size: clamp(18px, 1.7vw, 23px);
   font-weight: 500;
   line-height: 1.4;
   /* max-width: 880px; */
   margin: 0 0 14px;
}

.ib_sub {
   color: #9aa8c6;
   font-size: clamp(15px, 1.4vw, 18px);
   line-height: 1.65;
   max-width: 880px;
   margin: 0;
}

/* Solutions overview */
.sol_intro {
   background-color: #070a14;
   padding: 80px 0 20px;
}

.sol_intro_eyebrow {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: #6da2ff;
   padding: 7px 15px;
   border-radius: 999px;
   border: 1px solid rgba(109, 162, 255, 0.28);
   background: rgba(37, 99, 255, 0.08);
   margin-bottom: 20px;
}

.sol_intro_head {
   color: #fff;
   font-size: clamp(32px, 4.4vw, 56px);
   font-weight: 400;
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin: 0 0 28px;
   max-width: none;
   text-align: left;
}

.sol_intro_body {
   max-width: none;
   text-align: left;
}

.sol_intro_body p {
   color: #9aa8c6;
   font-size: clamp(15px, 1.35vw, 17px);
   line-height: 1.75;
   margin: 0 0 20px;
}

.sol_intro_body p:last-child {
   margin-bottom: 0;
}

.sol_intro_lead {
   color: #d3ddf1 !important;
   font-size: clamp(17px, 1.6vw, 20px) !important;
   font-weight: 500;
   line-height: 1.6 !important;
}

/* Solution areas — heading + grid in one section, styled like the home
   services section (dark grid background + ambient glow blobs via ::before / ::after) */
.sol_section {
   position: relative;
   overflow: hidden;
   background-color: var(--d-bg2, #070a14);
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 46px 46px;
   padding: 74px 0 90px;
}

.sol_section::before,
.sol_section::after {
   content: "";
   position: absolute;
   width: 560px;
   height: 560px;
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
   filter: blur(20px);
}

.sol_section::before {
   left: -200px;
   top: 22%;
   background: radial-gradient(circle, rgba(127, 191, 77, 0.16) 0%, rgba(127, 191, 77, 0) 70%);
}

.sol_section::after {
   right: -200px;
   bottom: 8%;
   background: radial-gradient(circle, rgba(31, 80, 214, 0.2) 0%, rgba(31, 80, 214, 0) 70%);
}

.sol_section .container {
   position: relative;
   z-index: 1;
}

.sol_areas_head {
   color: #fff;
   font-size: clamp(32px, 4.4vw, 56px);
   font-weight: 400;
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin: 0 0 38px;
}

.sol_grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 26px;
}

/* industries page: 3 cards per row */
.sol_grid--3 {
   grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
   .sol_grid--3 {
      grid-template-columns: repeat(2, 1fr);
   }
}

.sol_card {
   position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 18px;
   text-decoration: none;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(12, 15, 28, 0.6);
   box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sol_card:hover {
   transform: translateY(-5px);
   border-color: color-mix(in srgb, var(--sb, #2563FF) 55%, transparent);
   box-shadow: 0 30px 56px -28px color-mix(in srgb, var(--sb, #2563FF) 60%, rgba(0, 0, 0, 0.9));
}

/* full-width image at the top of the card */
.sol_media {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}

.sol_media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.sol_card:hover .sol_media img {
   transform: scale(1.05);
}

/* brand accent strip under the image */
.sol_media::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 3px;
   background: linear-gradient(to right, var(--sb, #2563FF), var(--sb2, #5B8CFF));
}

.sol_card_body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 14px;
   padding: 22px 26px 26px;
}

.sol_name {
   color: #fff;
   font-size: 21px;
   font-weight: 500;
   margin: 0;
}

.sol_more {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   color: #9FD65A;
   font-weight: 600;
   font-size: 14px;
   transition: gap 0.25s ease, color 0.25s ease;
}

.sol_card:hover .sol_more {
   color: #C6F29B;
}

.sol_card:hover .sol_more {
   gap: 13px;
}

@media (max-width: 600px) {
   .sol_grid {
      grid-template-columns: 1fr;
   }

   .innerbanner {
      padding-top: 140px;
   }
}

/* ============================================================
   ===========   SOLUTION DETAIL PAGE (.sd_*)  ================
   ============================================================ */

.sd_section {
   background-color: #070a14;
   padding: 80px 0;
}

.sd_section.sd_alt {
   background-color: #0a0f1e;
}

.sd_split {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 60px;
   align-items: center;
}

.sd_split.sd_rev .sd_media {
   order: 2;
}

.sd_media {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 40px 90px -50px rgba(31, 80, 214, 0.6);
}

.sd_media img {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

.sd_kicker {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #6da2ff;
   padding: 6px 14px;
   border-radius: 999px;
   border: 1px solid rgba(109, 162, 255, 0.28);
   background: rgba(37, 99, 255, 0.08);
   margin-bottom: 18px;
}

.sd_head {
   color: #fff;
   font-size: clamp(26px, 3.2vw, 42px);
   font-weight: 500;
   line-height: 1.18;
   letter-spacing: -0.02em;
   margin: 0 0 22px;
}

.sd_text p,
.sd_center p {
   color: #9aa8c6;
   font-size: clamp(15px, 1.3vw, 16.5px);
   line-height: 1.75;
   margin: 0 0 16px;
}

.sd_text p:last-child,
.sd_center p:last-child {
   margin-bottom: 0;
}

/* full-width, left-aligned content block (no image) */
.sd_center {
   text-align: left;
}

/* centered section heading — larger, keeps the gradient effect */
.sd_head_c {
   text-align: center;
   margin: 0 auto 48px;
   font-size: clamp(32px, 4.4vw, 56px);
   font-weight: 400;
   line-height: 1.1;
}

/* image-left / content-right blocks (second one reversed) */
.sd_blocks {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px;
}

.sd_block {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: stretch;
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(12, 15, 28, 0.6);
   box-shadow: 0 30px 70px -44px rgba(31, 80, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* reversed block → image on the right */
.sd_block.sd_block_rev .sd_block_media {
   order: 2;
}

.sd_block_media {
   position: relative;
   overflow: hidden;
   min-height: 300px;
}

.sd_block_media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sd_block_body {
   padding: 40px 40px 42px;
}

.sd_list_head {
   font-size: clamp(24px, 2.6vw, 32px);
   font-weight: 500;
   margin: 0 0 22px;
   letter-spacing: -0.01em;
   background: var(--ai-grad);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: ai-grad-pan 6s linear infinite alternate;
}

.sd_list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.sd_list li {
   position: relative;
   color: #b7c2da;
   font-size: 15px;
   line-height: 1.5;
   padding: 0 0 14px 30px;
}

.sd_list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 3px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
      linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 14px -3px rgba(37, 99, 255, 0.8);
}

/* SAP Enablement Packages intro */
.sd_pkg_intro {
   max-width: 880px;
   margin: 0 auto;
}

.sd_pkg_intro .sd_head_c {
   margin-bottom: 20px;
}

.sd_pkg_lead {
   text-align: center;
   color: #9aa8c6;
   font-size: clamp(16px, 1.5vw, 19px);
   line-height: 1.7;
   margin: 0;
}

.sd_pkg_grid {
   margin-top: 50px;
}

/* ---- Package detail page ---- */
/* Purpose / Best for / Why it matters blocks */
.sd_qa {
   max-width: 940px;
   margin-top: 4px;
}

.sd_qa_item {
   margin-bottom: 30px;
}

.sd_qa_item:last-child {
   margin-bottom: 0;
}

.sd_qa_h {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #9FD65A;
   margin: 0 0 10px;
}

.sd_qa_item p {
   color: #9aa8c6;
   font-size: clamp(15px, 1.3vw, 16.5px);
   line-height: 1.75;
   margin: 0;
}

/* three list cards — What is included / Deliverables / Business value */
.sd_cards3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
   align-items: start;
}

.sd_lcard {
   padding: 32px 30px 34px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(12, 15, 28, 0.6);
   box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sd_lcard_h {
   color: #fff;
   font-size: 20px;
   font-weight: 500;
   margin: 0 0 20px;
   padding-bottom: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sd_lcard .sd_list li {
   padding-bottom: 12px;
}

.sd_lcard .sd_list li:last-child {
   padding-bottom: 0;
}

@media (max-width: 860px) {
   .sd_cards3 {
      grid-template-columns: 1fr;
   }
}

/* Call to action */
.sd_cta {
   position: relative;
   overflow: hidden;
   text-align: center;
   padding: 90px 0;
   background:
      radial-gradient(900px 460px at 50% 120%, rgba(37, 99, 255, 0.4), transparent 62%),
      linear-gradient(180deg, #0a1430 0%, #0b1226 100%);
}

.sd_cta_head {
   font-size: clamp(32px, 4.4vw, 56px);
   font-weight: 400;
   letter-spacing: -0.02em;
   line-height: 1.1;
   margin: 0 0 28px;
   background: var(--ai-grad);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: ai-grad-pan 6s linear infinite alternate;
}

.sd_cta_btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 30px;
   border-radius: 999px;
   font-size: 16px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   background-size: 180% auto;
   box-shadow: 0 18px 40px -14px rgba(37, 99, 255, 0.7);
   transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sd_cta_btn:hover {
   background-position: right center;
   transform: translateY(-2px);
   box-shadow: 0 24px 48px -16px rgba(37, 99, 255, 0.85);
}

@media (max-width: 860px) {
   .sd_split {
      grid-template-columns: 1fr;
      gap: 34px;
   }

   .sd_split.sd_rev .sd_media {
      order: 0;
   }

   .sd_block {
      grid-template-columns: 1fr;
   }

   .sd_block.sd_block_rev .sd_block_media {
      order: 0;
   }

   .sd_block_media {
      min-height: 220px;
   }
}

/* ---- product card subtitle ---- */
.sol_card_sub {
   color: #9aa8c6;
   font-size: 14.5px;
   line-height: 1.55;
   margin: 0;
}

/* tagline reads as a lead-in when a description paragraph follows it */
.sol_card_sub:has(+ .sol_card_desc) {
   color: #cdd8ef;
   font-size: 16px;
   font-weight: 500;
}

/* ---- product card description paragraph ---- */
.sol_card_desc {
   color: #9aa8c6;
   font-size: 15px;
   line-height: 1.7;
   margin: 0;
}

/* keep "Learn more" pinned to the card bottom when descriptions differ in length */
.sol_card_body:has(.sol_card_desc) {
   flex: 1;
}

.sol_card_body:has(.sol_card_desc) .sol_more {
   margin-top: auto;
}

/* four-up grid (other packages on a package detail page) */
.sol_grid--4 {
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
}

.sol_grid--4 .sol_card_body {
   flex: 1;
   padding: 20px 22px 24px;
}

.sol_grid--4 .sol_name {
   font-size: 18px;
   line-height: 1.35;
}

.sol_grid--4 .sol_more {
   margin-top: auto;
}

@media (max-width: 1100px) {
   .sol_grid--4 {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 600px) {
   .sol_grid--4 {
      grid-template-columns: 1fr;
   }
}

/* centered button row under a card grid */
.pk_more_cta {
   display: flex;
   justify-content: center;
   margin-top: 44px;
}

/* ---- solution intro: lead text beside an image, platform chips below ---- */
.sd_intro .sd_head {
   margin-bottom: 20px;
}

.sd_text .sd_intro_lead {
   color: #d3ddf1;
   font-size: clamp(17px, 1.6vw, 20px);
   font-weight: 500;
   line-height: 1.6;
}

.sd_platforms {
   margin-top: 56px;
   padding-top: 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   text-align: center;
}

.sd_platforms_label {
   color: #cdd8ef;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.04em;
   margin: 0 0 22px;
}

.sd_platforms .chips {
   max-width: 1000px;
}

/* ---- hero subtitle / paragraph (products) ---- */
.pk_hero_sub {
   color: #cdd8ef;
   font-size: clamp(17px, 1.6vw, 21px);
   font-weight: 500;
   line-height: 1.45;
   margin: 0 0 24px;
   max-width: none;
}

.pk_hero .pk_hero_p {
   max-width: none;
}

/* ---- two-column checklist ---- */
.list2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px 40px;
   margin-top: 6px;
}

.list2_wide {
   max-width: 980px;
   margin-inline: auto;
}

/* ---- capability cards ---- */
.cap_grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.cap_card {
   padding: 30px 28px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background:
      radial-gradient(120% 90% at 0% 0%, rgba(37, 99, 255, 0.08), transparent 55%),
      rgba(12, 15, 28, 0.6);
   box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cap_card:hover {
   transform: translateY(-4px);
   border-color: rgba(109, 162, 255, 0.5);
   box-shadow: 0 30px 56px -30px rgba(37, 99, 255, 0.55);
}

.cap_ic {
   display: inline-grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 14px;
   font-size: 21px;
   color: #fff;
   margin-bottom: 18px;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 22px -3px rgba(37, 99, 255, 0.7);
}

.cap_t {
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   margin: 0 0 10px;
}

/* icon + label row (no description) */
.cap_card_row {
   display: flex;
   align-items: center;
   gap: 18px;
}

.cap_card_row .cap_ic {
   margin-bottom: 0;
   flex-shrink: 0;
}

.cap_card_row .cap_t {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.4;
}

.cap_d {
   color: #9aa8c6;
   font-size: 14.5px;
   line-height: 1.6;
   margin: 0;
}

/* ---- built-for chips ---- */
.chips {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   max-width: 900px;
   margin: 0 auto;
}

.chip {
   padding: 12px 22px;
   border-radius: 999px;
   font-size: 15px;
   font-weight: 500;
   color: #cdd8ef;
   border: 1px solid rgba(109, 162, 255, 0.28);
   background: rgba(37, 99, 255, 0.08);
   transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.chip:hover {
   transform: translateY(-2px);
   border-color: rgba(109, 162, 255, 0.6);
   background: rgba(37, 99, 255, 0.14);
}

/* ---- CTA subtitle ---- */
.sd_cta_sub {
   color: #cdd8ef;
   font-size: clamp(16px, 1.5vw, 19px);
   margin: 0 0 30px;
}

@media (max-width: 980px) {
   .cap_grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 700px) {
   .cap_grid {
      grid-template-columns: 1fr;
   }

   .list2 {
      grid-template-columns: 1fr;
   }

   .chips {
      justify-content: flex-start;
   }
}

/* ============================================================
   ======  PACKAGE DETAIL — rich layout (.pk_*)  ==============
   ============================================================ */

/* ---- Hero ---- */
.pk_hero {
   position: relative;
   overflow: hidden;
   padding: 140px 0 76px;
   background:
      radial-gradient(900px 520px at 100% 0%, rgba(37, 99, 255, 0.3), transparent 60%),
      radial-gradient(700px 460px at 0% 30%, rgba(31, 80, 214, 0.18), transparent 60%),
      linear-gradient(180deg, #050914 0%, #0a1430 60%, #0b1226 100%);
}

/* breadcrumb left, back button right */
.pk_hero_top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 30px;
}

.pk_crumb {
   margin-bottom: 0;
}

.pk_back {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   flex-shrink: 0;
   margin-left: auto;
   padding: 11px 22px 11px 18px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   background-size: 180% auto;
   box-shadow: 0 14px 32px -12px rgba(37, 99, 255, 0.75);
   transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pk_back i {
   font-size: 16px;
}

.pk_back:hover {
   background-position: right center;
   transform: translateX(-3px);
   box-shadow: 0 20px 40px -14px rgba(37, 99, 255, 0.9);
}

.pk_hero_grid {
   display: grid;
   grid-template-columns: 1.08fr 0.92fr;
   gap: 54px;
   align-items: center;
}

.pk_eyebrow {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: #6da2ff;
   margin-bottom: 16px;
}

.pk_pkg_no {
   color: #9FD65A;
   font-weight: 600;
   font-size: clamp(18px, 1.8vw, 22px);
   margin: 0 0 6px;
}

.pk_hero_title {
   font-size: clamp(32px, 4.4vw, 56px);
   font-weight: 500;
   line-height: 1.08;
   letter-spacing: -0.02em;
   margin: 0 0 22px;
}

.pk_hero_p {
   color: #b7c2da;
   font-size: clamp(15px, 1.4vw, 17.5px);
   line-height: 1.7;
   max-width: 560px;
   margin: 0 0 30px;
}

.pk_hero_btns {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.pk_btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 26px;
   border-radius: 999px;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   background-size: 180% auto;
   box-shadow: 0 16px 36px -14px rgba(37, 99, 255, 0.7);
   transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pk_btn:hover {
   background-position: right center;
   transform: translateY(-2px);
}

.pk_btn_ghost {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.16);
   box-shadow: none;
}

.pk_btn_ghost:hover {
   border-color: rgba(109, 162, 255, 0.6);
   background: rgba(255, 255, 255, 0.07);
}

.pk_hero_media {
   position: relative;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 50px 110px -50px rgba(37, 99, 255, 0.75);
}

.pk_hero_media img {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

/* ---- Generic section ---- */
.pk_sec {
   position: relative;
   padding: 76px 0;
   background-color: #070a14;
}

.pk_sec_alt {
   background-color: #0a0f1e;
}

.pk_sec_head {
   text-align: center;
   color: #fff;
   font-size: clamp(28px, 3.6vw, 46px);
   font-weight: 400;
   letter-spacing: -0.02em;
   margin: 0 0 48px;
}

/* ---- Panels (Purpose / Best for / Why) ---- */
.pk_split {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 40px;
   align-items: stretch;
}

.pk_two {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
   align-items: stretch;
}

.pk_panel {
   display: flex;
   flex-direction: column;
   padding: 40px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background:
      radial-gradient(120% 90% at 0% 0%, rgba(37, 99, 255, 0.1), transparent 55%),
      rgba(12, 15, 28, 0.6);
   box-shadow: 0 30px 70px -46px rgba(31, 80, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* bottom image fills only the leftover height so both panels match (no extra space) */
.pk_panel_img {
   margin-top: 28px;
   flex: 1 1 0;
   min-height: 200px;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.pk_panel_img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* icon + heading on one row → more compact panels */
.pk_ph {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 18px;
}

.pk_ic_circle {
   display: inline-grid;
   place-items: center;
   width: 56px;
   height: 56px;
   flex-shrink: 0;
   border-radius: 15px;
   font-size: 23px;
   color: #fff;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 26px -3px rgba(37, 99, 255, 0.8);
}

.pk_h {
   color: #fff;
   font-size: clamp(22px, 2.4vw, 28px);
   font-weight: 500;
   margin: 0;
}

.pk_p {
   color: #9aa8c6;
   font-size: clamp(15px, 1.3vw, 16.5px);
   line-height: 1.75;
   margin: 0;
}

.pk_media {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 40px 90px -50px rgba(31, 80, 214, 0.6);
}

.pk_media img {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 260px;
   object-fit: cover;
}

/* Purpose — single card: icon + text on the left, image built into the right */
.pk_purpose {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   align-items: stretch;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background:
      radial-gradient(120% 90% at 0% 0%, rgba(37, 99, 255, 0.1), transparent 55%),
      rgba(12, 15, 28, 0.6);
   box-shadow: 0 30px 70px -46px rgba(31, 80, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pk_purpose_txt {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 46px;
}

.pk_purpose_img {
   position: relative;
   min-height: 280px;
}

.pk_purpose_img img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* outlined circular icon (matches the reference) */
.pk_ic_outline {
   border-radius: 50%;
   color: #6da2ff;
   background:
      radial-gradient(circle at 50% 30%, rgba(37, 99, 255, 0.16), transparent 70%),
      rgba(12, 15, 28, 0.7);
   border: 1px solid rgba(109, 162, 255, 0.35);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 26px -16px rgba(37, 99, 255, 0.7);
}

@media (max-width: 860px) {
   .pk_purpose {
      grid-template-columns: 1fr;
   }

   .pk_purpose_img {
      min-height: 220px;
   }
}

.pk_sub_label {
   color: #cdd8ef;
   font-weight: 600;
   font-size: 15px;
   margin: 22px 0 14px;
}

.pk_signals {
   margin-top: 0;
}

/* ---- What is included ---- */
.pk_incl_grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 34px 24px;
}

.pk_incl {
   text-align: center;
}

.pk_incl_ic {
   display: inline-grid;
   place-items: center;
   width: 74px;
   height: 74px;
   border-radius: 50%;
   font-size: 28px;
   color: #6da2ff;
   margin-bottom: 16px;
   border: 1px solid rgba(109, 162, 255, 0.25);
   background:
      radial-gradient(circle at 50% 30%, rgba(37, 99, 255, 0.18), transparent 70%),
      rgba(12, 15, 28, 0.7);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -18px rgba(37, 99, 255, 0.7);
   transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pk_incl:hover .pk_incl_ic {
   transform: translateY(-4px);
   color: #fff;
   border-color: rgba(109, 162, 255, 0.6);
}

.pk_incl_t {
   color: #b7c2da;
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
   max-width: 190px;
   margin-inline: auto;
}

/* ---- Deliverables ---- */
.pk_deliv_grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 20px;
}

.pk_deliv {
   text-align: center;
   padding: 26px 16px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(12, 15, 28, 0.6);
   box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9);
   transition: transform 0.25s ease, border-color 0.25s ease;
}

.pk_deliv:hover {
   transform: translateY(-4px);
   border-color: rgba(109, 162, 255, 0.5);
}

.pk_deliv_ic {
   display: inline-grid;
   place-items: center;
   width: 50px;
   height: 50px;
   border-radius: 13px;
   font-size: 20px;
   color: #fff;
   margin-bottom: 14px;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 20px -3px rgba(37, 99, 255, 0.7);
}

.pk_deliv_t {
   color: #cdd8ef;
   font-size: 13.5px;
   line-height: 1.5;
   margin: 0;
}

/* ---- Assessment Journey ---- */
.pk_steps {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   position: relative;
}

/* connecting line */
.pk_steps::before {
   content: "";
   position: absolute;
   top: 42px;
   left: 10%;
   right: 10%;
   height: 2px;
   background: repeating-linear-gradient(90deg, rgba(109, 162, 255, 0.5) 0 10px, transparent 10px 20px);
   z-index: 0;
}

.pk_step {
   position: relative;
   z-index: 1;
   text-align: center;
}

.pk_step_ic {
   position: relative;
   display: inline-grid;
   place-items: center;
   width: 84px;
   height: 84px;
   border-radius: 50%;
   font-size: 30px;
   color: #fff;
   margin-bottom: 18px;
   background: linear-gradient(135deg, #0e1630, #16224a);
   border: 1px solid rgba(109, 162, 255, 0.4);
   box-shadow: 0 0 30px -6px rgba(37, 99, 255, 0.7);
}

.pk_step_no {
   position: absolute;
   top: -6px;
   right: -6px;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 14px -2px rgba(37, 99, 255, 0.9);
}

.pk_step_t {
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   margin: 0 0 8px;
}

.pk_step_d {
   color: #9aa8c6;
   font-size: 13.5px;
   line-height: 1.55;
   margin: 0 auto;
   max-width: 190px;
}

/* ---- Business Value ---- */
/* Business Value section — home services treatment (grid bg + ambient glow blobs) */
.pk_bv {
   overflow: hidden;
   background-color: #0a0f1e;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 46px 46px;
}

.pk_bv::before,
.pk_bv::after {
   content: "";
   position: absolute;
   width: 560px;
   height: 560px;
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
   filter: blur(20px);
}

.pk_bv::before {
   left: -200px;
   top: 12%;
   background: radial-gradient(circle, rgba(127, 191, 77, 0.16) 0%, rgba(127, 191, 77, 0) 70%);
}

.pk_bv::after {
   right: -200px;
   bottom: 6%;
   background: radial-gradient(circle, rgba(31, 80, 214, 0.22) 0%, rgba(31, 80, 214, 0) 70%);
}

.pk_bv .container {
   position: relative;
   z-index: 1;
}

.pk_value_grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}

.pk_value_grid_4 {
   grid-template-columns: repeat(4, 1fr);
}

.pk_value_indigo {
   background: linear-gradient(160deg, #1e2f7a 0%, #131a44 100%);
}

.pk_value_line {
   color: #fff;
   font-size: 17px;
   font-weight: 500;
   line-height: 1.5;
   margin: 0;
}

.pk_value {
   position: relative;
   overflow: hidden;
   padding: 40px 34px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pk_value_blue {
   background: linear-gradient(160deg, #17337a 0%, #0e1c44 100%);
}

.pk_value_teal {
   background: linear-gradient(160deg, #0f5b52 0%, #0a2f30 100%);
}

.pk_value_purple {
   background: linear-gradient(160deg, #402a8c 0%, #201545 100%);
}

.pk_value_ic {
   display: inline-grid;
   place-items: center;
   width: 56px;
   height: 56px;
   border-radius: 15px;
   font-size: 23px;
   color: #fff;
   margin-bottom: 20px;
   background: rgba(255, 255, 255, 0.14);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pk_value_t {
   color: #fff;
   font-size: 22px;
   font-weight: 500;
   margin: 0 0 12px;
}

.pk_value_d {
   color: rgba(233, 238, 250, 0.86);
   font-size: 15px;
   line-height: 1.65;
   margin: 0;
}

/* ---- Business Outcomes ---- */
.pk_out {
   padding: 80px 0;
   background:
      radial-gradient(900px 460px at 50% -10%, rgba(37, 99, 255, 0.22), transparent 60%),
      linear-gradient(180deg, #060a16 0%, #080c1a 100%);
}

.pk_out_grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
}

.pk_out_item {
   text-align: center;
   padding: 10px;
}

.pk_out_ic {
   display: inline-grid;
   place-items: center;
   width: 64px;
   height: 64px;
   border-radius: 16px;
   font-size: 26px;
   color: #fff;
   margin-bottom: 18px;
   background: linear-gradient(135deg, #2563FF, #5B8CFF);
   box-shadow: 0 0 26px -4px rgba(37, 99, 255, 0.75);
}

.pk_out_t {
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   margin: 0 0 10px;
}

.pk_out_d {
   color: #9aa8c6;
   font-size: 14px;
   line-height: 1.6;
   margin: 0 auto;
   max-width: 230px;
}

/* ---- Package detail responsive ---- */
@media (max-width: 980px) {
   .pk_incl_grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .pk_deliv_grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .pk_value_grid {
      grid-template-columns: 1fr;
   }

   .pk_value_grid_4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .pk_out_grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 860px) {
   .pk_hero_grid {
      grid-template-columns: 1fr;
      gap: 36px;
   }

   .pk_split,
   .pk_two {
      grid-template-columns: 1fr;
      gap: 26px;
   }

   /* stepper becomes vertical-ish → drop the connecting line */
   .pk_steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 34px 20px;
   }

   .pk_steps::before {
      display: none;
   }
}

@media (max-width: 560px) {
   .pk_incl_grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .pk_deliv_grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .pk_value_grid_4 {
      grid-template-columns: 1fr;
   }

   .pk_out_grid {
      grid-template-columns: 1fr;
   }

   .pk_panel {
      padding: 28px;
   }
}