:root {
   --ink: #0d1726;
   --blue: #365cf5;
   --cyan: #12b9cf;
   --purple: #8d67ff;
   --lime: #d8ff70;
   --muted: #667085;
   --line: #e7ebf2;
   --bg: #f7f9fc;
   --white: #fff;
   --shadow: 0 25px 80px rgba(15, 30, 60, .12)
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--bg);
   font-family: "DM Sans", sans-serif;
   overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: Manrope, sans-serif;
   letter-spacing: -.045em
}

a {
   text-decoration: none
}

.nav-shell {
   position: fixed;
   z-index: 1000;
   top: 14px;
   left: 0;
   right: 0
}

.navbar {
   max-width: 1280px;
   margin: auto;
   background: rgba(255, 255, 255, .88);
   border: 1px solid rgba(15, 23, 42, .08);
   border-radius: 18px;
   box-shadow: 0 12px 45px rgba(15, 23, 42, .07);
   backdrop-filter: blur(18px);
   padding: 8px 12px
}

.brand {
   display: flex;
   align-items: center;
   gap: 9px;
   color: var(--ink);
   font: 800 18px Manrope;
   letter-spacing: -.05em
}

.brand small {
   font-size: 12px;
   color: var(--blue)
}



/* ==========================================================================
   Extra richness: marquee, decorative blobs, connecting line
   ========================================================================== */

.marquee-section {
   padding: 40px 0;
   border-bottom: 1px solid var(--line);
}

.marquee-label {
   text-align: center;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.04em;
   color: #868585;
   margin-bottom: 22px;
}

.marquee-shell {
   overflow: hidden;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
   display: flex;
   width: max-content;
   gap: 56px;
   animation: marqueeScroll 26s linear infinite;
}

.marquee-track span {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.1rem;
   color: var(--ink-400);
   white-space: nowrap;
   opacity: 0.7;
}

.marquee-track span i {
   font-size: 1.3rem;
   color: var(--violet-500);
}

@keyframes marqueeScroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

@media (prefers-reduced-motion: reduce) {
   .marquee-track {
      animation: none;
      overflow-x: auto;
   }
}


.mark {
   width: 35px;
   height: 35px;
   border-radius: 11px;
   position: relative;
   display: inline-block;
   background: linear-gradient(135deg, #101b2b, #3d62f5);
   box-shadow: 0 8px 22px rgba(54, 92, 245, .25)
}

.mark i,
.mark b,
.mark em {
   position: absolute;
   display: block;
   background: #fff;
   border-radius: 20px
}

.mark i {
   width: 20px;
   height: 5px;
   left: 8px;
   top: 9px;
   transform: rotate(-35deg)
}

.mark b {
   width: 17px;
   height: 5px;
   left: 10px;
   top: 17px;
   transform: rotate(35deg)
}

.mark em {
   width: 11px;
   height: 4px;
   left: 12px;
   top: 24px;
   transform: rotate(-35deg)
}

.nav-link {
   font-size: 14px;
   font-weight: 700;
   color: #475467;
   padding: 11px 12px !important
}

.nav-link.active,
.nav-link:hover {
   color: var(--blue)
}

.dropdown-menu {
   border: 0;
   border-radius: 16px;
   box-shadow: var(--shadow);
   padding: 10px
}

.dropdown-item {
   border-radius: 10px;
   padding: 10px 12px;
   font-size: 14px
}

.dropdown-item:hover {
   background: #eef3ff;
   color: var(--blue)
}

.nav-btn {
   background: var(--ink);
   color: #fff;
   border-radius: 12px;
   padding: 11px 17px;
   margin-left: 8px;
   font-weight: 800
}

.nav-btn:hover {
   background: var(--blue);
   color: #fff
}

#progress {
   position: fixed;
   z-index: 3000;
   top: 0;
   left: 0;
   height: 3px;
   width: 0;
   background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple))
}

.opening {
   position: fixed;
   inset: 0;
   z-index: 2500;
   background: #fff;
   display: grid;
   place-items: center;
   transition: .8s
}

.opening.hide {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
   transform: scale(1.02)
}

.opening-inner {
   text-align: center;
   position: relative;
   z-index: 2
}

