/* ============================================================
   Core5 — homepage only (loaded by index.html after style.css)
   Section order: emergence → hero → partners → caps → manifesto →
   services carousel → stats → topology → why → stories → testimonials →
   clients → finale
   ============================================================ */

 .on-dark {
   color: var(--c-on-dark);
 }

 .on-dark h2,
 .on-dark h3 {
   color: #fff;
 }

 .on-dark .eyebrow {
   color: var(--c-gold-light);
 }

 .sb-head {
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   gap: 64px;
   align-items: end;
   margin-bottom: 56px;
 }

 .sb-head h2 {
   font-size: clamp(34px, 4.2vw, 58px);
   font-weight: 500;
   letter-spacing: -0.045em;
   line-height: 1.02;
 }

 .sb-head p {
   font-size: 17px;
   line-height: 1.7;
   max-width: 440px;
 }

 /* ============================================================
   00 · EMERGENCE — pinned, scroll-driven brand reveal
   ============================================================ */
 .emerge {
   position: relative;
   height: 360vh;
   background: var(--c-night);
 }

 .emerge-stage {
   position: sticky;
   top: var(--header-h);
   height: calc(100vh - var(--header-h));
   height: calc(100svh - var(--header-h));
   overflow: hidden;
   isolation: isolate;
   --g: .3;
   --l: 0;
 }

 .emerge-grid {
   position: absolute;
   inset: -2px;
   z-index: -2;
   opacity: var(--g);
   background-image:
     linear-gradient(rgba(199, 207, 227, 0.06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(199, 207, 227, 0.06) 1px, transparent 1px);
   background-size: 80px 80px;
   background-position: center center;
   -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 80%);
   mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 80%);
 }

 .emerge-light {
   position: absolute;
   inset: 0;
   z-index: -1;
   opacity: var(--l);
   background:
     radial-gradient(520px 520px at 50% 50%, rgba(18, 48, 105, 0.9), transparent 70%),
     radial-gradient(300px 300px at 50% 50%, rgba(201, 147, 42, 0.22), transparent 70%);
 }

 .emerge-world {
   position: absolute;
   inset: 0;
   perspective: 1500px;
   transform-style: preserve-3d;
 }

 .emerge-mech {
   position: absolute;
   left: 50%;
   top: 50%;
   width: min(86vh, 86vw);
   height: min(86vh, 86vw);
   margin: calc(min(86vh, 86vw) / -2) 0 0 calc(min(86vh, 86vw) / -2);
   overflow: visible;
   transform-origin: 50% 50%;
 }

 .emerge-mech .ring-base {
   fill: none;
   stroke: rgba(199, 207, 227, 0.16);
   stroke-width: 1;
 }

 .emerge-mech .ring-tick {
   stroke: rgba(199, 207, 227, 0.32);
   stroke-width: 1;
 }

 .emerge-mech .ring-tick.major {
   stroke: rgba(240, 176, 32, 0.8);
   stroke-width: 1.4;
 }

 .emerge-mech .ring-seg {
   fill: none;
   stroke: var(--c-gold-light);
   stroke-width: 2.4;
   stroke-linecap: round;
 }

 .emerge-mech .ring-seg.thin {
   stroke: rgba(240, 176, 32, 0.45);
   stroke-width: 1;
 }

 .emerge-mech .ring-node {
   fill: var(--c-night);
   stroke: var(--c-gold-light);
   stroke-width: 1.2;
 }

 .emerge-mech .ring-node.solid {
   fill: var(--c-gold-light);
 }

 .emerge-mech .ring-label {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .2em;
   fill: rgba(199, 207, 227, 0.55);
 }

 .elayers {
   position: absolute;
   left: 50%;
   top: 60%;
   width: var(--L, 300px);
   height: var(--L, 300px);
   margin: calc(var(--L, 300px) / -2) 0 0 calc(var(--L, 300px) / -2);
   transform-style: preserve-3d;
   transform: rotateX(58deg) rotateZ(-45deg);
 }

 .elayer {
   position: absolute;
   inset: 0;
   opacity: 0;
   border: 1px solid rgba(240, 176, 32, 0.6);
   background:
     linear-gradient(rgba(199, 207, 227, 0.07) 1px, transparent 1px) 0 0 / 25% 25%,
     linear-gradient(90deg, rgba(199, 207, 227, 0.07) 1px, transparent 1px) 0 0 / 25% 25%,
     linear-gradient(135deg, rgba(20, 49, 107, 0.92), rgba(7, 20, 51, 0.92));
   box-shadow: 0 0 40px rgba(240, 176, 32, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
 }

 .elayer svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
 }

 .elayer .p-ln {
   fill: none;
   stroke: rgba(240, 176, 32, 0.65);
   stroke-width: .6;
 }

 .elayer .p-ln-d {
   fill: none;
   stroke: rgba(199, 207, 227, 0.3);
   stroke-width: .5;
   stroke-dasharray: 2 2;
 }

 .elayer .p-node {
   fill: var(--c-gold-light);
 }

 .elayer .p-box {
   fill: rgba(240, 176, 32, 0.1);
   stroke: rgba(240, 176, 32, 0.7);
   stroke-width: .6;
 }

 .emerge-labels span {
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--c-on-dark);
   white-space: nowrap;
 }

 .emerge-labels span::before {
   content: "";
   width: 48px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--c-gold-light));
 }

 .emerge-labels b {
   color: var(--c-gold-light);
   font-weight: 500;
 }

 /* Box = exact logo.png proportions; every layer is positioned in the image's own coordinates */
 .emerge-logo {
   position: absolute;
   left: 50%;
   top: 50%;
   width: min(760px, 84vw);
   aspect-ratio: 1600 / 575;
   transform: translate(-50%, -50%);
 }

 .elogo-plate {
   position: absolute;
   inset: -7% -3.5%;
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 0 0 1px rgba(240, 176, 32, 0.55), 0 30px 80px -20px rgba(240, 176, 32, 0.4), 0 0 140px rgba(240, 176, 32, 0.18);
   opacity: 0;
   transform: scale(0, 0);
 }

 /* emblem SVG centred on the logo's gold sphere (361.9, 266 of 1600×575) */
 .elogo-emblem {
   position: absolute;
   left: 3.24%;
   top: -7.65%;
   width: 38.75%;
   height: 107.83%;
   overflow: visible;
   transform-origin: 50% 50%;
   --dn: #6d8fe0;
 }

 .elogo-emblem .dn {
   fill: var(--dn);
 }

 .elogo-emblem .dg {
   fill: #e3a92b;
 }

 .elogo-part {
   position: absolute;
   inset: 0;
   opacity: 0;
 }

 .elogo-part img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
 }

 .ep-emblem {
   clip-path: inset(0 66% 0 0);
 }

 .ep-word {
   clip-path: inset(0 0 39% 34%);
 }

 .ep-tag {
   clip-path: inset(61% 0 20.9% 34%);
 }

 .ep-line {
   clip-path: inset(79.1% 0 0 34%);
 }

 .emerge-cue {
   position: absolute;
   left: 50%;
   bottom: 14%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   font-size: 11px;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--c-on-dark-dim);
 }

 .emerge-cue i {
   width: 1px;
   height: 48px;
   background: linear-gradient(var(--c-gold-light), transparent);
   animation: cueDrop 2.2s var(--ease-out) infinite;
   transform-origin: top;
 }

 @keyframes cueDrop {
   0% {
     transform: scaleY(0);
   }

   60% {
     transform: scaleY(1);
     opacity: 1;
   }

   100% {
     transform: scaleY(1);
     opacity: 0;
   }
 }

 .emerge-final {
   position: absolute;
   left: max(32px, calc((100vw - var(--container)) / 2 + 32px));
   bottom: 52px;
   max-width: 520px;
   opacity: 0;
 }

 .emerge-kicker {
   font-size: 11px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--c-gold-light);
   margin-bottom: 14px;
 }

 .emerge-head {
   font-family: var(--font-head);
   font-weight: 300;
   color: #fff;
   font-size: clamp(26px, 3vw, 44px);
   line-height: 1.08;
   letter-spacing: -0.04em;
 }

 .emerge-head em {
   font-style: normal;
   font-weight: 500;
   color: var(--c-gold-light);
 }

 .emerge-hud {
   position: absolute;
   right: max(32px, calc((100vw - var(--container)) / 2 + 32px));
   bottom: 52px;
   list-style: none;
   display: grid;
   grid-template-columns: repeat(5, auto);
   gap: 6px 18px;
   font-size: 10.5px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(199, 207, 227, 0.35);
 }

 .emerge-hud li {
   transition: color .4s ease;
 }

 .emerge-hud li.is-on {
   color: #fff;
 }

 .emerge-hud li.is-done {
   color: var(--c-gold-light);
 }

 .emerge-hud-bar {
   grid-column: 1 / -1;
   height: 1px;
   background: rgba(199, 207, 227, 0.15);
   position: relative;
 }

 .emerge-hud-bar b {
   position: absolute;
   inset: 0;
   background: var(--c-gold-light);
   transform-origin: left;
   transform: scaleX(0);
 }

 .emerge-skip {
   position: absolute;
   top: 22px;
   right: max(32px, calc((100vw - var(--container)) / 2 + 32px));
   font-size: 10.5px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c-on-dark-dim);
   padding: 8px 14px;
   border: 1px solid var(--c-line-dark);
   border-radius: 999px;
   transition: color .3s ease, border-color .3s ease;
 }

 .emerge-skip:hover {
   color: var(--c-gold-light);
   border-color: var(--c-gold-light);
 }

 /* Static fallback (no JS, or reduced motion): show the finished composition */
 html:not(.js) .emerge,
 .emerge.is-static {
   height: auto;
 }

 html:not(.js) .emerge-stage,
 .emerge.is-static .emerge-stage {
   position: relative;
   top: 0;
   height: 100vh;
 }

 /* ============================================================
   01 · HERO — original photography, cinematic treatment
   ============================================================ */
 .hero {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   background: var(--c-night);
   color: #fff;
   height: 600px;
   min-height: 600px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 @media (max-width: 768px) {
   .hero {
     height: auto;
     min-height: 540px;
     padding: 30px 0 40px;
   }
 }

 .hero-media {
   position: absolute;
   inset: 0;
   z-index: -3;
 }

 .hero-shot {
   position: absolute;
   inset: 0;
   margin: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   z-index: 1;
   transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.85s ease;
   -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .45) 28%, #000 55%);
   mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .45) 28%, #000 55%);
 }

 .hero-shot img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 75% center;
   filter: saturate(.92) contrast(1.05) brightness(.92);
   transform: none !important;
 }

 .hero-shot::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--c-navy);
   mix-blend-mode: color;
   opacity: .28;
 }

 .hero-shot.is-active {
   opacity: 1;
   visibility: visible;
   z-index: 2;
   transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .hero-shade {
   position: absolute;
   inset: 0;
   z-index: -2;
   pointer-events: none;
   background:
     linear-gradient(90deg, var(--c-night) 0%, rgba(5, 14, 38, 0.85) 30%, rgba(5, 14, 38, 0.1) 62%, transparent),
     linear-gradient(0deg, var(--c-night) 0%, transparent 28%),
     linear-gradient(180deg, rgba(5, 14, 38, 0.6) 0%, transparent 22%);
 }

 .hero-shade::after {
   /* fine technical grid over the photo only */
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(199, 207, 227, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 227, 0.05) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 75%);
   mask-image: linear-gradient(90deg, transparent 40%, #000 75%);
 }

 .hero-inner {
   flex: 1;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 36px clamp(24px, 5.5vw, 80px);
   box-sizing: border-box;
 }

 .hero-copy {
   max-width: 640px;
   will-change: transform;
 }

 .hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px 8px 12px;
   border: 1px solid var(--c-line-dark);
   border-radius: 999px;
   background: rgba(5, 14, 38, 0.5);
   backdrop-filter: blur(6px);
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--c-on-dark);
 }

 .hero-kicker-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--c-gold-light);
   box-shadow: 0 0 0 4px rgba(240, 176, 32, 0.18);
   animation: kickerPulse 2.4s ease-in-out infinite;
 }

 @keyframes kickerPulse {
   50% {
     box-shadow: 0 0 0 7px rgba(240, 176, 32, 0);
   }
 }

 .js .hero-msgs {
   display: grid;
   position: relative;
 }

 .js .hero-msg {
   grid-area: 1 / 1;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   pointer-events: none;
   transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.45s;
 }

 .js .hero-msg.is-active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
   transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1) 0.08s, transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) 0.08s;
 }

 .hero-msg+.hero-msg {
   margin-top: 48px;
 }

 .js .hero-msg+.hero-msg {
   margin-top: 0;
 }

 .hero-title {
   font-family: var(--font-head);
   font-weight: 600;
   color: #fff;
   font-size: clamp(32px, 3.8vw, 44px);
   line-height: 1.18;
   letter-spacing: -0.03em;
   margin: 18px 0 16px;
   max-width: 580px;
 }

 .hero-title em {
   font-style: normal;
   color: var(--c-gold-light);
 }

 .hero-text {
   font-size: 16.5px;
   line-height: 1.62;
   color: var(--c-on-dark);
   max-width: 480px;
   margin: 0 0 20px;
 }

 .hero-ctas {
   display: flex;
   gap: 14px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 24px;
 }

 .hero-tabs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   max-width: 580px;
   margin-top: 36px;
 }

 .hero-tab {
   position: relative;
   text-align: left;
   padding: 18px 16px 4px 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--c-on-dark-dim);
   transition: color .3s ease;
 }

 .hero-tab .mono {
   display: block;
   font-size: 11px;
   color: var(--c-gold-light);
   opacity: .6;
   margin-bottom: 4px;
 }

 .hero-tab:hover,
 .hero-tab.is-active {
   color: #fff;
 }

 .hero-tab.is-active .mono {
   opacity: 1;
 }

 .hero-tab-bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 16px;
   height: 1px;
   background: var(--c-line-dark);
   overflow: hidden;
 }

 .hero-tab-bar::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--c-gold-light);
   transform: scaleX(0);
   transform-origin: left;
 }

 .hero-tab.is-active .hero-tab-bar::after {
   animation: tabFill 5s linear forwards;
 }

 .hero.is-paused .hero-tab.is-active .hero-tab-bar::after {
   animation-play-state: paused;
 }

 .hero.no-auto .hero-tab.is-active .hero-tab-bar::after {
   animation: none;
   transform: scaleX(1);
 }

 @keyframes tabFill {
   to {
     transform: scaleX(1);
   }
 }

 .hero-scroll { display: none !important; }

 /* Hero Side Navigation Arrows (Positioned safely at screen edges with content clearance) */
 .hero-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(8, 38, 99, 0.78);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: #ffffff;
   border: 1.5px solid rgba(255, 255, 255, 0.28);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 30;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
   transition: transform 0.25s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
 }

 .hero-nav-btn svg {
   width: 20px;
   height: 20px;
   transition: transform 0.2s ease;
 }

 .hero-nav-btn:hover {
   background: #0284c7;
   border-color: rgba(255, 255, 255, 0.85);
   transform: translateY(-50%) scale(1.1);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
 }

 .hero-prev {
   left: 14px;
 }

 .hero-prev:hover svg {
   transform: translateX(-2px);
 }

 .hero-next {
   right: 14px;
 }

 .hero-next:hover svg {
   transform: translateX(2px);
 }

 @media (max-width: 900px) {
   .hero-inner {
     padding-left: 52px;
     padding-right: 52px;
   }

   .hero-nav-btn {
     width: 38px;
     height: 38px;
   }

   .hero-prev {
     left: 8px;
   }

   .hero-next {
     right: 8px;
   }

   .hero-nav-btn svg {
     width: 16px;
     height: 16px;
   }
 }

 /* ============================================================
   PARTNERS
   ============================================================ */
 .partners {
   padding: 96px 0 104px;
   background: linear-gradient(180deg, #f7f9fd 0%, #eef2f9 100%);
   overflow: hidden;
   border-top: 1px solid #dbe2ef;
   border-bottom: 1px solid #dbe2ef;
   position: relative;
 }

 .partners-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 32px;
   flex-wrap: wrap;
   margin-bottom: 44px;
 }

 .partners-title-wrap {
   display: flex;
   flex-direction: column;
 }

 .partners-head .eyebrow {
   margin-bottom: 8px;
   color: var(--c-gold-dark);
   font-weight: 700;
   letter-spacing: .16em;
 }

 .partners-heading {
   font-family: var(--font-head);
   font-size: clamp(30px, 3.4vw, 44px);
   font-weight: 600;
   line-height: 1.15;
   color: var(--c-navy);
   letter-spacing: -0.035em;
   margin: 0;
 }

 .partners-note {
   color: #4a5568;
   font-size: 16px;
   line-height: 1.6;
   max-width: 440px;
   font-weight: 450;
 }

 .marquee-dual {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .marquee-row {
   overflow: hidden;
   -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
   mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
 }

 .marquee-row .marquee-track {
   display: flex;
   gap: 16px;
   width: max-content;
 }

 .marquee-row-left .marquee-track {
   animation: marqueeLeft 48s linear infinite;
 }

 .marquee-row-right .marquee-track {
   animation: marqueeRight 52s linear infinite;
 }

 .marquee-row:hover .marquee-track {
   animation-play-state: paused;
 }

 @keyframes marqueeLeft {
   to {
     transform: translateX(calc(-50% - 8px));
   }
 }

 @keyframes marqueeRight {
   from {
     transform: translateX(calc(-50% - 8px));
   }

   to {
     transform: none;
   }
 }

 .partner-card {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 206px;
   height: 90px;
   padding: 16px 26px;
   border: 1.5px solid #d5deee;
   border-radius: 16px;
   background: #ffffff;
   box-shadow: 0 4px 16px -2px rgba(10, 31, 77, 0.08), 0 2px 6px rgba(10, 31, 77, 0.04);
   transition: all .35s var(--ease-out);
 }

 .partner-card:hover {
   border-color: var(--c-gold);
   transform: translateY(-4px);
   box-shadow: 0 14px 28px -4px rgba(10, 31, 77, 0.16), 0 0 0 1px rgba(201, 147, 42, 0.35);
 }

 .partner-card img {
   max-height: 42px;
   max-width: 140px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform .3s ease;
 }

 .partner-card:hover img {
   transform: scale(1.05);
 }

 /* ============================================================
   CAPABILITIES STRIP
   ============================================================ */
 .caps {
   border-top: 1px solid var(--c-line);
   border-bottom: 1px solid var(--c-line);
   overflow: hidden;
   background: #fff;
 }

 .caps-track {
   display: flex;
   width: max-content;
   animation: marqueeLeft 70s linear infinite;
 }

 .caps:hover .caps-track {
   animation-play-state: paused;
 }

 .caps-list {
   display: flex;
   flex-shrink: 0;
 }

 .caps-list li {
   display: flex;
   align-items: center;
   gap: 36px;
   padding: 30px 0 30px 36px;
   font-family: var(--font-head);
   font-weight: 500;
   font-size: clamp(28px, 4vw, 56px);
   letter-spacing: -0.045em;
   white-space: nowrap;
   color: transparent;
   -webkit-text-stroke: 1px rgba(10, 31, 77, 0.35);
   transition: color .4s ease, -webkit-text-stroke-color .4s ease;
 }

 .caps-list li:nth-child(odd) {
   color: var(--c-navy);
   -webkit-text-stroke-color: transparent;
 }

 .caps-list li::after {
   content: "";
   width: 10px;
   height: 10px;
   background: var(--c-gold);
   transform: rotate(45deg);
   flex-shrink: 0;
 }

 .caps-list li:hover {
   color: var(--c-gold-dark);
   -webkit-text-stroke-color: transparent;
 }

 /* ============================================================
   MANIFESTO
   ============================================================ */
 .manifesto {
   padding: 160px 0;
   background: #fff;
 }

 .manifesto .container {
   max-width: 1120px;
 }

 .manifesto-text {
   font-family: var(--font-head);
   font-weight: 400;
   font-size: clamp(30px, 4.4vw, 62px);
   line-height: 1.12;
   letter-spacing: -0.045em;
   color: var(--c-navy);
 }

 .manifesto-text .hl {
   color: var(--c-gold-dark);
 }

 .js .manifesto-text .mw {
   color: rgba(10, 31, 77, 0.13);
   transition: color .5s ease;
 }

 .js .manifesto-text .mw.is-lit {
   color: var(--c-navy);
 }

 .js .manifesto-text .hl .mw.is-lit {
   color: var(--c-gold-dark);
 }

 /* ============================================================
   02 · SERVICES — 3D perspective carousel
   ============================================================ */
 .orbit-section {
  position: relative;
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #ffffff 0%, #f4f6fb 55%, #e9edf6 100%);
  padding: 140px 0 120px;
  overflow: hidden;
  isolation: isolate;
}

.orbit-section .sb-head h2 {
  color: var(--c-navy);
}

.orbit-section .sb-head p {
  color: var(--c-slate);
}

.orbit-section .sb-head .eyebrow {
  color: var(--c-gold-dark);
}

.orbit-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: 1200px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(201, 147, 42, 0.09) 0%, rgba(244, 246, 251, 0) 100%);
  filter: blur(30px);
  pointer-events: none;
}

