/* ==========================================================================
   Home page: builds on services.css (sv-*), why-us.css and clients.css (cl-wall).
   Content comes from Admin → Home Page. Motion plays once per change; nothing loops forever.
   ========================================================================== */

/* ---------- Hero: full-width photo carousel, text on the left ---------- */
.hx { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; height: 100vh; height: 100svh; min-height: 600px; max-height: 880px; padding: 84px 0 5rem; color: #fff; background: #0F2440; }
.hx-media { position: absolute; inset: 0; z-index: -1; }
.hx-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hx-bg.is-active { opacity: 1; }
.hx-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.4s ease; }
.hx-bg.is-active img { transform: scale(1); transition: transform calc(var(--hx-ms, 7000ms) + 1400ms) ease-out; }
.hx-shade { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(12, 31, 58, .94) 0%, rgba(14, 42, 78, .82) 38%, rgba(22, 80, 142, .35) 72%, rgba(22, 80, 142, .15) 100%),
    linear-gradient(180deg, rgba(12, 31, 58, .35) 0%, rgba(12, 31, 58, 0) 30%, rgba(12, 31, 58, 0) 75%, rgba(12, 31, 58, .5) 100%); }
.hx-inner { width: 100%; }
.hx-slides { display: grid; max-width: 920px; }
.hx-slide { grid-area: 1 / 1; visibility: hidden; }
.hx-slide.is-active { visibility: visible; }
.hx-ln { opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease; }
.hx-slide.is-active .hx-ln { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s var(--sv-ease); transition-delay: calc(var(--l, 0) * 100ms + 250ms); }
.hx-slide .wy-eyebrow { display: inline-flex; }
.hx-actions .btn { height: 52px; padding: 0 1.6rem; font-size: .98rem; font-weight: 700; border-radius: 12px; }
.hx-actions .btn i { font-size: .8rem; transition: transform .3s var(--sv-ease); }
.hx-actions .btn:hover i { transform: translateX(3px); }
.hx-actions .btn-outline-white { border: 1.5px solid rgba(255, 255, 255, .45); }
.hx-actions .btn-outline-white:hover { color: #fff !important; background: rgba(255, 255, 255, .12); border-color: #fff; }
.hx-title { margin: 1rem 0 1rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.1rem, 3.5vw, 3.25rem); line-height: 1.12; letter-spacing: -.025em; color: #fff; }
.hx-title > span { display: block; }
.hx-hl { padding-bottom: .06em; background: linear-gradient(90deg, #4FCFFF, #8FD7FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-lead { max-width: 600px; margin: 0 0 2rem; font-size: 1.08rem; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.hx-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Dots: the active one is longer */
.hx-dots { position: absolute; left: 50%; bottom: 5.2rem; z-index: 2; display: flex; gap: .5rem; transform: translateX(-50%); }
.hx-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .45s var(--sv-ease), background .3s; }
.hx-dots button:hover { background: rgba(255, 255, 255, .8); }
.hx-dots button.is-active { width: 30px; background: linear-gradient(90deg, #4FCFFF, #1E8FD0); }
.hx-dots button:focus-visible { outline: 2px solid #4FCFFF; outline-offset: 3px; }

/* ---------- Spacing: tighter than other pages so the home page has no empty gaps ---------- */
.wx, .bx, .ix, .yx, .sx, .wkx, .ptx, .ex, .hm-leaders, .hm-posts, .fqx { padding: 4.5rem 0; }
.bx .sv-head, .ix .sv-head, .wkx .sv-head, .ptx .sv-head, .sx .sv-head, .ex .sv-head, .hm-leaders .sv-head, .hm-posts .sv-head { margin-bottom: 2.2rem; }

/* ---------- Proof: numbers + client logos ---------- */
.px { position: relative; z-index: 3; padding: 0 0 1rem; }
.px-nums { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: -56px; }
.px-num { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--sv-line); box-shadow: 0 30px 60px -40px rgba(11, 18, 32, .45); transition: transform .4s var(--sv-ease), box-shadow .4s, border-color .3s; }
.px-num:hover { transform: translateY(-4px); border-color: rgba(30, 143, 208, .3); box-shadow: 0 34px 60px -36px rgba(11, 18, 32, .55); }
.px-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, #1E8FD0, #16508E); }
.px-num:nth-child(2) .px-icon { background: linear-gradient(135deg, #9BC73B, #5C8A1E); }
.px-num:nth-child(3) .px-icon { background: linear-gradient(135deg, #FDC943, #E57E27); }
.px-num:nth-child(4) .px-icon { background: linear-gradient(135deg, #4FCFFF, #1E75B0); }
.px-num strong { display: block; font-family: var(--font-heading); font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; color: var(--sv-ink); letter-spacing: -.02em; }
.px-num strong em { font-style: normal; background: linear-gradient(90deg, #1E8FD0, #9BC73B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-label { display: block; margin-top: .25rem; font-size: .86rem; font-weight: 600; color: var(--sv-muted); }
.px-logos { margin-top: 2.4rem; }
.px-logos-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.px-logos-head span { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-muted); }
.px-wall { padding-top: 1.2rem; }
.hm-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #1E75B0; text-decoration: none; }
.hm-link i { font-size: .75rem; transition: transform .3s var(--sv-ease); }
.hm-link:hover { color: #16508E; }
.hm-link:hover i { transform: translateX(4px); }

/* ---------- Who we are ---------- */
.wx { background: var(--sv-soft); }
.wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.wx-copy h2 { margin: .9rem 0 1rem; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; color: var(--sv-ink); }
.wx-text { margin: 0 0 1.6rem; font-size: 1.06rem; line-height: 1.75; color: var(--sv-muted); }
.wx-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.wx-ticks li { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-radius: 14px; font-weight: 700; font-size: .92rem; color: var(--sv-ink); background: #fff; border: 1px solid var(--sv-line); }
.wx-ticks i { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; background: linear-gradient(135deg, #9BC73B, #5C8A1E); }
.wx-ticks li:nth-child(4n+2) i { background: linear-gradient(135deg, #4FCFFF, #1E75B0); }
.wx-ticks li:nth-child(4n+3) i { background: linear-gradient(135deg, #FDC943, #E57E27); }
.wx-ticks li:nth-child(4n+4) i { background: linear-gradient(135deg, #1E8FD0, #16508E); }
.wx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.wx-visual { position: relative; padding: 2rem 0 2rem 2rem; }
.wx-photo { margin: 0; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 28px; box-shadow: 0 50px 90px -50px rgba(11, 18, 32, .7); clip-path: inset(0 0 0 100% round 28px); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
.wx-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.8s var(--sv-ease); }
.wx-visual.is-in .wx-photo { clip-path: inset(0 0 0 0 round 28px); }
.wx-visual.is-in .wx-photo img { transform: scale(1); }
.wx-badge, .wx-certs { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--sv-ease) .9s, transform .8s var(--sv-ease) .9s; }
.wx-visual.is-in .wx-badge, .wx-visual.is-in .wx-certs { opacity: 1; transform: none; }
.wx-badge { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; padding: 1.2rem 1.5rem; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #1E8FD0, #16508E); box-shadow: 0 24px 44px -20px rgba(22, 80, 142, .9); }
.wx-badge strong { font-family: var(--font-heading); font-size: 2.6rem; line-height: 1; }
.wx-badge span { margin-top: .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.wx-certs { position: absolute; right: -1rem; top: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; border-radius: 20px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -34px rgba(11, 18, 32, .65); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition-delay: 1.05s; }
.wx-certs small { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.wx-certs span { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.wx-certs i { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #FDC943, #E57E27); }
.wx-certs span:nth-of-type(2) i { background: linear-gradient(135deg, #1E8FD0, #16508E); }
.wx-certs b { font-size: .9rem; color: var(--sv-ink); }
.wx-certs em { font-style: normal; font-size: .74rem; color: var(--sv-muted); }

/* ---------- Services: photo bento ---------- */
.bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 1rem; }
.bx-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 1.3rem; border-radius: 24px; color: #fff; text-decoration: none; background: linear-gradient(145deg, #16508E, #0B1322); box-shadow: 0 30px 60px -44px rgba(11, 18, 32, .8); }
.bx-tile.is-big { grid-column: span 2; grid-row: span 2; padding: 1.8rem; }
.bx-tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--sv-ease); }
.bx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 13, 23, .15) 0%, rgba(8, 13, 23, .45) 45%, rgba(8, 13, 23, .92) 100%); transition: background .5s; }
.bx-tile:hover { color: #fff; }
.bx-tile:hover > img { transform: scale(1.12); }
.bx-tile:hover .bx-shade { background: linear-gradient(180deg, rgba(8, 13, 23, .35) 0%, rgba(14, 40, 72, .7) 45%, rgba(8, 13, 23, .95) 100%); }
.bx-top { display: flex; align-items: center; justify-content: space-between; }
.bx-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bx-num { font-family: var(--font-heading); font-size: .85rem; font-weight: 800; color: rgba(255, 255, 255, .7); }
.bx-body { display: flex; flex-direction: column; gap: .5rem; }
.bx-body strong { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2; }
.bx-tile.is-big .bx-body strong { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.bx-desc { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .82); transition: max-height .6s var(--sv-ease), opacity .4s; }
.bx-tile:hover .bx-desc, .bx-tile:focus-visible .bx-desc, .bx-tile.is-big .bx-desc { max-height: 6.5em; opacity: 1; }
.bx-tile.is-big .bx-desc { max-width: 520px; font-size: 1rem; }
.bx-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.bx-foot em { font-style: normal; padding: .3rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.bx-go { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #0B1220; background: #fff; transform: rotate(-45deg) scale(.9); transition: transform .45s var(--sv-ease); }
.bx-tile:hover .bx-go { transform: none; }
.bx-tile:focus-visible { outline: 3px solid #4FCFFF; outline-offset: 3px; }

.hm-dots { display: none; justify-content: center; gap: .5rem; margin-top: 1rem; }
.hm-dots span { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #CDD3DB; cursor: pointer; transition: width .4s var(--sv-ease), background .3s; }
.hm-dots span::after { content: ''; position: absolute; inset: -12px -5px; }   /* bigger tap target */
.hm-dots span.is-active { width: 26px; background: linear-gradient(90deg, #1E8FD0, #16508E); }

/* ---------- Industries carousel: tall photo cards ---------- */
.ix { background: var(--sv-soft); }
.ix-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 420px; padding: 1.3rem; border-radius: 24px; color: #fff; text-decoration: none; background: linear-gradient(145deg, #16508E, #0B1322); box-shadow: 0 30px 60px -44px rgba(11, 18, 32, .8); }
.ix-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.2s var(--sv-ease); }
.ix-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 31, 58, .1) 0%, rgba(12, 31, 58, .35) 45%, rgba(12, 31, 58, .94) 100%); transition: background .5s; }
.ix-card:hover { color: #fff; }
.ix-card:hover > img { transform: scale(1.12); }
.ix-card:hover .ix-shade { background: linear-gradient(180deg, rgba(12, 31, 58, .3) 0%, rgba(22, 80, 142, .6) 45%, rgba(12, 31, 58, .96) 100%); }
.ix-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.ix-body { display: flex; flex-direction: column; gap: .55rem; }
.ix-body strong { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.2; }
.ix-body small { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .85); transition: max-height .6s var(--sv-ease), opacity .4s; }
.ix-card:hover .ix-body small, .ix-card:focus-visible .ix-body small { max-height: 6em; opacity: 1; }
.ix-logos { display: flex; gap: .4rem; }
.ix-logos span { width: 58px; height: 36px; display: flex; align-items: center; justify-content: center; padding: .3rem; border-radius: 8px; background: #fff; }
.ix-logos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ix-body em { font-style: normal; font-size: .85rem; font-weight: 700; color: #8FD7FF; }
.ix-body em i { font-size: .72rem; transition: transform .3s var(--sv-ease); }
.ix-card:hover .ix-body em i { transform: translateX(4px); }

/* ---------- Our work carousel ---------- */
.wkx { background: #fff; }
.sx, .hm-leaders.hm-leaders, .fqx.fqx { background: var(--sv-soft); }
.ex, .hm-posts { background: #fff; }
.wkx-case { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--sv-line); transition: transform .4s var(--sv-ease), box-shadow .4s, border-color .3s; }
.wkx-case:hover { color: inherit; transform: translateY(-4px); border-color: rgba(30, 143, 208, .3); box-shadow: 0 30px 50px -36px rgba(11, 18, 32, .55); }
.wkx-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(145deg, #16508E, #0B1322); }
.wkx-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sv-ease); }
.wkx-case:hover .wkx-img img { transform: scale(1.06); }
.wkx-chip { position: absolute; left: .9rem; top: .9rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: rgba(12, 31, 58, .7); }
.wkx-sample { position: absolute; right: .8rem; top: .8rem; padding: .25rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7C2D12; background: #FDE68A; }
.wkx-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.4rem; }
.wkx-body small { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.wkx-body strong { font-size: 1.12rem; line-height: 1.35; color: var(--sv-ink); }
.wkx-body > span { font-size: .9rem; line-height: 1.6; color: var(--sv-muted); }
.wkx-metric { margin-top: .3rem; font-family: var(--font-heading); font-size: 1.4rem; color: #1E75B0; }
.wkx-metric em { font-family: var(--font-body, inherit); font-style: normal; font-size: .82rem; font-weight: 600; color: var(--sv-muted); }
.wkx-client { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.1rem; border-radius: 22px; color: var(--sv-ink); text-decoration: none; background: #fff; border: 1px solid var(--sv-line); transition: transform .4s var(--sv-ease), box-shadow .4s, border-color .3s; }
.wkx-client:hover { color: var(--sv-ink); transform: translateY(-4px); border-color: rgba(30, 143, 208, .3); box-shadow: 0 30px 50px -36px rgba(11, 18, 32, .55); }
.wkx-logo { display: flex; align-items: center; justify-content: center; height: 130px; padding: 1.2rem 1.6rem; border-radius: 16px; background: linear-gradient(160deg, #F6F8FB, #fff); border: 1px solid var(--sv-line); }
.wkx-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .6s var(--sv-ease); }
.wkx-client:hover .wkx-logo img { transform: scale(1.06); }
.wkx-client strong { font-size: 1.02rem; line-height: 1.3; }
.wkx-desc { font-size: .86rem; line-height: 1.55; color: var(--sv-muted); }
.wkx-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.wkx-tags span { padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #1E75B0; background: rgba(30, 143, 208, .08); }
.wkx-tags span.is-plain { color: #64748B; background: var(--sv-soft); }

/* ---------- Why us: photo + feature grid ---------- */
.yx { background: #fff; }
.yx-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.yx-visual { position: relative; padding-bottom: 2rem; }
.yx-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 28px; box-shadow: 0 50px 90px -50px rgba(11, 18, 32, .7); clip-path: inset(0 0 0 100% round 28px); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
.yx-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.8s var(--sv-ease); }
.yx-visual.is-in .yx-photo { clip-path: inset(0 0 0 0 round 28px); }
.yx-visual.is-in .yx-photo img { transform: scale(1); }
.yx-badge { position: absolute; right: -1.2rem; bottom: 0; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--sv-line); box-shadow: 0 30px 60px -34px rgba(11, 18, 32, .6);
    opacity: 0; transform: translateY(20px); transition: opacity .8s var(--sv-ease) .9s, transform .8s var(--sv-ease) .9s; }
.yx-visual.is-in .yx-badge { opacity: 1; transform: none; }
.yx-badge-icon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #FDC943, #E57E27); }
.yx-badge strong { display: block; font-size: 1rem; color: var(--sv-ink); }
.yx-badge small { font-size: .78rem; color: var(--sv-muted); }
.yx-copy h2 { margin: .9rem 0 .9rem; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; color: var(--sv-ink); }
.yx-intro { margin: 0 0 1.8rem; font-size: 1.06rem; line-height: 1.7; color: var(--sv-muted); }
.yx-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.6rem; margin: 0 0 2.2rem; padding: 0; list-style: none; }
.yx-features li { display: flex; align-items: flex-start; gap: .9rem; }
.yx-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #1E75B0; background: rgba(30, 143, 208, .1); transition: color .3s, background .3s, transform .4s var(--sv-ease); }
.yx-features li:nth-child(4n+2) .yx-icon { color: #4E7A1A; background: rgba(155, 199, 59, .16); }
.yx-features li:nth-child(4n+3) .yx-icon { color: #C26A12; background: rgba(244, 162, 30, .14); }
.yx-features li:nth-child(4n+4) .yx-icon { color: #16508E; background: rgba(79, 207, 255, .16); }
.yx-features li:hover .yx-icon { transform: translateY(-3px); }
.yx-features strong { display: block; font-size: 1.02rem; line-height: 1.3; color: var(--sv-ink); }
.yx-features small { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.55; color: var(--sv-muted); }

/* ---------- How we work ---------- */
.sx-wrap { position: relative; }
.sx-line { position: absolute; top: 31px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--sv-line); }
.sx-line span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #1E8FD0, #9BC73B, #FDC943); transition: transform 1.8s cubic-bezier(.65, 0, .35, 1) .2s; }
.sx-wrap.is-in .sx-line span { transform: scaleX(1); }
.sx-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sx-step { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .8s var(--sv-ease), transform .8s var(--sv-ease); transition-delay: calc(var(--i) * 260ms + 200ms); }
.sx-wrap.is-in .sx-step { opacity: 1; transform: none; }
.sx-dot { width: 64px; height: 64px; margin-bottom: .6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #1E75B0; background: #fff; border: 2px solid var(--sv-line); box-shadow: 0 0 0 8px #fff; transition: color .5s, background .5s, border-color .5s; transition-delay: calc(var(--i) * 260ms + 500ms); }
.sx-wrap.is-in .sx-dot { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1E8FD0, #16508E); }
.sx-wrap.is-in .sx-step:nth-child(2) .sx-dot { background: linear-gradient(135deg, #4FCFFF, #1E75B0); }
.sx-wrap.is-in .sx-step:nth-child(3) .sx-dot { background: linear-gradient(135deg, #9BC73B, #5C8A1E); }
.sx-wrap.is-in .sx-step:nth-child(4) .sx-dot { background: linear-gradient(135deg, #FDC943, #E57E27); }
.sx-num { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.sx-step strong { font-size: 1.15rem; color: var(--sv-ink); }
.sx-step p { margin: 0; max-width: 260px; font-size: .92rem; line-height: 1.6; color: var(--sv-muted); }
.sx-cta { margin-top: 2.4rem; text-align: center; }

/* ---------- Technology partners ---------- */
.ptx { background: var(--sv-soft); }
.ptx-certs { display: flex; flex-wrap: wrap; gap: .6rem; }
.ptx-certs span { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .7rem .9rem; border-radius: 14px; background: #fff; border: 1px solid var(--sv-line); }
.ptx-certs i { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #FDC943, #E57E27); }
.ptx-certs span:nth-child(2) i { background: linear-gradient(135deg, #1E8FD0, #16508E); }
.ptx-certs b { font-size: .92rem; color: var(--sv-ink); }
.ptx-certs small { font-size: .74rem; color: var(--sv-muted); }
.ptx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.ptx-logo { display: flex; align-items: center; justify-content: center; height: 84px; padding: .9rem 1.2rem; border-radius: 16px; font-weight: 700; color: var(--sv-ink); background: #fff; border: 1px solid var(--sv-line); transition: transform .35s var(--sv-ease), box-shadow .35s, border-color .3s; }
.ptx-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ptx-logo:hover { transform: translateY(-4px); border-color: rgba(30, 143, 208, .3); box-shadow: 0 20px 36px -26px rgba(11, 18, 32, .55); }
.ptx-grid [data-reveal] { transition-delay: calc(var(--i, 0) * 35ms); }

/* ---------- FAQ preview ---------- */
.fqx { background: #fff; }
.fqx .sv-head { position: sticky; top: 130px; margin-bottom: 0; }
.fqx-answer { padding: 0 1.3rem 1.2rem; font-size: .94rem; line-height: 1.7; color: var(--sv-muted); }
.fqx-answer p { margin: 0 0 .6rem; padding: 0; font-size: inherit; line-height: inherit; }
.fqx-answer > :last-child { margin-bottom: 0; }
.fqx-answer ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.fqx-answer li { margin-bottom: .3rem; }
.fqx-answer strong { color: var(--sv-ink); }
.fqx-answer a { color: #1E75B0; font-weight: 600; }
.fqx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }

/* ---------- Get to know us ---------- */
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ex-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.1rem; border-radius: 18px; color: var(--sv-ink); text-decoration: none; background: #fff; border: 1px solid var(--sv-line); transition: transform .4s var(--sv-ease), border-color .3s, box-shadow .4s; }
.ex-card::before { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 143, 208, .09), transparent 60%); transition: opacity .3s; }
.ex-card:hover { color: var(--sv-ink); transform: translateY(-3px); border-color: rgba(30, 143, 208, .35); box-shadow: 0 24px 44px -32px rgba(11, 18, 32, .55); }
.ex-card:hover::before { opacity: 1; }
.ex-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #1E75B0; background: rgba(30, 143, 208, .1); transition: color .3s, background .3s; }
.ex-card:hover .ex-icon { color: #fff; background: linear-gradient(135deg, #1E8FD0, #16508E); }
.ex-body { flex: 1; min-width: 0; }
.ex-body strong { display: block; font-size: 1rem; }
.ex-body small { display: block; margin-top: .15rem; font-size: .82rem; line-height: 1.45; color: var(--sv-muted); }
.ex-go { font-size: .78rem; color: #94A3B8; transition: transform .3s var(--sv-ease), color .3s; }
.ex-card:hover .ex-go { color: #1E75B0; transform: translateX(3px); }

/* ---------- Leaders ---------- */
.hm-leaders { background: #fff; }
.hm-leader { position: relative; display: block; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; background: #111A2B; aspect-ratio: 4 / 5; }
.hm-leader-photo { position: absolute; inset: 0; }
.hm-leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--sv-ease); }
.hm-leader::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11, 18, 32, .92)); }
.hm-leader:hover .hm-leader-photo img { transform: scale(1.05); }
.hm-leader-info { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 2; }
.hm-leader-info strong { display: block; font-size: 1.1rem; }
.hm-leader-info small { font-size: .82rem; color: rgba(255, 255, 255, .75); }
.hm-leader:hover .hm-leader:hover { color: #fff; }

/* ---------- Insights ---------- */
.hm-posts-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2rem; }
.hm-post { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; border-radius: 22px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--sv-line); transition: transform .4s var(--sv-ease), box-shadow .4s, border-color .3s; }
.hm-post:hover { color: inherit; transform: translateY(-4px); border-color: rgba(30, 143, 208, .3); box-shadow: 0 30px 50px -36px rgba(11, 18, 32, .55); }
.hm-post.is-feature { grid-row: span 2; grid-template-columns: 1fr; grid-template-rows: minmax(240px, 1fr) auto; }
.hm-post-img { position: relative; overflow: hidden; min-height: 160px; background: linear-gradient(145deg, #16508E, #0B1322); }
.hm-post-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sv-ease); }
.hm-post:hover .hm-post-img img { transform: scale(1.05); }
.hm-post-cat { position: absolute; left: .9rem; top: .9rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(11, 18, 32, .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hm-post-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.4rem; }
.hm-post-body small { font-size: .78rem; color: #94A3B8; }
.hm-post-body strong { font-size: 1.05rem; line-height: 1.35; color: var(--sv-ink); }
.hm-post.is-feature .hm-post-body strong { font-size: 1.4rem; }
.hm-post-body p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--sv-muted); }
.hm-post-body em { margin-top: auto; font-style: normal; font-size: .86rem; font-weight: 700; color: #1E75B0; }
.hm-post-body em i { font-size: .72rem; transition: transform .3s var(--sv-ease); }
.hm-post:hover .hm-post-body em i { transform: translateX(4px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .px-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .wx-grid, .yx-grid { grid-template-columns: 1fr; }
    .yx-visual { max-width: 560px; }
    .yx-photo { aspect-ratio: 4 / 3; }
    .wx-visual { max-width: 640px; }
    .yx-intro { position: static; }
    .fqx .sv-head { position: static; margin-bottom: 1.6rem; }
    /* Bento + reasons become swipeable rows of cards */
    .bx-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1rem; padding: .2rem 1rem 1rem; }
    .bx-grid::-webkit-scrollbar { display: none; }
    .bx-grid [data-reveal] { opacity: 1; transform: none; transition: none; }
    .bx-tile, .bx-tile.is-big { flex: 0 0 min(80%, 380px); height: 380px; padding: 1.4rem; scroll-snap-align: center; }
    .bx-tile .bx-desc { max-height: 6.5em; opacity: 1; }
    .bx-tile.is-big .bx-body strong { font-size: 1.5rem; }
    .hm-dots { display: flex; }
    .hm-posts-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .hm-post.is-feature { grid-row: auto; }
}
@media (max-width: 767px) {
    /* Slides sit on the bottom so every slide's buttons line up just above the dots, whatever the title length */
    .hx { align-items: flex-end; height: auto; min-height: 620px; max-height: none; padding: 6.5rem 0 7rem; }
    .hx-slide { align-self: end; }
    .hx-shade { background: linear-gradient(0deg, rgba(12, 31, 58, .96) 0%, rgba(14, 42, 78, .82) 45%, rgba(22, 80, 142, .55) 80%, rgba(12, 31, 58, .62) 100%); }
    .hx .wy-eyebrow { text-shadow: 0 1px 10px rgba(6, 16, 32, .6); }
    .hx-title { font-size: clamp(2.1rem, 9vw, 2.7rem); margin: .9rem 0 .8rem; }
    .hx-lead { font-size: 1rem; margin-bottom: 1.4rem; }
    .hx-actions .btn { flex: 1 1 auto; height: 50px; }
    .hx-dots { bottom: 3.8rem; }
    .wx, .bx, .ix, .yx, .sx, .wkx, .ptx, .ex, .hm-leaders, .hm-posts, .fqx { padding: 3.2rem 0; }
    .ptx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .ptx-logo { height: 64px; padding: .6rem .7rem; border-radius: 12px; }
    .ix-card { height: 380px; }
    .ix-body small { max-height: 6em; opacity: 1; }
    .ex-grid { grid-template-columns: 1fr; gap: .6rem; }
    .yx-features { grid-template-columns: 1fr; gap: 1.1rem; }
    .yx-badge { right: .6rem; }
        .px-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: -40px; }
    .px-num { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1rem; }
    .px-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1rem; }
    .px-num strong { font-size: 1.6rem; }
    .px-logos { margin-top: 2.4rem; }
    .px-logos-head { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .wx-ticks { grid-template-columns: 1fr; }
    .wx-visual { padding: 1.2rem 0 1.4rem 0; }
    .wx-badge { left: .8rem; bottom: 0; padding: .9rem 1.1rem; }
    .wx-badge strong { font-size: 2rem; }
    .wx-certs { right: .6rem; top: 0; padding: .75rem .85rem; }
    .wx-certs em { display: none; }
    .sx-line { top: 0; bottom: 0; left: 31px; right: auto; width: 2px; height: auto; }
    .sx-line span { transform: scaleY(0); transform-origin: top; }
    .sx-wrap.is-in .sx-line span { transform: scaleY(1); }
    .sx-steps { grid-template-columns: 1fr; gap: 1.8rem; }
    .sx-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.1rem; align-items: start; text-align: left; }
    .sx-dot { grid-row: span 3; margin: 0; }
    .sx-step p { max-width: none; }
    .hm-post { grid-template-columns: 1fr; grid-template-rows: 180px auto; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-bg, .hx-bg img, .hx-ln, .wx-photo, .wx-photo img, .yx-photo, .yx-photo img, .yx-badge, .wx-badge, .wx-certs, .sx-line span, .sx-step, .sx-dot { transition: none !important; }
}