.opening .bigmark {
   width: 82px;
   height: 82px;
   border-radius: 25px;
   margin: auto;
   background: linear-gradient(135deg, #101b2b, #4367ff);
   box-shadow: 0 25px 60px rgba(54, 92, 245, .25);
   position: relative
}

.opening .bigmark i,
.opening .bigmark b,
.opening .bigmark em {
   position: absolute;
   background: #fff;
   border-radius: 30px
}

.opening .bigmark i {
   width: 45px;
   height: 10px;
   left: 18px;
   top: 22px;
   transform: rotate(-35deg)
}

.opening .bigmark b {
   width: 38px;
   height: 10px;
   left: 22px;
   top: 39px;
   transform: rotate(35deg)
}

.opening .bigmark em {
   width: 24px;
   height: 8px;
   left: 28px;
   top: 57px;
   transform: rotate(-35deg)
}

.opening h2 {
   font-size: 36px;
   margin: 22px 0 7px
}

.opening p {
   color: #98a2b3;
   margin-bottom: 25px
}

.start {
   border: 0;
   background: var(--ink);
   color: #fff;
   border-radius: 14px;
   padding: 15px 24px;
   font-weight: 800;
   box-shadow: 0 14px 35px rgba(15, 23, 42, .2)
}

.start:hover {
   background: var(--blue)
}

.rings {
   position: absolute;
   width: 480px;
   height: 480px;
   border: 1px solid #e2e8f5;
   border-radius: 50%;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   animation: spin 18s linear infinite
}

.rings:before,
.rings:after {
   content: "";
   position: absolute;
   border: 1px solid #edf1f8;
   border-radius: 50%
}

.rings:before {
   inset: 50px
}

.rings:after {
   inset: 105px
}

@keyframes spin {
   to {
      transform: translate(-50%, -50%) rotate(360deg)
   }
}

.hero {
   min-height: 100vh;
   padding: 150px 0 65px;
   background: radial-gradient(circle at 75% 18%, #dfe7ff 0, transparent 28%), radial-gradient(circle at 8% 72%, #ddfff7 0, transparent 25%), #fff;
   position: relative;
   overflow: hidden
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-transform: uppercase;
   letter-spacing: .15em;
   font-size: 11px;
   font-weight: 800;
   color: #667085
}

.eyebrow:before {
   content: "";
   width: 28px;
   height: 3px;
   border-radius: 5px;
   background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.hero h1 {
   font-size: clamp(48px, 6.5vw, 88px);
   line-height: .98;
   margin: 18px 0;
   max-width: 900px
}

.grad {
   background: linear-gradient(100deg, var(--blue), #775cff, var(--cyan));
   -webkit-background-clip: text;
   color: transparent
}

.hero p {
   font-size: 18px;
   line-height: 1.75;
   color: var(--muted);
   max-width: 700px
}

.btn-main {
   background: var(--ink);
   color: #fff;
   padding: 14px 21px;
   border-radius: 14px;
   font-weight: 800;
   border: 0;
   display: inline-block
}

.btn-main:hover {
   background: var(--blue);
   color: #fff;
   transform: translateY(-2px)
}

.btn-alt {
   background: #fff;
   color: var(--ink);
   border: 1px solid var(--line);
   padding: 13px 19px;
   border-radius: 14px;
   font-weight: 800;
   display: inline-block
}

.hero-visual {
   position: relative;
   height: 520px
}

.hero-card {
   position: absolute;
   background: #fff;
   border: 1px solid #e6eaf1;
   border-radius: 27px;
   box-shadow: var(--shadow);
   overflow: hidden
}

.video-card {
   inset: 20px 0 50px 15px;
   transform: rotate(2deg);
   z-index: 2
}

.video-card img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.video-card:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 35%, rgba(7, 17, 35, .65))
}

.play {
   position: absolute;
   z-index: 3;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 74px;
   height: 74px;
   border-radius: 50%;
   background: #fff;
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 25px;
   box-shadow: 0 20px 45px rgba(0, 0, 0, .2)
}

.hero-label {
   position: absolute;
   z-index: 4;
   left: 35px;
   bottom: 72px;
   color: #fff
}

.hero-label strong {
   font: 800 26px Manrope
}

.float-panel {
   position: absolute;
   z-index: 5;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 18px;
   box-shadow: var(--shadow);
   animation: float 5s ease-in-out infinite
}

.panel1 {
   right: -10px;
   top: 30px
}

.panel2 {
   left: -15px;
   bottom: 0;
   animation-delay: -2s
}

@keyframes float {
   50% {
      transform: translateY(-13px)
   }
}

.trust {
   background: #fff;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   padding: 25px 0;
   overflow: hidden
}

.trust-track {
   display: flex;
   gap: 55px;
   white-space: nowrap;
   animation: marq 25s linear infinite;
   color: #98a2b3;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .12em
}

@keyframes marq {
   to {
      transform: translateX(-50%)
   }
}

section {
   padding: 105px 0
}

.section-head {
   max-width: 760px
}

.section-head h2 {
   font-size: clamp(38px, 5vw, 64px);
   line-height: 1.02;
   margin: 15px 0
}

.section-head p {
   font-size: 17px;
   color: var(--muted);
   line-height: 1.8
}

.cardx {
   height: 100%;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 26px;
   padding: 28px;
   box-shadow: 0 12px 50px rgba(15, 23, 42, .05);
   transition: .4s;
   position: relative;
   overflow: hidden
}

.cardx:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow)
}

.icon {
   width: 56px;
   height: 56px;
   border-radius: 17px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, #eef2ff, #e8fcf7);
   color: var(--blue);
   font-size: 24px
}

.cardx p {
   color: var(--muted);
   line-height: 1.7
}

.visual-box {
   min-height: 500px;
   border-radius: 35px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #eaf0ff, #edfffa)
}

.shape {
   position: absolute;
   border-radius: 50%;
   filter: blur(2px)
}

.s1 {
   width: 370px;
   height: 370px;
   background: #cbd8ff;
   right: -110px;
   top: -100px
}

.s2 {
   width: 270px;
   height: 270px;
   background: #b9f5df;
   left: -80px;
   bottom: -100px
}

.mini {
   position: absolute;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   border-radius: 19px;
   padding: 20px
}

.m1 {
   top: 65px;
   left: 45px
}

.m2 {
   right: 45px;
   top: 180px
}

.m3 {
   left: 100px;
   bottom: 55px
}

.stats {
   background: var(--ink);
   color: #fff;
   border-radius: 38px;
   padding: 52px
}

.stats strong {
   font: 800 48px Manrope
}

.stats span {
   display: block;
   color: #aab4c4
}

.caseimg {
   height: 260px;
   border-radius: 21px;
   background-size: cover;
   background-position: center
}

.c1 {
   background-image: url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=85")
}

.c2 {
   background-image: url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1200&q=85")
}

.c3 {
   background-image: url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=85")
}