.orbit-section::after {
  /* floor shadow under the active card */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 72%;
  width: 820px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(10, 31, 77, 0.16) 0%, rgba(10, 31, 77, 0.04) 55%, transparent 100%);
  filter: blur(16px);
  pointer-events: none;
}

 .orbit {
   position: relative;
   height: 580px;
   perspective: 1600px;
   touch-action: pan-y;
   user-select: none;
   cursor: grab;
 }

 .orbit.is-drag {
   cursor: grabbing;
 }

 .orbit-track {
   position: absolute;
   inset: 0;
   transform-style: preserve-3d;
   transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
   transition: transform .8s var(--ease-out);
 }

 .ocard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 500px;
  margin: -250px 0 0 -190px;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1323;
  box-shadow: 0 30px 70px -20px rgba(10, 31, 77, 0.28), 0 10px 25px -10px rgba(0, 0, 0, 0.16);
  transition: transform .9s var(--ease-out), opacity .7s ease, box-shadow .6s ease;
  will-change: transform;
  -webkit-box-reflect: below 14px linear-gradient(transparent 75%, rgba(10, 31, 77, 0.09));
}

 .orbit.is-drag .ocard,
 .orbit.is-drag .ocard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  transition: transform .9s var(--ease-out), filter .6s ease;
  filter: contrast(1.05) brightness(var(--bri, 1));
  -webkit-user-drag: none;
}

 .ocard::before {
    display: none !important;
  }

 .ocard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(8, 11, 16, 0.95) 0%, rgba(8, 11, 16, 0.65) 28%, rgba(8, 11, 16, 0.15) 55%, transparent 75%);
  }

 .ocard.is-active {
   border: 1.5px solid rgba(240, 176, 32, 0.85); box-shadow: 0 0 0 1px rgba(240, 176, 32, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 50px -10px rgba(240, 176, 32, 0.3);
 }

 .ocard-body {
   position: absolute;
   left: 30px;
   right: 30px;
   bottom: 30px;
   z-index: 2;
   display: flex;
   flex-direction: column;
 }

 .ocard-tag {
   font-size: 10.5px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c-gold-light);
   margin-bottom: 12px;
 }

 .ocard-title {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 26px;
   line-height: 1.12;
   letter-spacing: -0.035em;
   color: #fff;
 }

 .ocard-desc {
   color: var(--c-on-dark);
   font-size: 14.5px;
   line-height: 1.55;
   max-height: 0;
   opacity: 0;
   transform: translateY(10px);
   transition: max-height .6s var(--ease-out), opacity .5s ease, transform .6s var(--ease-out), margin .6s;
 }

 .ocard.is-active .ocard-desc {
   max-height: 80px;
   opacity: 1;
   transform: none;
   margin-top: 12px;
   transition-delay: .2s;
 }

 .ocard-body::after {
   content: "Explore \2192";
   margin-top: 18px;
   width: max-content;
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--c-gold-light);
   opacity: 0;
   transition: opacity .4s ease;
 }

 .ocard.is-active .ocard-body::after {
   opacity: 1;
   transition-delay: .3s;
 }

 .orbit-ui {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 48px;
 }

 .orbit-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line);
  background: #ffffff;
  color: var(--c-navy);
  box-shadow: 0 4px 16px rgba(10, 31, 77, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s var(--ease-out);
}