.pagehero {
   padding: 170px 0 90px;
   background: radial-gradient(circle at 80% 15%, #e1e9ff, transparent 30%), #fff
}

.pagehero h1 {
   font-size: clamp(48px, 6vw, 82px);
   line-height: 1
}

.service-row {
   padding: 80px 0;
   border-top: 1px solid var(--line)
}

.service-row:nth-child(even) {
   background: #fff
}

.service-art {
   min-height: 360px;
   border-radius: 30px;
   background: linear-gradient(135deg, #edf2ff, #e9fff8);
   position: relative;
   overflow: hidden
}

.art-card {
   position: absolute;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   border-radius: 18px;
   padding: 18px
}

.industries li {
   list-style: none;
   border-bottom: 1px solid var(--line);
   padding: 20px 0;
   font: 700 20px Manrope;
   display: flex;
   justify-content: space-between
}

.industries li i {
   color: var(--blue)
}

.cta {
   border-radius: 35px;
   padding: 65px;
   background: linear-gradient(120deg, #e9efff, #ecfff8);
   position: relative;
   overflow: hidden
}

.footer {
   background: #0d1726;
   color: #fff;
   padding: 75px 0 25px
}

.footer p,
.footer a {
   color: #aab4c4
}

.footer a {
   display: block;
   margin: 10px 0
}

.footer a:hover {
   color: #fff
}

.brand-light {
   color: #fff
}

.foot-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding-top: 22px;
   margin-top: 40px;
   display: flex;
   justify-content: space-between;
   font-size: 13px
}

.wa,
.top {
   position: fixed;
   right: 22px;
   z-index: 900;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 0;
   box-shadow: 0 15px 35px rgba(0, 0, 0, .18)
}

.wa {
   bottom: 22px;
   background: #25d366;
   color: #fff;
   font-size: 23px
}

.top {
   bottom: 82px;
   background: #fff;
   opacity: 0;
   pointer-events: none;
   transition: .3s
}

.top.show {
   opacity: 1;
   pointer-events: auto
}

.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: .8s
}

.reveal.show {
   opacity: 1;
   transform: none
}

.stagger>* {
   opacity: 0;
   transform: translateY(25px);
   transition: .7s
}

.stagger.show>* {
   opacity: 1;
   transform: none
}

.stagger.show>*:nth-child(2) {
   transition-delay: .08s
}

.stagger.show>*:nth-child(3) {
   transition-delay: .16s
}

.stagger.show>*:nth-child(4) {
   transition-delay: .24s
}

.form-control,
.form-select {
   padding: 14px;
   border-radius: 13px;
   border-color: var(--line)
}

@media(max-width:991px) {
   .nav-shell {
      top: 7px
   }

   .hero {
      padding-top: 125px
   }

   .hero-visual {
      height: 430px;
      margin-top: 20px
   }

   .video-card {
      inset: 10px 0 25px
   }

   .footer .brand {
      margin-bottom: 15px
   }
}

@media(max-width:767px) {
   section {
      padding: 75px 0
   }

   .hero h1 {
      font-size: 48px
   }

   .hero-visual {
      height: 370px
   }

   .float-panel {
      display: none
   }

   .stats {
      padding: 30px;
      border-radius: 28px
   }

   .stats strong {
      font-size: 36px
   }

   .foot-bottom {
      display: block
   }

   .foot-bottom span {
      display: block;
      margin: 8px 0
   }
}

/* ===== Infinity Work Solutions V5 Visual Layer ===== */
body {
   background: #f4f7fb
}

.hero-v5 {
   background: #f8fbff;
   min-height: 900px;
   padding-top: 165px
}

.hero-v5:before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(#d8e3f8 1px, transparent 1px);
   background-size: 28px 28px;
   opacity: .35;
   mask-image: linear-gradient(90deg, #000, transparent 75%)
}

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(2px);
   opacity: .55
}

.orb-a {
   width: 420px;
   height: 420px;
   background: #dce7ff;
   right: -140px;
   top: 100px
}

.orb-b {
   width: 280px;
   height: 280px;
   background: #d9fff2;
   left: -140px;
   bottom: -100px
}

.hero-proof {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 28px;
   color: #667085;
   font-size: 13px;
   font-weight: 700
}

.hero-proof i {
   color: #2ebd76;
   margin-right: 5px
}

.hero-slider-wrap {
   height: 580px
}

.hero-carousel {
   height: 100%;
   border-radius: 34px;
   overflow: visible;
   box-shadow: 0 35px 90px rgba(17, 38, 74, .18)
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
   height: 100%;
   border-radius: 34px;
   overflow: hidden
}

.hero-carousel img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-carousel .carousel-item:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(7, 18, 38, .03) 35%, rgba(7, 18, 38, .78))
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
   z-index: 6;
   width: 48px;
   height: 48px;
   top: auto;
   bottom: 25px;
   background: rgba(255, 255, 255, .9);
   border-radius: 50%;
   opacity: 1
}

.hero-carousel .carousel-control-prev {
   left: auto;
   right: 82px
}

.hero-carousel .carousel-control-next {
   right: 25px
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
   filter: invert(1) grayscale(1) brightness(.2);
   width: 18px
}

.hero-carousel .carousel-indicators {
   z-index: 7;
   bottom: 27px;
   left: 25px;
   right: auto;
   margin: 0
}

.hero-carousel .carousel-indicators button {
   width: 28px;
   height: 3px;
   border: 0;
   margin: 0 3px;
   background: #fff;
   opacity: .55
}

.hero-carousel .carousel-indicators button.active {
   opacity: 1;
   width: 48px
}

.slide-caption {
   position: absolute;
   z-index: 5;
   left: 34px;
   bottom: 34px;
   color: #fff;
   max-width: 70%
}

.slide-caption span {
   display: inline-grid;
   place-items: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .16);
   font-size: 11px;
   margin-bottom: 14px
}

.slide-caption strong {
   display: block;
   font: 800 29px Manrope;
   line-height: 1.05
}

.slide-caption small {
   display: block;
   margin-top: 8px;
   color: #dce5f5
}

.trust-v5 {
   padding: 20px 0;
   background: #fff
}

.trust-title {
   text-align: center;
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .16em;
   color: #98a2b3;
   margin-bottom: 12px
}

.visual-section {
   position: relative;
   overflow: hidden
}

.solutions-section {
   background: linear-gradient(180deg, #fff, #f4f8ff)
}

.solutions-section:after {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: #e5efff;
   right: -180px;
   bottom: -200px
}

.image-card {
   height: 430px;
   border-radius: 26px;
   overflow: hidden;
   display: block;
   position: relative;
   color: #fff;
   box-shadow: 0 18px 55px rgba(20, 40, 80, .12);
   transition: .45s
}

.image-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .6s
}

.image-card:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 25%, rgba(4, 15, 31, .9))
}

.image-card>div {
   position: absolute;
   z-index: 2;
   left: 24px;
   right: 24px;
   bottom: 22px
}

.image-card small {
   font-size: 10px;
   letter-spacing: .16em;
   font-weight: 800;
   color: #cbd8ff
}

.image-card h4 {
   font-size: 25px;
   margin: 8px 0 6px
}

.image-card p {
   font-size: 13px;
   color: #d9e1ee;
   margin: 0;
   line-height: 1.5
}

.image-card i {
   position: absolute;
   right: 0;
   bottom: 2px;
   font-size: 20px
}

.image-card:hover {
   transform: translateY(-12px);
   box-shadow: 0 30px 70px rgba(20, 40, 80, .2);
   color: #fff
}

.image-card:hover img {
   transform: scale(1.08)
}

.split-image-section {
   background: #fff
}

.editorial-image {
   height: 590px;
   border-radius: 35px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 30px 80px rgba(17, 38, 74, .14)
}

.editorial-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.editorial-image:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 55%, rgba(8, 21, 42, .65))
}

.image-badge {
   position: absolute;
   z-index: 2;
   left: 28px;
   bottom: 28px;
   background: rgba(255, 255, 255, .94);
   backdrop-filter: blur(12px);
   border-radius: 18px;
   padding: 18px 22px;
   display: flex;
   align-items: center;
   gap: 12px
}

.image-badge strong {
   font: 800 36px Manrope;
   color: var(--blue)
}

.image-badge span {
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em
}

.feature-list {
   margin-top: 25px
}

.feature-list>div {
   display: flex;
   gap: 14px;
   padding: 15px 0;
   border-bottom: 1px solid var(--line)
}

.feature-list i {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #eef3ff;
   color: var(--blue);
   flex: 0 0 auto
}

.feature-list strong,
.feature-list small {
   display: block
}

.feature-list small {
   color: #667085;
   margin-top: 3px
}

.metrics-section {
   padding: 70px 0;
   background: #fff
}

.metrics-grid {
   background: linear-gradient(110deg, #0b1628, #172e52);
   border-radius: 34px;
   padding: 55px 35px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   color: #fff;
   position: relative;
   overflow: hidden
}

.metrics-grid:after {
   content: "";
   position: absolute;
   width: 450px;
   height: 450px;
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 50%;
   right: -160px;
   top: -220px
}

.metrics-grid>div {
   text-align: center;
   position: relative;
   z-index: 1;
   border-right: 1px solid rgba(255, 255, 255, .12)
}

.metrics-grid>div:last-child {
   border: 0
}

.metrics-grid strong {
   font: 800 50px Manrope;
   display: block
}

.metrics-grid span {
   color: #b5c1d4;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: 10px;
   font-weight: 800
}

.industries-visual {
   background: #f1f5fa
}

.industries-visual h2 {
   font-size: clamp(38px, 5vw, 62px);
   max-width: 780px
}

.industry-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 16px
}

.industry-tile {
   height: 270px;
   border-radius: 24px;
   overflow: hidden;
   position: relative;
   display: flex;
   align-items: flex-end;
   padding: 25px;
   color: #fff;
   background-size: cover;
   background-position: center;
   transition: .45s
}

.industry-tile:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 25%, rgba(5, 15, 30, .82))
}

.industry-tile>div,
.industry-tile>span {
   position: relative;
   z-index: 2;
   left: 20px;
   top: -10px;
}

.industry-tile>span {
   position: absolute;
   top: 20px;
   left: 22px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .12em;
   opacity: .8
}

.industry-tile small {
   font-size: 9px;
   letter-spacing: .18em;
   font-weight: 800
}

.industry-tile h3 {
   font-size: 23px;
   margin: 5px 0 0
}

.tile-1 {
   grid-column: span 4;
   background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1000&q=85')
}

.tile-2 {
   grid-column: span 4;
   background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000&q=85')
}

.tile-3 {
   grid-column: span 4;
   background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1000&q=85')
}

.tile-4 {
   grid-column: span 6;
   background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1200&q=85')
}

.tile-5 {
   grid-column: span 3;
   background-image: url('https://images.unsplash.com/photo-1492724441997-5dc865305da7?auto=format&fit=crop&w=900&q=85')
}

.tile-6 {
   grid-column: span 3;
   background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=900&q=85')
}

.industry-tile:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 55px rgba(15, 35, 70, .2);
   color: #fff
}

.growth-band {
   position: relative;
   background: #0a1527;
   color: #fff;
   overflow: hidden
}

.growth-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 19, 38, .98), rgba(7, 19, 38, .76)), url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1800&q=85') center/cover
}

.growth-band h2 {
   font-size: clamp(42px, 5vw, 68px);
   line-height: 1.02
}

.growth-band p {
   color: #b9c5d7;
   font-size: 18px;
   line-height: 1.8;
   max-width: 680px
}

.eyebrow.light {
   color: #c5d2e5
}

.benefit-stack {
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 25px;
   padding: 12px;
   backdrop-filter: blur(10px)
}

.benefit-stack>div {
   display: flex;
   gap: 15px;
   padding: 20px;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.benefit-stack>div:last-child {
   border: 0
}

.benefit-stack i {
   width: 44px;
   height: 44px;
   border-radius: 13px;
   background: #fff;
   color: var(--blue);
   display: grid;
   place-items: center;
   flex: 0 0 auto
}

.benefit-stack strong,
.benefit-stack small {
   display: block
}

.benefit-stack small {
   color: #b9c5d7;
   margin-top: 3px
}

.case-preview {
   background: #fff
}

.case-feature,
.mini-case {
   display: block;
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   color: #fff;
   min-height: 520px;
   box-shadow: 0 22px 60px rgba(15, 30, 60, .12)
}

.case-feature img,
.mini-case img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s
}

.case-feature:after,
.mini-case:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 25%, rgba(5, 15, 30, .9))
}

.case-feature>div,
.mini-case>div {
   position: absolute;
   z-index: 2;
   left: 30px;
   right: 30px;
   bottom: 30px
}

.case-feature small,
.mini-case small {
   font-size: 10px;
   letter-spacing: .16em;
   font-weight: 800
}

.case-feature h3 {
   font-size: 35px;
   max-width: 650px
}

.case-feature span {
   font-weight: 800
}

.case-feature:hover img,
.mini-case:hover img {
   transform: scale(1.06)
}

.mini-case {
   min-height: 520px
}

.mini-case h4 {
   font-size: 26px
}

.mini-case a {
   color: #fff;
   font-weight: 800
}

.cta-image {
   background: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1800&q=90') center/cover;
   padding: 110px 0
}

.cta-overlay {
   background: linear-gradient(110deg, rgba(7, 20, 40, .92), rgba(19, 48, 82, .72));
   border-radius: 32px;
   padding: 65px;
   color: #fff;
   backdrop-filter: blur(4px)
}

.cta-overlay h2 {
   font-size: clamp(40px, 5vw, 50px);
   line-height: 1.02;
   max-width: 850px;
   margin: 18px 0 30px
}

.btn-light-custom {
   display: inline-block;
   background: #fff;
   color: #0d1726;
   border-radius: 14px;
   padding: 15px 22px;
   font-weight: 800
}

.btn-light-custom:hover {
   background: #dfe8ff;
   color: #0d1726
}

.pagehero {
   position: relative;
   min-height: 540px;
   display: flex;
   align-items: normal;
   overflow: hidden;
   background: #0d1726 !important;
   color: #fff;
   padding: 180px 0 90px
}

.pagehero:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 18, 35, .94), rgba(7, 18, 35, .62)), url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1900&q=90') center/cover
}

.pagehero:after {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 50%;
   right: -160px;
   top: -150px;
   box-shadow: 0 0 0 50px rgba(255, 255, 255, .025), 0 0 0 100px rgba(255, 255, 255, .02)
}

.pagehero .container {
   position: relative;
   z-index: 2
}

.pagehero h1 {
   font-size: clamp(48px, 6vw, 82px);
   max-width: 1000px
}

.pagehero .eyebrow {
   color: #c6d3e8
}