.orbit-btn svg {
  width: 18px;
  height: 18px;
}

.orbit-btn:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(10, 31, 77, 0.22);
}

 .orbit-btn:active {
   transform: scale(.94);
 }

 .orbit-meter {
   display: none !important;
 }

 .orbit-all {
   margin-left: 0;
 }

 /* No JS: a plain horizontal scroller */
 html:not(.js) .orbit {
   height: auto;
   cursor: auto;
 }

 html:not(.js) .orbit-track {
   position: static;
   display: flex;
   gap: 16px;
   overflow-x: auto;
   padding: 0 32px 24px;
 }

 html:not(.js) .ocard {
   position: relative;
   left: auto;
   top: auto;
   margin: 0;
   flex: 0 0 300px;
   height: 400px;
 }

 html:not(.js) .ocard-desc {
   max-height: none;
   opacity: 1;
   transform: none;
   margin-top: 10px;
 }

 html:not(.js) .orbit-btn,
 html:not(.js) .orbit-meter {
   display: none;
 }

 /* ============================================================
   STATS
   ============================================================ */
 .stats {
   padding: 120px 0;
   background: #fff;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--c-line);
 }

 .stat {
   padding: 32px 28px 8px;
   border-left: 1px solid var(--c-line);
 }

 .stat:first-child {
   border-left: none;
   padding-left: 0;
 }

 .stat-k {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c-gold-dark);
 }

 .stat .num {
   font-family: var(--font-head);
   font-weight: 300;
   color: var(--c-navy);
   font-size: clamp(44px, 5.4vw, 88px);
   line-height: 1;
   letter-spacing: -0.06em;
   margin: 22px 0 14px;
   font-variant-numeric: tabular-nums;
 }

 .stat .num i {
   font-style: normal;
   color: var(--c-gold);
 }

 .stat .lbl {
   color: var(--c-slate);
   font-size: 15px;
   max-width: 200px;
 }

 /* ============================================================
   03 · CLOUD TOPOLOGY — pinned scroll story over a canvas scene
   ============================================================ */
 .topo {
   position: relative;
   height: 460vh;
   background: var(--c-night);
 }

 .topo-stage {
   position: sticky;
   top: var(--header-h);
   height: calc(100vh - var(--header-h));
   height: calc(100svh - var(--header-h));
   overflow: hidden;
   isolation: isolate;
 }

 .topo-stage::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -2;
   background: radial-gradient(900px 640px at 66% 55%, rgba(18, 48, 105, 0.8), transparent 70%), var(--c-night);
 }

 .topo-canvas {
   position: absolute;
   inset: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
 }

 .topo-stage::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background: linear-gradient(90deg, var(--c-night) 18%, rgba(5, 14, 38, 0.7) 34%, transparent 52%);
 }

 .topo-inner {
   position: relative;
   height: 100%;
   display: flex;
   align-items: center;
   pointer-events: none;
 }

 .topo-copy {
   max-width: 430px;
   pointer-events: auto;
 }

 .topo-copy h2 {
   font-size: clamp(30px, 3.2vw, 46px);
   font-weight: 500;
   letter-spacing: -0.045em;
   line-height: 1.04;
 }

 .topo-index {
   list-style: none;
   display: flex;
   gap: 6px;
   margin: 30px 0 34px;
 }

 .topo-index button {
   width: 46px;
   height: 32px;
   border-radius: 6px;
   border: 1px solid var(--c-line-dark);
   color: var(--c-on-dark-dim);
   font-size: 11px;
   letter-spacing: .1em;
   transition: background-color .3s ease, color .3s ease, border-color .3s ease;
 }

 .topo-index button:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.3);
 }

 .topo-index button.is-done {
   border-color: rgba(240, 176, 32, 0.45);
   color: var(--c-gold-light);
 }

 .topo-index button.is-active {
   background: var(--c-gold-light);
   border-color: var(--c-gold-light);
   color: var(--c-navy-deep);
 }

 .topo-chapters {
   display: grid;
 }

 .topo-ch {
   grid-area: 1 / 1;
 }

 .js .topo-ch {
   opacity: 0;
   visibility: hidden;
   transform: translateY(18px);
   transition: opacity .5s ease, transform .7s var(--ease-out), visibility .5s;
 }

 .js .topo-ch.is-active {
   opacity: 1;
   visibility: visible;
   transform: none;
 }

 .topo-ch h3 {
   display: flex;
   align-items: baseline;
   gap: 14px;
   font-size: 26px;
   font-weight: 500;
   letter-spacing: -0.035em;
   margin-bottom: 14px;
 }

 .topo-ch h3 .mono {
   font-size: 12px;
   color: var(--c-gold-light);
 }

 .topo-ch p {
   font-size: 16px;
   line-height: 1.7;
   margin-bottom: 20px;
 }

 .topo-ch ul {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .topo-ch li {
   font-size: 13px;
   padding: 7px 12px;
   border: 1px solid var(--c-line-dark);
   border-radius: 999px;
   color: #fff;
   background: rgba(255, 255, 255, 0.03);
 }

 /* Static fallback: all chapters listed, no pinning */
 html:not(.js) .topo,
 .topo.is-static {
   height: auto;
 }

 html:not(.js) .topo-stage,
 .topo.is-static .topo-stage {
   position: relative;
   top: 0;
   height: auto;
   min-height: 100vh;
   padding: 120px 0;
 }

 html:not(.js) .topo-chapters,
 .topo.is-static .topo-chapters {
   gap: 36px;
 }

 html:not(.js) .topo-ch,
 .topo.is-static .topo-ch {
   grid-area: auto;
   opacity: 1;
   visibility: visible;
   transform: none;
 }

 .topo.is-static .topo-index {
   display: none;
 }

 /* ============================================================
   WHY CORE5
   ============================================================ */
 .why {
   padding: 150px 0;
   background: #fff;
 }

 .why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 100px;
   align-items: center;
 }

 .why-visual {
   position: relative;
   padding-bottom: 60px;
 }

 .why-img {
   position: relative;
   overflow: hidden;
   margin: 0;
   box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
   transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
 }

 .why-img:hover {
   transform: translateY(-4px);
   box-shadow: 0 28px 60px -12px rgba(15, 23, 42, 0.22);
 }

 .why-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.6s var(--ease-out);
 }

 .why-img:hover img {
   transform: scale(1.03);
 }

 .why-img-main {
   width: 84%;
   aspect-ratio: 4 / 5;
   border-radius: 24px;
 }

 .why-img-sub {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 48%;
   aspect-ratio: 1;
   border-radius: 20px;
   border: 6px solid #fff;
   box-shadow: 0 24px 50px -8px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.04);
   transform: translateY(var(--py, 0px));
 }

 .why-img-sub:hover {
   transform: translateY(calc(var(--py, 0px) - 6px)) scale(1.02);
 }

 .why-badge {
   position: absolute;
   left: -16px;
   top: 40px;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 22px;
   border-radius: 16px;
   background: linear-gradient(135deg, #091a38 0%, #0d2757 100%);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: #fff;
   box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
   backdrop-filter: blur(10px);
   z-index: 5;
 }

 .why-badge .num {
   font-family: var(--font-head);
   font-size: 34px;
   font-weight: 600;
   color: var(--c-gold-light);
   letter-spacing: -0.04em;
 }

 .why-badge span {
   font-size: 12.5px;
   color: var(--c-on-dark);
   line-height: 1.4;
 }

 .why-copy h2 {
   font-size: clamp(30px, 3.4vw, 48px);
   font-weight: 500;
   letter-spacing: -0.045em;
   line-height: 1.06;
   margin-bottom: 36px;
 }

 .why-list {
   list-style: none;
 }

 .why-list li {
   display: grid;
   grid-template-columns: 56px 1fr;
   padding: 24px 0;
   border-top: 1px solid var(--c-line);
 }

 .why-list .mono {
   font-size: 12px;
   color: var(--c-gold-dark);
   padding-top: 4px;
 }

 .why-list h3 {
   font-size: 19px;
   font-weight: 500;
   margin-bottom: 6px;
   letter-spacing: -0.025em;
 }

 .why-list p {
   color: var(--c-slate);
   font-size: 15px;
 }

 /* ============================================================
   04 · STORIES — case studies with cursor-revealed imagery
   ============================================================ */
 @property --r {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;
 }

 .stories {
   position: relative;
   background: var(--c-night);
   padding: 150px 0;
   overflow: hidden;
   isolation: isolate;
 }

 .stories::before {
   content: "";
   position: absolute;
   z-index: -1;
   inset: 0;
   background-image: radial-gradient(rgba(199, 207, 227, 0.12) 1px, transparent 1.5px);
   background-size: 22px 22px;
   -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 100%, #000, transparent 70%);
   mask-image: radial-gradient(ellipse 70% 50% at 50% 100%, #000, transparent 70%);
 }

 .stories-head {
   text-align: center;
   max-width: 780px;
   margin: 0 auto 64px;
 }

 .stories-head h2 {
   font-size: clamp(36px, 5vw, 72px);
   font-weight: 400;
   letter-spacing: -0.05em;
   line-height: 1;
   margin-bottom: 22px;
 }

 .stories-head h2 em {
   font-style: normal;
   font-weight: 600;
   color: var(--c-gold-light);
 }

 .stories-head p {
   font-size: 17px;
   max-width: 560px;
   margin: 0 auto;
 }

 .stories-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 340px 340px;
   grid-template-areas: "a a b" "c d d";
 }

 .s-a {
   grid-area: a;
 }

 .s-b {
   grid-area: b;
 }

 .s-c {
   grid-area: c;
 }

 .s-d {
   grid-area: d;
 }

 .story {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   display: flex;
   flex-direction: column;
   padding: 30px;
   border-radius: 22px;
   border: 1px solid var(--c-line-dark);
   background: linear-gradient(160deg, rgba(18, 48, 105, 0.55), rgba(5, 14, 38, 0.95));
   color: #fff;
   transition: border-color .4s ease, transform .6s var(--ease-out);
   --mx: 70%;
   --my: 30%;
 }

 .story:hover {
   border-color: rgba(240, 176, 32, 0.45);
 }

 .story-img {
   position: absolute;
   inset: 0;
   z-index: -1;
   background-size: cover;
   background-position: center;
   filter: saturate(.85);
   -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 calc(var(--r) * .5), rgba(0, 0, 0, 0.13) var(--r));
   mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 calc(var(--r) * .5), rgba(0, 0, 0, 0.13) var(--r));
   transition: --r .9s var(--ease-out);
 }

 .story:hover .story-img,
 .story:focus-visible .story-img {
   --r: 420px;
 }

 .story::after {
   /* readable base under the copy */
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(0deg, rgba(5, 14, 38, 0.92) 8%, rgba(5, 14, 38, 0.2) 60%, rgba(5, 14, 38, 0.5));
 }

 .story-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
 }

 .story-top .mono {
   font-size: 10.5px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c-gold-light);
 }

 .story-arrow {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1px solid var(--c-line-dark);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   transition: background-color .3s ease, color .3s ease, transform .5s var(--ease-out), border-color .3s ease;
 }

 .story:hover .story-arrow {
   background: var(--c-gold-light);
   border-color: var(--c-gold-light);
   color: var(--c-navy-deep);
   transform: rotate(45deg);
 }

 .story-name {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 28px;
   letter-spacing: -0.04em;
   margin-top: auto;
 }

 .story-title {
   color: var(--c-on-dark);
   font-size: 15px;
   margin-top: 4px;
 }

 .story-metric {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-top: 18px;
   padding-top: 18px;
   border-top: 1px solid var(--c-line-dark);
 }

 .story-metric b {
   font-family: var(--font-head);
   font-weight: 300;
   font-size: clamp(44px, 4.6vw, 76px);
   line-height: .9;
   letter-spacing: -0.06em;
   color: #fff;
   white-space: nowrap;
 }

 .story-metric small {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--c-on-dark-dim);
 }

 .stories-foot {
   text-align: center;
   margin-top: 48px;
 }

 /* ============================================================
   TESTIMONIALS
   ============================================================ */
 .testi {
   padding: 150px 0 120px;
   background: #fff;
 }

 .testi-grid {
   display: grid;
   grid-template-columns: 5fr 7fr;
   gap: 100px;
   align-items: start;
 }

 .testi-side h2 {
   font-size: clamp(32px, 3.8vw, 52px);
   font-weight: 500;
   letter-spacing: -0.045em;
   margin-bottom: 18px;
 }

 .testi-side>p {
   color: var(--c-slate);
   font-size: 17px;
 }

 .testi-tabs {
   display: flex;
   gap: 18px;
   margin-top: 40px;
   flex-wrap: wrap;
   perspective: 1200px;
 }

 .testi-tab {
   position: relative;
   width: 150px;
   height: 92px;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--c-line);
   border-radius: 16px;
   background: linear-gradient(155deg, #ffffff 0%, #eef1f8 100%);
   transform-style: preserve-3d;
   transform: rotateX(6deg);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
     0 10px 20px -10px rgba(16, 32, 69, 0.26),
     0 24px 40px -24px rgba(16, 32, 69, 0.34);
   transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, border-color .3s ease;
   will-change: transform;
 }

 /* soft top sheen for a glossy, raised feel */
 .testi-tab::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 44%);
   pointer-events: none;
 }

 .testi-tab img {
   max-height: 46px;
   max-width: 100%;
   object-fit: contain;
   opacity: .55;
   transform: translateZ(30px);
   filter: grayscale(.15) drop-shadow(0 6px 10px rgba(16, 32, 69, 0.22));
   transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
 }

 .testi-tab:hover {
   transform: translateY(-6px) rotateX(3deg) scale(1.04);
   border-color: rgba(201, 147, 42, 0.4);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
     0 18px 30px -12px rgba(16, 32, 69, 0.3),
     0 40px 62px -28px rgba(16, 32, 69, 0.44);
 }

 .testi-tab:hover img,
 .testi-tab.is-active img {
   opacity: 1;
   transform: translateZ(52px);
   filter: grayscale(0) drop-shadow(0 11px 16px rgba(16, 32, 69, 0.28));
 }

 .testi-tab.is-active {
   border-color: var(--c-gold);
   transform: translateY(-4px) rotateX(3deg) scale(1.05);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
     0 0 0 3px rgba(201, 147, 42, 0.25),
     0 40px 62px -28px rgba(16, 32, 69, 0.44);
 }

 @media (prefers-reduced-motion: reduce) {
   .testi-tab,
   .testi-tab:hover,
   .testi-tab.is-active { transform: none; }
   .testi-tab img,
   .testi-tab:hover img,
   .testi-tab.is-active img { transform: none; }
 }

 .testi-stage {
   position: relative;
   padding-top: 8px;
 }

 .testi-mark {
   width: 52px;
   height: 40px;
   color: var(--c-gold-light);
   margin-bottom: 28px;
 }

 .js .testi-stage {
   display: grid;
 }

 .js .testi-mark,
 .js .testi-count {
   grid-column: 1;
 }

 .js .testi-quote {
   grid-area: 2 / 1;
   opacity: 0;
   visibility: hidden;
   transform: translateY(16px);
   transition: opacity .6s ease, transform .8s var(--ease-out), visibility .6s;
 }

 .js .testi-quote.is-active {
   opacity: 1;
   visibility: visible;
   transform: none;
 }

 .testi-quote {
   margin: 0 0 40px;
 }

 .testi-stars {
   display: flex;
   gap: 4px;
   margin-bottom: 22px;
 }

 .testi-stars i {
   width: 15px;
   height: 15px;
   background: var(--c-amber);
   clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 }

 .testi-quote blockquote {
   font-family: var(--font-head);
   font-weight: 300;
   color: var(--c-navy);
   font-size: clamp(22px, 2.5vw, 34px);
   line-height: 1.3;
   letter-spacing: -0.035em;
 }

 .testi-quote figcaption {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-top: 32px;
   padding-top: 22px;
   border-top: 1px solid var(--c-line);
 }

 .testi-quote figcaption strong {
   color: var(--c-navy);
   font-size: 16px;
 }

 .testi-quote figcaption .mono {
   font-size: 12px;
   color: var(--c-slate);
 }

 .testi-count {
   font-size: 12px;
   color: var(--c-slate);
   letter-spacing: .14em;
 }

 .testi-count span {
   color: var(--c-navy);
 }

 html:not(.js) .testi-count {
   display: none;
 }

 /* ============================================================
   CLIENTS
   ============================================================ */
 .clients {
   padding: 0 0 140px;
   background: #fff;
 }

 .client-wall {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   border-top: 1px solid var(--c-line);
   border-left: 1px solid var(--c-line);
 }

 .client-wall li {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 132px;
   padding: 20px;
   border-right: 1px solid var(--c-line);
   border-bottom: 1px solid var(--c-line);
   transition: background-color .35s ease;
 }

 .client-wall li:hover {
   background: var(--c-mist);
 }

 .client-wall img {
   max-height: 56px;
   max-width: 72%;
   object-fit: contain;
   mix-blend-mode: multiply;
   transition: transform .5s var(--ease-out);
 }

 .client-wall li:hover img {
   transform: scale(1.06);
 }

 /* ============================================================
   FINALE — editorial closing with an architectural structure
   ============================================================ */
 .finale {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: var(--c-night);
   padding: 170px 0 120px;
   min-height: 920px;
 }

 .finale-horizon {
   position: absolute;
   z-index: -2;
   left: 50%;
   top: 58%;
   width: 170vw;
   height: 170vw;
   max-width: 2600px;
   max-height: 2600px;
   transform: translateX(-50%);
   border-radius: 50%;
   border-top: 1px solid rgba(240, 176, 32, 0.65);
   background: radial-gradient(closest-side, rgba(18, 48, 105, 0.0) 80%, rgba(18, 48, 105, 0.6) 96%, rgba(240, 176, 32, 0.12));
   box-shadow: 0 -40px 140px -20px rgba(240, 176, 32, 0.32), inset 0 60px 160px -40px rgba(240, 176, 32, 0.25);
 }

 .finale-canvas {
   position: absolute;
   inset: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
 }

 .finale-inner {
   position: relative;
 }

 .finale-title {
   font-family: var(--font-head);
   font-weight: 300;
   color: #fff;
   font-size: clamp(44px, 7.2vw, 116px);
   line-height: .98;
   letter-spacing: -0.06em;
   max-width: 1050px;
 }

 .finale-title em {
   font-style: normal;
   font-weight: 600;
   color: var(--c-gold-light);
 }

 .finale-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 40px;
   flex-wrap: wrap;
   margin-top: 380px;
 }

 .finale-row p {
   font-size: 18px;
   max-width: 440px;
   color: var(--c-on-dark);
   text-shadow: 0 2px 14px var(--c-night), 0 0 4px var(--c-night);
 }

 .finale-links {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 44px;
   padding-top: 28px;
   border-top: 1px solid var(--c-line-dark);
 }

 .finale-links a {
   display: block;
   padding: 8px 14px;
   border: 1px solid var(--c-line-dark);
   border-radius: 999px;
   font-size: 11px;
   letter-spacing: .14em;
   text-transform: uppercase;
   transition: border-color .3s ease, color .3s ease;
 }

 .finale-links a:hover {
   border-color: var(--c-gold-light);
   color: var(--c-gold-light);
 }

 /* ============================================================
   Responsive
   ============================================================ */
 @media (max-width: 1100px) {
   .testi-grid {
     grid-template-columns: 1fr;
     gap: 56px;
   }

   .why-grid {
     gap: 64px;
   }

   .stories-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     grid-template-areas: "a a" "b c" "d d";
   }

   .story {
     min-height: 320px;
   }
 }

 @media (max-width: 960px) {
   .emerge {
     height: 300vh;
   }

   .emerge-hud {
     display: none;
   }

   .emerge-final {
     bottom: 40px;
     right: 24px;
   }

   .hero-shot {
     -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
     mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
     opacity: 0;
   }

   .hero-shot.is-active,
   .hero-shot.was-active {
     opacity: .55;
   }

   .hero-shade {
     background: linear-gradient(0deg, var(--c-night) 25%, rgba(5, 14, 38, 0.55) 60%, rgba(5, 14, 38, 0.3));
   }

   .hero-hud,
   .hero-scroll {
     display: none;
   }

   .hero-inner {
     align-items: flex-end;
     padding-top: 140px;
   }

   .sb-head {
     grid-template-columns: 1fr;
     gap: 20px;
     margin-bottom: 40px;
   }

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

   .why-visual {
     max-width: 560px;
   }

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

   .stat:nth-child(3) {
     border-left: none;
     padding-left: 0;
   }

   .stat:nth-child(n+3) {
     border-top: 1px solid var(--c-line);
     margin-top: 16px;
   }

   .topo {
     height: 420vh;
   }

   .topo-stage::after {
     background: linear-gradient(0deg, var(--c-night) 38%, rgba(5, 14, 38, 0.6) 58%, transparent 75%);
   }

   .topo-inner {
     align-items: flex-end;
     padding-bottom: 32px;
   }

   .topo-copy h2 {
     font-size: 26px;
   }

   .topo-index {
     margin: 16px 0 18px;
   }

   .topo-ch h3 {
     font-size: 21px;
   }

   .topo-ch p {
     font-size: 14.5px;
     margin-bottom: 12px;
   }

   .orbit {
     height: 470px;
   }

   .ocard {
     width: 290px;
     height: 400px;
     margin: -200px 0 0 -145px;
   }

   .ocard-title {
     font-size: 22px;
   }

   .orbit-all {
     margin-left: 0;
   }

   .finale {
     min-height: 0;
     padding: 120px 0 96px;
   }

   .finale-row {
     margin-top: 320px;
   }
 }

 @media (max-width: 640px) {
   .emerge-skip {
     top: 14px;
     right: 16px;
   }

   .hero {
     min-height: 640px;
   }

   .hero-inner {
     padding-bottom: 64px;
   }

   .hero-tabs {
     margin-top: 44px;
   }

   .hero-tab {
     font-size: 12.5px;
     padding-right: 10px;
   }

   .hero-ctas .btn {
     flex: 1 1 auto;
     justify-content: center;
   }

   .partners {
     padding: 68px 0 76px;
   }

   .partner-card {
     width: 168px;
     height: 76px;
     padding: 12px 18px;
     border-radius: 12px;
   }

   .partner-card img {
     max-height: 34px;
     max-width: 118px;
   }

   .manifesto {
     padding: 104px 0;
   }

   .orbit-section,
   .stories,
   .testi,
   .why {
     padding: 96px 0;
   }

   .orbit {
     height: 420px;
   }

   .ocard {
     width: 250px;
     height: 350px;
     margin: -175px 0 0 -125px;
   }

   .ocard-body {
     left: 22px;
     right: 22px;
     bottom: 22px;
   }

   .stats {
     padding: 88px 0;
   }

   .stat {
     padding: 24px 16px 4px;
   }

   .why-badge {
     left: 12px;
     top: 16px;
   }

   .stories-grid {
     grid-template-columns: 1fr;
     grid-template-areas: "a" "b" "c" "d";
   }

   .story {
     min-height: 300px;
     padding: 24px;
   }

   .story-img {
     -webkit-mask-image: none;
     mask-image: none;
     opacity: .22;
   }

   .client-wall {
     grid-template-columns: 1fr 1fr;
   }

   .client-wall li {
     height: 104px;
   }

   .clients {
     padding-bottom: 96px;
   }

   .testi-tab {
     width: calc(33.33% - 12px);
     height: 84px;
   }

   .finale-row {
     margin-top: 260px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .hero-title .w>span {
     transform: none;
   }

   .js .hero-msg .hero-text,
   .js .hero-msg .hero-ctas {
     opacity: 1;
     transform: none;
   }

   .hud-scan {
     display: none;
   }

   .marquee-row {
     -webkit-mask-image: none;
     mask-image: none;
   }

   .marquee-row .marquee-track,
   .caps-track {
     animation: none;
     width: auto;
     flex-wrap: wrap;
     justify-content: center;
     padding: 0 20px;
   }

   .marquee-row [aria-hidden="true"],
   .caps-list[aria-hidden="true"] {
     display: none;
   }

   .caps-track,
   .caps-list {
     width: 100%;
     flex-wrap: wrap;
     justify-content: center;
   }

   .caps-list li {
     font-size: clamp(22px, 2.6vw, 34px);
     padding: 14px 0 14px 28px;
     gap: 28px;
   }
 }

 /* ============================================================
   COSMOS — a restrained star field behind the closing section that
   carries on into the footer statement, so there is no hard boundary
   ============================================================ */
 .cosmos-sky {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -3;
   pointer-events: none;
 }

 .finale-clip {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   -webkit-mask-image: linear-gradient(#000 0, #000 72%, transparent 100%);
   mask-image: linear-gradient(#000 0, #000 72%, transparent 100%);
 }

 .finale-clip .finale-horizon {
   z-index: 0;
   transform: translateX(-50%) scale(var(--hz, 1));
   transform-origin: 50% 0;
 }

 .finale-clip .finale-canvas {
   z-index: 1;
 }

 .site-footer--cosmos {
   isolation: isolate;
 }

 .site-footer--cosmos>.container {
   position: relative;
 }

 .footer-sky {
   height: 760px;
   z-index: -1;
   -webkit-mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
   mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
 }

 .site-footer--cosmos .footer-statement p {
   opacity: var(--rise, 1);
   transform: translateY(calc((1 - var(--rise, 1)) * 40px));
 }

 /* ============================================================
   SOFTWARE PRODUCTS — auto-sliding interactive cards carousel
   ============================================================ */
 .products-section {
   position: relative;
   padding: 100px 0 110px;
   background: linear-gradient(135deg, #008be3 0%, #0060c4 42%, #082663 100%);
   color: #ffffff;
   overflow: hidden;
 }

 .products-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
     radial-gradient(ellipse 65% 55% at 20% 20%, rgba(255, 255, 255, 0.16), transparent 70%),
     radial-gradient(ellipse 55% 55% at 80% 80%, rgba(8, 38, 99, 0.45), transparent 70%);
   pointer-events: none;
 }

 .products-head {
   text-align: center;
   max-width: 860px;
   margin: 0 auto 52px;
   position: relative;
   z-index: 2;
 }

 .products-eyebrow {
   display: none !important;
 }

 .products-title {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 40px !important;
   font-weight: 700 !important;
   color: #FFFFFF !important;
   line-height: 52px !important;
   letter-spacing: -0.01em;
   margin-bottom: 14px;
 }

 .products-sub {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 15px !important;
   color: rgba(255, 255, 255, 0.95);
   line-height: 24px;
   max-width: 720px;
   margin: 0 auto;
 }

 /* Carousel container */
 .products-carousel-wrap {
   position: relative;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 74px;
 }

 .products-viewport {
   overflow: hidden;
   padding: 16px 4px 28px;
   border-radius: 0px;
 }

 .products-track {
   display: flex;
   align-items: stretch;
   gap: 24px;
   transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }

 /* Product Card (Sharp Square — clean, balanced, no curves, perfectly full) */
 .product-card {
   flex: 0 0 calc((100% - (3 * 24px)) / 4);
   width: calc((100% - (3 * 24px)) / 4);
   background: #ffffff;
   border-radius: 0px !important;
   padding: 28px 24px 24px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.95);
   transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
   position: relative;
   text-align: left;
   box-sizing: border-box;
 }

 .product-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
 }

 /* Product Logo (70x60px matching official specifications — clean standalone SVG with no box background) */
 .product-logo,
 .product-icon {
   width: 100% !important;
   height: auto !important;
   margin-bottom: 18px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
   flex-shrink: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   border: none !important;
   border-radius: 0 !important;
 }

 .product-logo img,
 .product-icon img {
   width: auto !important;
   max-width: 100% !important;
   height: auto !important;
   max-height: 92px !important;
   object-fit: contain !important;
   object-position: left center !important;
   display: block !important;
   transition: transform 0.3s ease;
   filter: none !important;
 }

 .product-card:hover .product-logo img,
 .product-card:hover .product-icon img {
   transform: scale(1.08);
 }

 /* Product Card Headers */
 .product-name,
 .main-title {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 16px !important;
   font-weight: 500 !important;
   color: #062C70 !important;
   margin-bottom: 4px !important;
   letter-spacing: -0.01em !important;
 }

 .product-cat,
 .sx-tilte,
 .sx-title {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 18px !important;
   font-weight: 700 !important;
   color: #053C66 !important;
   line-height: 1.32 !important;
   margin-bottom: 14px !important;
   min-height: 48px;
 }

 /* Thin horizontal separator line */
 .product-divider {
   width: 100% !important;
   height: 1px !important;
   background: #edf0f5 !important;
   margin-bottom: 14px !important;
 }

 /* Description */
 .product-desc,
 .product-description {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 13.5px !important;
   line-height: 22px !important;
   color: #666666 !important;
   margin-bottom: 18px !important;
   flex-grow: 1 !important;
 }

 /* “Read More” links (product cards ke andar) */
 .product-readmore {
   display: inline-flex !important;
   align-items: center !important;
   gap: 6px !important;
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 14px !important;
   font-weight: 400 !important;
   color: #09345E !important;
   text-decoration: none !important;
   background: transparent !important;
   border: none !important;
   padding: 0 !important;
   cursor: pointer !important;
   margin-top: auto !important;
   align-self: flex-start !important;
   transition: color 0.2s ease, opacity 0.2s ease !important;
 }

 .product-readmore:hover {
   text-decoration: none !important;
   color: #09345E !important;
   opacity: 0.85;
 }

 .product-readmore .readmore-arrow {
   font-size: 15px;
   margin-left: 2px;
   display: inline-block;
   transition: transform 0.2s ease;
   color: #09345E;
 }

 .product-card:hover .product-readmore .readmore-arrow {
   transform: translateX(4px);
 }

 /* Side navigation buttons (Positioned outside cards to avoid overlapping) */
 .prod-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: #0b3fa8;
   color: #ffffff;
   border: 2px solid rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
   transition: transform 0.25s var(--ease-out), background-color 0.2s ease, box-shadow 0.25s ease;
 }

 .prod-btn svg {
   width: 20px;
   height: 20px;
 }

 .prod-btn:hover {
   background: #0284c7;
   transform: translateY(-50%) scale(1.1);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
 }

 .prod-prev {
   left: 12px;
 }

 .prod-next {
   right: 12px;
 }

 /* Dots indicator (hidden) */
 .prod-dots {
   display: none !important;
 }

 .prod-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.35);
   border: none;
   cursor: pointer;
   transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
 }

 .prod-dot.is-active {
   width: 28px;
   border-radius: 999px;
   background: #ffe08a;
 }

 /* Modal Popup */
 .prod-modal {
   position: fixed;
   inset: 0;
   z-index: 3000;
   background: rgba(5, 14, 38, 0.78);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 .prod-modal.is-open {
   opacity: 1;
   pointer-events: auto;
 }

 .prod-modal-card {
   background: #ffffff;
   color: var(--c-ink);
   width: 100%;
   max-width: 680px;
   max-height: 88vh;
   overflow-y: auto;
   border-radius: 22px;
   padding: 36px 36px 32px;
   box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
   position: relative;
   transform: translateY(24px) scale(0.97);
   transition: transform 0.3s var(--ease-out);
 }

 .prod-modal.is-open .prod-modal-card {
   transform: translateY(0) scale(1);
 }

 .prod-modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--c-mist);
   color: var(--c-slate);
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
 }

 .prod-modal-close:hover {
   background: var(--c-mist-2);
   color: var(--c-navy);
 }

 .prod-modal-header {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-bottom: 24px;
   padding-right: 40px;
 }

 .prod-modal-header .product-icon,
 .prod-modal-header .product-logo {
   width: 70px;
   height: 60px;
   margin-bottom: 0;
   flex-shrink: 0;
   background: transparent !important;
   box-shadow: none !important;
 }

 .prod-modal-header .product-icon img,
 .prod-modal-header .product-logo img {
   width: 70px;
   height: 60px;
   object-fit: contain;
 }

 .prod-modal-title {
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 24px;
   font-weight: 700;
   color: #062C70;
   margin-bottom: 4px;
 }

 .prod-modal-badge {
   display: inline-block;
   font-family: 'Ubuntu', sans-serif !important;
   font-size: 13.5px;
   font-weight: 600;
   color: #053C66;
 }

 .prod-modal-block {
   margin-bottom: 22px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--c-line);
 }

 .prod-modal-block:last-of-type {
   border-bottom: none;
   margin-bottom: 28px;
   padding-bottom: 0;
 }

 .prod-modal-block h4 {
   font-family: var(--font-head);
   font-size: 15px;
   font-weight: 700;
   color: var(--c-navy);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .prod-modal-block p {
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--c-slate);
 }

 .prod-modal-features {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
 }

 .prod-modal-features li {
   font-size: 14px;
   line-height: 1.55;
   color: var(--c-slate);
   display: flex;
   align-items: flex-start;
   gap: 10px;
 }

 .prod-modal-features li svg {
   width: 18px;
   height: 18px;
   color: #10b981;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .prod-modal-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center;
 }

 .prod-modal-actions .btn {
   height: 44px;
   font-size: 14.5px;
 }

 @media (max-width: 1200px) {
   .product-card {
     flex: 0 0 calc((100% - (2 * 24px)) / 3);
     width: calc((100% - (2 * 24px)) / 3);
   }
 }

 @media (max-width: 900px) {
   .products-section {
     padding: 70px 0 80px;
   }

   .products-carousel-wrap {
     padding: 0 54px;
   }

   .product-card {
     flex: 0 0 calc((100% - 20px) / 2);
     width: calc((100% - 20px) / 2);
     border-radius: 0px !important;
     padding: 24px 18px 22px;
   }

   .product-icon {
     border-radius: 0px !important;
   }

   .prod-btn {
     width: 42px;
     height: 42px;
   }

   .prod-btn svg {
     width: 18px;
     height: 18px;
   }

   .prod-prev {
     left: 4px;
   }

   .prod-next {
     right: 4px;
   }

   .prod-modal-card {
     padding: 26px 20px;
     border-radius: 0px;
   }
 }

 @media (max-width: 600px) {
   .products-carousel-wrap {
     padding: 0 46px;
   }

   .product-card {
     flex: 0 0 100%;
     width: 100%;
     padding: 22px 18px 20px;
   }
 }