.pagehero .lead {
   color: #d1d9e6 !important;
   max-width: 760px;
   line-height: 1.8
}

.service-row {
   position: relative;
   overflow: hidden
}

.service-art {
   background-size: cover !important;
   background-position: center !important;
   box-shadow: 0 25px 65px rgba(15, 30, 60, .15)
}

.service-row:nth-of-type(2) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .18), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(3) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(4) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(5) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(6) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(7) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=85') !important
}

.service-row:nth-of-type(8) .service-art {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .2), rgba(7, 20, 40, .08)), url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=1200&q=85') !important
}

.service-art:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(7, 20, 40, .03), rgba(7, 20, 40, .35));
   pointer-events: none
}

.service-art .art-card {
   z-index: 2
}

.visual-box {
   background-size: cover;
   background-position: center
}

.industries-visual .visual-box {
   background-image: linear-gradient(135deg, rgba(7, 20, 40, .15), rgba(7, 20, 40, .03)), url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1200&q=85')
}

.cardx {
   box-shadow: 0 16px 50px rgba(15, 30, 60, .07)
}

.cardx:before {
   content: "";
   position: absolute;
   inset: auto -40px -70px auto;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   background: #edf3ff;
   opacity: .7
}

.form-control:focus,
.form-select:focus {
   box-shadow: 0 0 0 4px rgba(54, 92, 245, .1);
   border-color: #9fb0ff
}

@media(max-width:991px) {
   .hero-v5 {
      padding-top: 135px;
      min-height: auto
   }

   .hero-slider-wrap {
      height: 500px
   }

   .metrics-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px
   }

   .metrics-grid>div:nth-child(2) {
      border: 0
   }

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

   .industry-tile,
   .tile-1,
   .tile-2,
   .tile-3,
   .tile-4,
   .tile-5,
   .tile-6 {
      grid-column: span 1
   }

   .tile-4 {
      grid-column: span 2
   }

   .pagehero {
      min-height: 470px;
      padding-top: 150px
   }
}

@media(max-width:767px) {
   .hero-v5 {
      padding-top: 120px
   }

   .hero-slider-wrap {
      height: 420px
   }

   .slide-caption strong {
      font-size: 22px
   }

   .hero-proof {
      gap: 10px;
      flex-direction: column
   }

   .metrics-grid {
      grid-template-columns: 1fr 1fr;
      padding: 35px 18px
   }

   .metrics-grid strong {
      font-size: 36px
   }

   .metrics-grid>div {
      border: 0 !important
   }

   .industry-grid {
      grid-template-columns: 1fr
   }

   .industry-tile,
   .tile-4 {
      grid-column: span 1;
      height: 230px
   }

   .editorial-image {
      height: 420px
   }

   .cta-overlay {
      padding: 38px 25px
   }

   .pagehero h1 {
      font-size: 48px
   }
}

/* V6 visual direction */
.opening-dark {
   background: #07111f;
   color: #fff
}

.opening-dark .rings {
   border-color: rgba(255, 255, 255, .1)
}

.opening-dark .rings:before,
.opening-dark .rings:after {
   border-color: rgba(255, 255, 255, .08)
}

.opening-dark .opening-glow {
   position: absolute;
   width: 70vw;
   height: 70vw;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(54, 92, 245, .22), transparent 62%);
   filter: blur(5px)
}

.opening-dark h2 {
   color: #fff
}

.opening-dark p {
   color: #aebbd0
}

.opening-dark .start {
   background: #fff;
   color: #07111f
}

.opening-dark .start:hover {
   background: #dfe8ff
}

.hero-full {
   height: 100vh;
   min-height: 680px;
   padding: 0 !important;
   background: #07111f
}

.hero-full .carousel,
.hero-full .carousel-inner,
.hero-full .carousel-item {
   height: 100%
}

.hero-full .carousel-item>img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(5, 14, 29, .88) 0%, rgba(5, 14, 29, .55) 48%, rgba(5, 14, 29, .2) 100%)
}

.hero-content {
   position: absolute;
   z-index: 3;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   max-width: 1320px;
   color: #fff
}

.hero-content h1 {
   font-size: clamp(52px, 7vw, 100px);
   line-height: .94;
   max-width: 900px;
   color: #fff;
   margin: 20px 0
}

.hero-content h1 span {
   background: linear-gradient(90deg, #fff, #9fe9ff);
   -webkit-background-clip: text;
   color: transparent
}

.hero-content p {
   color: #e1e8f2;
   max-width: 700px;
   font-size: 18px;
   line-height: 1.8
}

.eyebrow.light {
   color: #d7e2f0
}

.btn-white {
   background: #fff;
   color: #07111f
}

.btn-white:hover {
   background: #dfe8ff;
   color: #07111f
}

.btn-glass {
   background: rgba(255, 255, 255, .1);
   border-color: rgba(255, 255, 255, .3);
   color: #fff;
   backdrop-filter: blur(10px)
}

.btn-glass:hover {
   background: #fff;
   color: #07111f
}

.hero-full .carousel-control-prev,
.hero-full .carousel-control-next {
   width: 8%;
   z-index: 5
}

.hero-full .carousel-indicators {
   z-index: 6;
   bottom: 28px
}

.hero-full .carousel-indicators button {
   width: 55px;
   height: 3px;
   border: 0
}

.hero-full .carousel-item {
   transition: transform .9s ease-in-out
}

.trust-title {
   text-align: center;
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .16em;
   color: #667085;
   margin-bottom: 12px
}

.quality-band {
   background: linear-gradient(135deg, #eef3ff, #e9fff8)
}

.quality-band h2 {
   font-size: clamp(38px, 5vw, 64px)
}

.quality-band p {
   color: #667085;
   max-width: 700px;
   font-size: 17px;
   line-height: 1.8
}

.quality-cards {
   background: #fff;
   border-radius: 26px;
   padding: 12px;
   box-shadow: var(--shadow)
}

.quality-cards>div {
   display: grid;
   grid-template-columns: 48px 1fr;
   column-gap: 13px;
   padding: 18px;
   border-bottom: 1px solid var(--line)
}

.quality-cards>div:last-child {
   border: 0
}

.quality-cards i {
   grid-row: span 2;
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: #eef3ff;
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 20px
}

.quality-cards strong,
.quality-cards span {
   display: block
}

.quality-cards span {
   color: #667085;
   font-size: 14px;
   margin-top: 3px
}

.industry-tile {
   padding: 0 !important
}

.industry-tile img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .6s
}

.industry-tile:after {
   z-index: 1
}

.industry-tile:hover img {
   transform: scale(1.08)
}

.industry-tile>span,
.industry-tile>div {
   z-index: 2
}

.industry-tile {
   min-height: 280px
}

.industry-grid {
   grid-template-columns: repeat(12, 1fr)
}

.industry-tile:nth-child(1),
.industry-tile:nth-child(2),
.industry-tile:nth-child(3) {
   grid-column: span 4
}

.industry-tile:nth-child(4),
.industry-tile:nth-child(5) {
   grid-column: span 6
}

.industry-tile:nth-child(6),
.industry-tile:nth-child(7),
.industry-tile:nth-child(8),
.industry-tile:nth-child(9) {
   grid-column: span 3
}

.rpo-story {
   background: #07111f;
   color: #fff;
   overflow: hidden
}

.rpo-story h2 {
   font-size: clamp(40px, 5vw, 50px);
   line-height: 1.02
}

.rpo-story p {
   color: #b8c5d7;
   font-size: 17px;
   line-height: 1.85
}

.story-image {
   width: 100%;
   height: 620px;
   object-fit: cover;
   border-radius: 32px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.why-section {
   background: #fff
}

.why-section h2 {
   font-size: clamp(40px, 5vw, 65px);
   line-height: 1.03
}

.why-section .why-list {
   background: #f4f7fb;
   border-radius: 28px;
   padding: 12px
}

.why-list>div {
   display: flex;
   gap: 16px;
   padding: 22px;
   border-bottom: 1px solid #e2e8f0
}

.why-list>div:last-child {
   border: 0
}

.why-list i {
   width: 48px;
   height: 48px;
   border-radius: 15px;
   background: #fff;
   color: var(--blue);
   display: grid;
   place-items: center;
   flex: 0 0 auto;
   box-shadow: 0 8px 25px rgba(15, 30, 60, .06)
}

.why-list strong,
.why-list small {
   display: block
}

.why-list small {
   color: #667085;
   margin-top: 4px
}

.mega-menu {
   min-width: 330px;
   max-height: 70vh;
   overflow: auto
}

.mega-menu h6 {
   padding: 8px 12px;
   color: #98a2b3;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: 10px
}

.nav-shell .navbar {
   padding: 9px 14px
}

.pagehero {
   min-height: 620px;
   padding: 180px 0 95px
}

.pagehero:before {
   background: linear-gradient(90deg, rgba(5, 15, 30, .9), rgba(5, 15, 30, .55)), url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=2200&q=90') center/cover
}

.pagehero:after {
   border-color: rgba(255, 255, 255, .1)
}

.inner-content p {
   font-size: 17px;
   line-height: 1.9;
   color: #667085
}

.inner-content h2 {
   font-size: clamp(36px, 4.5vw, 58px)
}

.long-copy {
   max-width: 920px
}

.info-band {
   background: #f0f5fb
}

.solution-hero-image {
   height: 500px;
   width: 100%;
   object-fit: cover;
   border-radius: 30px
}

.solution-checks {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   margin-top: 25px
}

.solution-checks div {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 18px;
   font-weight: 700
}

.solution-checks i {
   color: var(--blue);
   margin-right: 8px
}

.faq-item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 16px;
   margin-bottom: 12px;
   padding: 20px 22px
}

.faq-item h5 {
   margin: 0
}

.faq-item p {
   margin: 10px 0 0;
   color: #667085;
   line-height: 1.7
}

.industry-detail {
   background: #fff
}

.industry-detail .role-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px
}

.industry-detail .role-list div {
   padding: 20px;
   border-radius: 18px;
   background: #f4f7fb;
   font-weight: 700
}

.footer h6 {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .14em;
   color: #fff
}

.footer .brand small {
   color: #8ea7ff
}

@media(max-width:991px) {
   .hero-full {
      height: 850px;
      min-height: 850px
   }

   .hero-content {
      padding: 0 30px
   }

   .industry-tile:nth-child(n) {
      grid-column: span 6
   }

   .pagehero {
      min-height: 500px;
      padding-top: 160px
   }

   .story-image {
      height: 450px
   }

   .industry-detail .role-list {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:767px) {
   .hero-full {
      height: 760px;
      min-height: 760px
   }

   .hero-content {
      padding: 0 22px
   }

   .hero-content h1 {
      font-size: 50px
   }

   .hero-content p {
      font-size: 16px
   }

   .industry-tile:nth-child(n) {
      grid-column: span 12
   }

   .solution-checks {
      grid-template-columns: 1fr
   }

   .industry-detail .role-list {
      grid-template-columns: 1fr
   }

   .pagehero {
      min-height: 470px;
      padding-top: 145px
   }

   .story-image {
      height: 360px
   }
}

/* V7 polish fixes */
.mega-menu {
   min-width: 680px;
   max-width: calc(100vw - 32px);
   max-height: none !important;
   overflow: visible !important;
   padding: 14px;
   border: 0;
   border-radius: 20px;
   box-shadow: 0 24px 70px rgba(15, 23, 42, .16)
}

.mega-title {
   list-style: none
}

.mega-title h6 {
   padding: 4px 10px 10px !important
}

.mega-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px 8px
}

.mega-grid .dropdown-item {
   padding: 11px 10px;
   border-radius: 10px;
   white-space: normal
}

.mega-grid .dropdown-item:hover {
   background: #eef3ff;
   color: var(--blue)
}

.hero-content h1 {
   font-size: clamp(44px, 5.5vw, 78px);
   line-height: .98;
   max-width: 850px
}

.hero-full .carousel-control-prev,
.hero-full .carousel-control-next {
   display: none
}

.hero-full .carousel-indicators {
   bottom: 30px
}

.ticker-intro {
   background: linear-gradient(135deg, #07111f, #102444);
   padding: 18px 0;
   border-top: 1px solid rgba(255, 255, 255, .06);
   border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.ticker-intro .trust-title {
   color: #dbe7f5;
   margin: 0
}

.trust-v5 {
   background: #07111f !important
}

.trust-track {
   background: #07111f !important;
   color: #b8c8dc !important;
   border-top: 1px solid rgba(255, 255, 255, .06);
   border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.footer {
   padding: 78px 0 22px !important;
   background: linear-gradient(145deg, #07111f 0%, #0b1a2d 55%, #102642 100%) !important;
   position: relative;
   overflow: hidden
}

.footer:before {
   content: "";
   position: absolute;
   width: 520px;
   height: 520px;
   right: -260px;
   top: -280px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(54, 92, 245, .18), transparent 68%);
   pointer-events: none
}

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

.footer .row>div {
   position: relative
}

.footer p,
.footer a {
   color: #aebbd0
}

.footer a:hover {
   color: #fff
}

.footer-socials {
   display: flex;
   gap: 10px;
   margin-top: 18px
}

.footer-socials a {
   width: 40px;
   height: 40px;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 12px;
   display: grid;
   place-items: center;
   color: #fff !important;
   background: rgba(255, 255, 255, .05);
   transition: .25s
}

.footer-socials a:hover {
   background: #fff;
   color: #07111f !important;
   transform: translateY(-3px)
}

.foot-bottom {
   margin-top: 50px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, .12);
   display: flex;
   justify-content: space-between;
   gap: 20px;
   align-items: center
}

.foot-bottom a {
   color: #aebbd0
}

.pagehero h1 {
   font-size: clamp(42px, 5vw, 68px);
   line-height: 1.02
}

.pagehero {
   min-height: 450px
}

.pagehero .lead {
   font-size: 18px;
   max-width: 720px
}

.support-section {
   background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 48%, #eefcf8 100%);
   padding: 105px 0
}

.support-heading {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
   gap: 55px;
   align-items: end
}

.support-heading h2 {
   font-size: clamp(38px, 4.7vw, 62px);
   line-height: 1.04;
   margin-top: 14px
}

.support-heading>p {
   font-size: 17px;
   line-height: 1.85;
   color: #667085;
   margin: 0
}

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

.support-grid article {
   position: relative;
   min-height: 280px;
   padding: 30px;
   border: 1px solid rgba(54, 92, 245, .12);
   border-radius: 24px;
   background: rgba(255, 255, 255, .88);
   box-shadow: 0 18px 45px rgba(15, 30, 60, .07);
   overflow: hidden;
   transition: .3s
}

.support-grid article:after {
   content: "";
   position: absolute;
   width: 130px;
   height: 130px;
   right: -55px;
   bottom: -55px;
   border-radius: 50%;
   background: #e8efff
}

.support-grid article:hover {
   transform: translateY(-6px);
   box-shadow: 0 28px 65px rgba(15, 30, 60, .12)
}

.support-grid article>span {
   font-size: 12px;
   font-weight: 800;
   color: #8a97ab;
   letter-spacing: .12em
}

.support-grid article>i {
   display: grid;
   place-items: center;
   width: 50px;
   height: 50px;
   border-radius: 15px;
   background: #eef3ff;
   color: var(--blue);
   font-size: 21px;
   margin: 28px 0 18px
}

.support-grid article h4 {
   font-size: 22px;
   position: relative;
   z-index: 1
}

.support-grid article p {
   color: #667085;
   line-height: 1.72;
   margin: 10px 0 0;
   position: relative;
   z-index: 1
}

.contact-main {
   padding: 100px 0;
   background: linear-gradient(135deg, #f7f9fc, #edf4ff)
}

.contact-form-card {
   height: 100%;
   background: #fff;
   border-radius: 30px;
   padding: 42px;
   box-shadow: 0 25px 80px rgba(15, 30, 60, .1)
}

.contact-form-card h2 {
   font-size: clamp(36px, 4vw, 52px)
}

.contact-form-card .form-control,
.contact-form-card .form-select {
   min-height: 54px;
   border: 1px solid #dfe5ee;
   border-radius: 12px;
   padding: 13px 15px
}

.contact-form-card textarea.form-control {
   min-height: 150px
}

.contact-info-stack {
   display: flex;
   flex-direction: column;
   gap: 14px;
   height: 100%
}

.contact-info-card {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   padding: 24px;
   background: #fff;
   border-radius: 22px;
   box-shadow: 0 15px 45px rgba(15, 30, 60, .07)
}

.contact-info-card .icon {
   flex: 0 0 52px
}

.contact-info-card small {
   display: block;
   color: #8a97ab;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-weight: 800;
   font-size: 10px;
   margin-bottom: 5px
}

.contact-info-card a {
   font-weight: 700;
   color: var(--ink)
}

.contact-info-card p {
   margin: 0;
   color: #667085;
   line-height: 1.6
}

.contact-quick {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   background: #07111f;
   border-radius: 24px;
   padding: 15px
}

.contact-quick div {
   padding: 16px;
   border-radius: 16px;
   background: rgba(255, 255, 255, .06);
   color: #fff;
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 14px
}

.contact-quick i {
   color: #b9ccff
}

.consent {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 12px;
   color: #667085;
   line-height: 1.55
}

.consent input {
   margin-top: 4px
}

.consent a {
   color: var(--blue);
   font-weight: 700
}

.contact-help {
   padding: 100px 0;
   background: #fff
}

.contact-help h2 {
   font-size: clamp(40px, 5vw, 64px)
}

.contact-help>.container .col-lg-5>p {
   color: #667085;
   font-size: 17px;
   line-height: 1.8
}

.contact-faq {
   background: #f4f7fb;
   border-radius: 28px;
   padding: 10px
}

.contact-faq>div {
   padding: 22px 24px;
   border-bottom: 1px solid #dde5ef
}

.contact-faq>div:last-child {
   border: 0
}

.contact-faq h5 {
   font-size: 19px
}

.contact-faq p {
   color: #667085;
   line-height: 1.7;
   margin: 8px 0 0
}

.contact-map {
   padding: 0 0 100px;
   background: #fff
}

.map-card {
   min-height: 470px;
   border-radius: 32px;
   overflow: hidden;
   background: #07111f;
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   box-shadow: 0 25px 80px rgba(15, 30, 60, .14)
}

.map-copy {
   padding: 60px;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.map-copy h2 {
   font-size: clamp(38px, 4vw, 58px)
}

.map-copy p {
   color: #b8c5d7;
   line-height: 1.8;
   max-width: 430px
}

.map-card iframe {
   width: 100%;
   height: 100%;
   min-height: 470px;
   border: 0;
   filter: saturate(.8)
}

@media(max-width:991px) {
   .mega-menu {
      min-width: 100%;
      box-shadow: none;
      border-radius: 12px
   }

   .mega-grid {
      grid-template-columns: 1fr
   }

   .support-heading {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .support-grid {
      grid-template-columns: 1fr 1fr
   }

   .foot-bottom {
      flex-direction: column;
      align-items: flex-start
   }

   .map-card {
      grid-template-columns: 1fr
   }

   .map-copy {
      padding: 45px
   }

   .map-card iframe {
      min-height: 350px
   }

   .contact-main,
   .contact-help {
      padding: 75px 0
   }
}

@media(max-width:767px) {
   .nav-shell {
      top: 8px
   }

   .navbar {
      border-radius: 15px
   }

   .mega-menu {
      padding: 8px
   }

   .mega-grid .dropdown-item {
      padding: 9px 10px;
      font-size: 14px
   }

   .hero-full {
      height: 720px;
      min-height: 720px
   }

   .hero-content {
      padding: 0 20px
   }

   .hero-content h1 {
      font-size: 42px;
      line-height: 1.02
   }

   .hero-content p {
      font-size: 15px;
      line-height: 1.65
   }

   .hero-full .carousel-indicators {
      bottom: 18px
   }

   .ticker-intro {
      padding: 14px 0
   }

   .ticker-intro .trust-title {
      font-size: 10px
   }

   .trust-track {
      font-size: 12px
   }

   .pagehero {
      min-height: 430px;
      padding-top: 135px
   }

   .pagehero h1 {
      font-size: 43px
   }

   .pagehero .lead {
      font-size: 16px
   }

   .support-section {
      padding: 72px 0
   }

   .support-heading h2 {
      font-size: 38px
   }

   .support-grid {
      grid-template-columns: 1fr
   }

   .support-grid article {
      min-height: auto
   }

   .contact-form-card {
      padding: 25px;
      border-radius: 22px
   }

   .contact-main {
      padding: 60px 0
   }

   .contact-quick {
      grid-template-columns: 1fr
   }

   .contact-help {
      padding: 65px 0
   }

   .contact-map {
      padding-bottom: 65px
   }

   .map-copy {
      padding: 35px 25px
   }

   .map-card,
   .map-card iframe {
      min-height: 420px
   }

   .footer {
      padding-top: 60px !important
   }

   .foot-bottom {
      margin-top: 35px;
      font-size: 13px
   }

   .footer-socials {
      margin-bottom: 5px
   }
}

/* =========================
   V8 PREMIUM FOOTER
   ========================= */
.footer {
   padding: 88px 0 24px !important;
   background: linear-gradient(145deg, #06101e 0%, #0a1829 48%, #0d2138 100%) !important;
   color: #aebbd0;
   position: relative;
   overflow: hidden
}

.footer:before {
   content: "";
   position: absolute;
   inset: auto 0 0 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent)
}

.footer-glow {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(2px)
}

.footer-glow-one {
   width: 520px;
   height: 520px;
   right: -250px;
   top: -300px;
   background: radial-gradient(circle, rgba(54, 92, 245, .20), transparent 68%)
}

.footer-glow-two {
   width: 420px;
   height: 420px;
   left: -260px;
   bottom: -280px;
   background: radial-gradient(circle, rgba(24, 198, 181, .12), transparent 68%)
}

.footer-main {
   position: relative;
   z-index: 2;
   padding-bottom: 58px
}

.footer-brand {
   color: #fff !important
}

.footer-brand .mark {
   box-shadow: 0 12px 30px rgba(54, 92, 245, .28)
}

.footer-about {
   max-width: 390px;
   margin: 22px 0 22px;
   color: #aebbd0 !important;
   font-size: 15px;
   line-height: 1.85
}

.footer h6 {
   margin: 7px 0 18px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .16em;
   color: #fff;
   font-weight: 800
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.footer-links a {
   color: #aebbd0;
   font-size: 14px;
   line-height: 0.3;
   transition: .25s
}

.footer-links a:hover {
   color: #fff;
   transform: translateX(3px)
}

.footer-socials {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 8px
}

.footer-socials a {
   width: 42px;
   height: 42px;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 13px;
   display: grid;
   place-items: center;
   color: #fff !important;
   background: rgba(255, 255, 255, .055);
   transition: .28s;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .10)
}

.footer-socials a:hover {
   background: #fff;
   color: #07111f !important;
   border-color: #fff;
   transform: translateY(-4px)
}

.footer-contact {
   display: flex;
   flex-direction: column;
   gap: 15px
}

.footer-contact>a,
.footer-address {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   color: #aebbd0 !important;
   font-size: 14px;
   line-height: 1.55
}

.footer-contact>a:hover {
   color: #fff !important
}

.footer-contact i,
.footer-address i {
   width: 19px;
   flex: 0 0 19px;
   color: #7f9cff;
   font-size: 16px;
   margin-top: 2px
}

.footer-contact-btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 24px;
   padding: 12px 17px;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 12px;
   color: #fff !important;
   background: rgba(255, 255, 255, .06);
   font-size: 14px;
   font-weight: 800;
   transition: .25s
}

.footer-contact-btn:hover {
   background: #fff;
   color: #07111f !important;
   transform: translateY(-2px)
}

.footer-bottom {
   position: relative;
   z-index: 2;
   border-top: 1px solid rgba(255, 255, 255, .12);
   padding-top: 22px
}

.footer-bottom-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px
}

.footer-copy {
   font-size: 13px;
   color: #8f9eb4
}

.footer-copy strong {
   color: #cdd6e4;
   font-weight: 700
}

.footer-legal {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 13px
}

.footer-legal span {
   color: #53647b
}

.footer-legal a {
   color: #aebbd0 !important;
   transition: .2s
}

.footer-legal a:hover {
   color: #fff !important
}

.footer-developer {
   margin-top: 17px;
   padding-top: 17px;
   border-top: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   text-align: center;
   font-size: 12px;
   color: #77879d
}

.footer-developer a {
   color: #dce5f4 !important;
   font-weight: 800;
   letter-spacing: .02em
}

.footer-developer a:hover {
   color: #fff !important
}

@media(max-width:991px) {
   .footer-main {
      padding-bottom: 45px
   }

   .footer-about {
      max-width: 520px
   }

   .footer-bottom-row {
      align-items: flex-start;
      flex-direction: column
   }

   .footer-legal {
      justify-content: flex-start
   }
}

@media(max-width:767px) {
   .footer {
      padding: 62px 0 20px !important
   }

   .footer-main {
      padding-bottom: 38px
   }

   .footer h6 {
      margin-top: 10px
   }

   .footer-socials a {
      width: 40px;
      height: 40px
   }

   .footer-bottom-row {
      gap: 14px
   }

   .footer-legal {
      gap: 7px;
      font-size: 12px
   }

   .footer-copy {
      font-size: 12px;
      line-height: 1.6
   }

   .footer-developer {
      flex-direction: column;
      gap: 3px;
      font-size: 11px;
      line-height: 1.5
   }
}