/* Technology page */

@font-face {
    font-family: 'Fontsfree net sfprodisplay';
    src: url('https://uploads-ssl.webflow.com/639e76b6a0716a69a2134f59/639faeab1caa80730f4039fb_FontsFree-Net-SFProDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #000;
    --bg-1: #0a0a0a;
    --bg-2: #101010;
    --bg-3: #141414;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .16);
    --text: #fff;
    --text-soft: #bebebe;
    --muted: #999;
    --muted-2: #7c7c7c;
    --heading-gradient: linear-gradient(to right, #fff 14%, #999 100%);
    --glow: rgba(30, 23, 74, .45);
    --glass: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .06);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --font-head: 'Fontsfree net sfprodisplay', 'Poppins', sans-serif;
    --nav-h: 84px;
}

/* Smooth scrolling: the stacked product cards move and dim on every scrolled frame, so they keep their own
   GPU layers from the start instead of being re-layered (and re-drawn) each time a card begins to be covered.
   Measured on this page: fewer dropped frames in the products section. The same treatment measured slower
   for the services photos and the tiles, so those are left to GSAP. */
.products.is-stacking .product {
    will-change: transform;
}

.product__shade {
    will-change: opacity;
}

/* Lenis */
html.lenis,
html.lenis body {
    height: auto;
}

/* Bootstrap's reboot sets scroll-behavior: smooth on :root. With it, ScrollTrigger's refresh
   (on resize, zoom, load, opening an FAQ) measures while the browser is still animating its
   scroll jump, so the services pin lands thousands of pixels off: a black screen mid-page and
   the panel stuck over the hero. Lenis and our own scrollTo calls do the smoothing instead. */
html.js,
html.lenis {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Base */
*,
*::after,
*::before {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #141414;
}

::-webkit-scrollbar-thumb {
    background: #2e2e2e;
}

body {
    width: 100%;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
}

main [id] {
    scroll-margin-top: var(--nav-h);
}

/* Cards waiting off to the side to fly in must not widen the page. clip (unlike hidden) keeps sticky working. */
main {
    overflow-x: clip;
}

.nav-item {
    margin-right: .7rem !important;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 2100;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus {
    top: 16px;
}

main a:focus-visible,
main button:focus-visible,
footer .contact__details a {
    color: #fff;
}

footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Hidden starting states, only while JS is running the intro */
.js .navbar,
.js .hero-hide {
    visibility: hidden;
}

.js .hero__line>span {
    transform: translateY(105%);
}

/* One grade for every photo so they read as a set: colour, never tints.
   The principle tiles are graded at export instead. */
.hero__bg,
.svc-pane__media img,
.cta-band__media img {
    filter: saturate(1.05) contrast(1.05) brightness(.95);
}

/* Type */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .38rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-soft);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.text-silver {
    background: var(--heading-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* After SplitText runs, each line carries the gradient so masks don't break the clip */
.text-silver.is-split {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #fff;
}

.text-silver.is-split .line {
    width: fit-content;
    background: var(--heading-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-head .text-silver.is-split .line {
    margin-inline: auto;
}

.section {
    position: relative;
    isolation: isolate;
    padding: clamp(64px, 7vw, 112px) 0;
}

.section--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(55% 45% at 50% 0%, var(--glow), transparent 70%);
    pointer-events: none;
}

.section-head {
    max-width: 780px;
    margin: 0 auto clamp(48px, 6vw, 80px);
    text-align: center;
}

.section-head h2 {
    margin: 1.2rem 0 1rem;
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.06;
}

.section-head p:not(.eyebrow) {
    max-width: 560px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Buttons */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.btn-x {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--ease);
}

.btn-x--primary {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.btn-x--primary:hover {
    color: #000;
    box-shadow: 0 12px 40px rgba(255, 255, 255, .16);
}

.btn-x--ghost {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .02);
    color: #fff;
}

.btn-x--ghost:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.btn-x__roll {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.btn-x__roll>span {
    display: block;
    transition: transform .65s var(--ease);
}

.btn-x__roll>span+span {
    position: absolute;
    top: 100%;
    left: 0;
}

.btn-x:hover .btn-x__roll>span {
    transform: translateY(-100%);
}

.btn-x i {
    transition: transform .65s var(--ease);
}

.btn-x:hover i {
    transform: translateX(4px);
}

/* Pointer spotlight */
.spot {
    position: relative;
    isolation: isolate;
}

.spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 42%);
    opacity: 0;
    transition: opacity .6s var(--ease);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .spot:hover::after {
        opacity: 1;
    }
}

/* Hero */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 48px) 0 96px;
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: -8% 0;
    z-index: -2;
}

.hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}

.hero__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
    mix-blend-mode: screen;
}

/* Strong shade behind the copy, the photo stays vivid on the right */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .08) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, #000 100%);
}

.hero__title {
    margin: 1.4rem 0 1.6rem;
    font-family: var(--font-head);
    font-size: clamp(2.8rem, 1.5rem + 5.4vw, 6rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.hero__line {
    display: block;
    overflow: hidden;
    padding-bottom: .1em;
    margin-bottom: -.1em;
}

.hero__line>span {
    display: inline-block;
}

.hero__sheen {
    background-image:
        linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%),
        var(--heading-gradient);
    background-size: 250% 100%, 100% 100%;
    background-position: 150% 0%, 0% 0%;
    background-repeat: no-repeat;
}

.hero__lead {
    max-width: 34rem;
    margin-bottom: 2.4rem;
    color: var(--text-soft);
    font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
    line-height: 1.75;
}

/* Hero visual: the VR cut-out on its own. boy_vr.webp is already transparent, so there is no card; his torso
   fades into the scene instead of ending on a hard line, and a soft light behind his head ties him in */
.hero__visual {
    width: min(100%, 520px);
    width: min(100%, 580px, calc(100svh - var(--nav-h) - 170px));
    margin-inline: auto;
}

.hero__figure-wrap {
    transform-origin: 50% 100%;
}

.hero__figure {
    position: relative;
}

.hero__glow {
    position: absolute;
    top: 2%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 255, .36), rgba(52, 92, 230, .14) 46%, transparent 70%);
    translate: -50% 0;
    pointer-events: none;
}

.hero__guy {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}

/* Statement: words light up with scroll */
.statement {
    padding: clamp(96px, 16vh, 180px) 0;
}

/* Each line is its own layer, so lighting it up never repaints the text */
.statement__line {
    will-change: opacity;
}

.statement__text {
    max-width: 1040px;
    margin: 0 auto;
    color: #fff;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4rem);
    letter-spacing: -.025em;
    line-height: 1.16;
    text-align: center;
}

.word {
    display: inline-block;
}

/* Capability strip */
.caps {
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, .015);
}

.caps__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.caps__list li+li {
    border-left: 1px solid var(--line);
}

.cap {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1.4rem 1.2rem;
    color: #fff;
    text-decoration: none;
    transition: background-color .5s var(--ease);
}

.cap:hover {
    color: #fff;
    background: rgba(255, 255, 255, .025);
}

.cap i {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    font-size: 1.1rem;
    transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

.cap:hover i {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.cap strong {
    display: block;
    font-size: .98rem;
    font-weight: 500;
}

.cap small {
    display: block;
    color: var(--muted);
    font-size: .8rem;
}

/* Services panel */
.svc-panel {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--glass);
    box-shadow: var(--glass-edge), 0 30px 70px rgba(0, 0, 0, .35);
}

.svc-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-right: clamp(16px, 2.4vw, 32px);
    border-right: 1px solid var(--line);
}

/* The active tab's marker: a slim white bar at its left (under the row on tablet and phone). It is moved and
   sized with transforms only, never width or height */
.svc-tabs__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100px;
    border-radius: 2px;
    background: #fff;
    transform-origin: 0 0;
    pointer-events: none;
}

.svc-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .72rem 1rem .72rem 1.15rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    transition: color .45s var(--ease);
}

.svc-tab:hover,
.svc-tab[aria-selected="true"],
.svc-tab[aria-current="true"] {
    color: #fff;
}

.svc-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.svc-tab__num {
    flex: none;
    width: 1.4rem;
    color: var(--muted-2);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.svc-tab[aria-selected="true"] .svc-tab__num {
    color: var(--text-soft);
}

.svc-panes {
    display: grid;
    padding-left: clamp(20px, 3vw, 44px);
}

.svc-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 44%);
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
}

.svc-panel.is-tabs .svc-pane {
    grid-area: 1 / 1;
}

.svc-panel.is-tabs .svc-pane.is-active {
    z-index: 1;
}

.svc-panel.is-tabs .svc-pane:not(.is-active):not(.is-leaving) {
    visibility: hidden;
}

/* Without JS: no tabs, every service stacked */
.svc-panel:not(.is-tabs) {
    grid-template-columns: minmax(0, 1fr);
}

.svc-panel:not(.is-tabs) .svc-tabs {
    display: none;
}

.svc-panel:not(.is-tabs) .svc-panes {
    gap: 3rem;
    padding-left: 0;
}

.svc-panel:not(.is-tabs) .svc-pane+.svc-pane {
    padding-top: 3rem;
    border-top: 1px solid var(--line);
}

.svc-pane .eyebrow {
    padding: 0;
    border: 0;
    background: none;
}

.svc-pane__title {
    margin: .9rem 0 1rem;
    text-wrap: balance;
    color: #fff;
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.svc-pane__desc {
    max-width: 36rem;
    margin-bottom: 1.4rem;
    color: var(--text-soft);
    font-size: 1.02rem;
    line-height: 1.75;
}

.ticks {
    display: grid;
    gap: .65rem;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
}

.ticks li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--text-soft);
    font-size: .95rem;
    font-weight: 400;
}

.ticks li::before {
    content: "";
    position: absolute;
    top: .22em;
    left: .35rem;
    width: .38rem;
    height: .72rem;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

.ticks a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
    text-underline-offset: 4px;
    transition: text-decoration-color .4s var(--ease);
}

.ticks a:hover {
    text-decoration-color: #fff;
}

.chips {
    perspective: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: .32rem .8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-soft);
    font-size: .78rem;
}

.svc-pane__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.price-row {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.price-row__label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.price-row__value {
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.price-row__unit {
    color: var(--muted);
    font-size: .82rem;
}

/* The figure is a layout box (in the pinned deck it is the full-height stage that slides);
   the visible photo is the 4:3 frame inside it */
.svc-pane__media {
    position: relative;
    margin: 0;
}

/* The supplied photos are about 460-545px wide, so the frame is capped: never shown much above 1.25x */
.svc-pane__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-width: 640px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg-2);
}

.svc-pane__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45));
    pointer-events: none;
}

/* Keep each picture's subject in frame when the frame crops it: the phone in hand, the robot's head */
#svc-mobile .svc-pane__media img {
    object-position: 30% 50%;
}

#svc-ai .svc-pane__media img {
    object-position: 50% 30%;
}

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

/* Darkens a photo as it recedes in the pinned stack */
.svc-pane__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

/* Darkens a stacked card as the next one covers it */
.svc-pane__dim {
    display: none;
}

.svc-rail,
.svc-meta {
    display: none;
}

/* Old links to the two retired services land here (see technology.js for the scripted version) */
.svc-alias {
    display: block;
    height: 0;
    scroll-margin-top: 120px;
}

/* Services, pinned mode (desktop, 1200px and wider): scrolling moves through the services. The panel is as tall as
   its longest service and is centred in the space under the navbar (technology.js) */
.svc-panel.is-pinned {
    grid-template-columns: 264px minmax(0, 1fr);
    padding: clamp(36px, 3.6vw, 56px);
}

.svc-panel.is-pinned .svc-tabs {
    justify-content: center;
    border-right: 0;
}

/* A hairline between the tabs and the service, with a soft fill for progress */
.svc-panel.is-pinned .svc-rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 1px;
    background: var(--line);
}

.svc-rail__fill {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .45);
    transform: scaleY(0);
    transform-origin: top;
}

.svc-panel.is-pinned .svc-meta {
    display: flex;
    margin-top: 1.25rem;
    padding: 0 1.15rem;
    color: var(--muted);
    font-size: .76rem;
}

.svc-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: opacity .6s var(--ease);
}

.svc-hint.is-hidden {
    opacity: 0;
}

.svc-panel.is-pinned .svc-panes {
    min-height: 0;
    padding-left: 48px;
    overflow: hidden;
}

.svc-panel.is-pinned .svc-pane,
.svc-panel.is-pinned .svc-pane:not(.is-active):not(.is-leaving) {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: stretch;
    gap: 48px;
    height: 100%;
    min-height: 0;
    visibility: visible;
}

/* No stacking context per pane, so photos from every pane can layer in one deck */
.svc-panel.is-pinned .svc-pane.is-active {
    z-index: auto;
}

.svc-panel.is-pinned .svc-pane:not(.is-active):not(.is-leaving) .svc-pane__body {
    visibility: hidden;
}

.svc-panel.is-pinned .svc-pane__body {
    align-self: center;
}

/* The active tab already names the service */
.svc-panel.is-pinned .svc-pane .eyebrow {
    display: none;
}

.svc-panel.is-pinned .svc-pane__title {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 1.05rem + 1.25vw, 2.25rem);
}

.svc-panel.is-pinned .svc-pane__desc {
    margin-bottom: 1.5rem;
    font-size: .98rem;
    line-height: 1.6;
}

.svc-panel.is-pinned .ticks {
    gap: .55rem;
    margin-bottom: 1.5rem;
}

.svc-panel.is-pinned .chips {
    margin-bottom: 1.5rem;
}

.svc-panel.is-pinned .svc-pane__foot {
    flex-wrap: nowrap;
    padding-top: 1.25rem;
}

.svc-panel.is-pinned .price-row {
    min-width: 0;
}

.svc-panel.is-pinned .price-row__label {
    letter-spacing: .1em;
}

.svc-panel.is-pinned .price-row__value {
    font-size: 1.2rem;
}

.svc-panel.is-pinned .svc-pane__foot .btn-x {
    flex: none;
    padding: .72rem 1.3rem;
    font-size: .92rem;
}

/* The photo stage is as tall as the text, so the next photo still enters from below the panel edge */
.svc-panel.is-pinned .svc-pane__media {
    height: 100%;
}

.svc-panel.is-pinned .svc-pane__frame {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
}

/* Laptop-height screens: one step tighter so the panel fits under the navbar */
@media (max-height: 860px) {
    .svc-panel.is-pinned {
        padding: 30px 40px;
    }

    .svc-panel.is-pinned .svc-tab {
        padding-block: .55rem;
        font-size: .9rem;
    }

    .svc-panel.is-pinned .svc-panes {
        padding-left: 40px;
    }

    .svc-panel.is-pinned .svc-pane,
    .svc-panel.is-pinned .svc-pane:not(.is-active):not(.is-leaving) {
        gap: 40px;
    }

    .svc-panel.is-pinned .svc-pane__title {
        margin-bottom: .75rem;
        font-size: clamp(1.45rem, .95rem + 1.1vw, 1.95rem);
    }

    .svc-panel.is-pinned .svc-pane__desc {
        margin-bottom: 1.1rem;
        font-size: .9rem;
        line-height: 1.55;
    }

    .svc-panel.is-pinned .ticks {
        gap: .4rem;
        margin-bottom: 1.1rem;
    }

    .svc-panel.is-pinned .ticks li {
        font-size: .88rem;
    }

    .svc-panel.is-pinned .chips {
        margin-bottom: 1.1rem;
    }

    .svc-panel.is-pinned .chips li {
        padding: .24rem .72rem;
        font-size: .74rem;
    }

    .svc-panel.is-pinned .svc-pane__foot {
        padding-top: 1rem;
    }

    .svc-panel.is-pinned .price-row__value {
        font-size: 1.1rem;
    }

    .svc-panel.is-pinned .svc-pane__foot .btn-x {
        padding: .65rem 1.25rem;
        font-size: .88rem;
    }
}

/* Services, stacked cards (tablet/mobile) and plain list (reduced motion) */
.svc-panel.is-stack,
.svc-panel.is-list {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.svc-panel.is-stack .svc-tabs,
.svc-panel.is-list .svc-tabs {
    display: flex;
    flex-direction: row;
    gap: .25rem;
    margin-bottom: 1.6rem;
    padding: 0 0 1rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.svc-panel.is-stack .svc-tab,
.svc-panel.is-list .svc-tab {
    flex: 0 0 auto;
    width: auto;
    padding: .6rem .95rem;
}

.svc-panel.is-stack .svc-tabs__indicator,
.svc-panel.is-list .svc-tabs__indicator {
    top: auto;
    bottom: -1px;
    width: 100px;
    height: 2px;
}

.svc-panel.is-stack .svc-panes,
.svc-panel.is-list .svc-panes {
    display: block;
    padding-left: 0;
}

.svc-panel.is-stack .svc-panes .svc-pane,
.svc-panel.is-list .svc-panes .svc-pane {
    margin-bottom: 1.25rem;
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, #121212, #0b0b0b);
    box-shadow: var(--glass-edge), 0 16px 40px rgba(0, 0, 0, .35);
}

.svc-panel.is-stack .svc-panes .svc-pane {
    position: sticky;
    top: var(--stick, 96px);
    overflow: hidden;
    transform-origin: 50% 0;
}

.svc-panel.is-stack .svc-pane__dim {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.stack-mark {
    height: 0;
}

/* How we build tiles */
.tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One element per job, so no two tweens share a property:
   li = reveal, card = hover tilt + scroll-out, media = parallax, img = zoom.
   Perspective lives on the parents, so a tile at rest has a flat transform and drops its GPU layer. */
.tiles {
    perspective: 1400px;
}

/* The other sweep-in cards keep their perspective on the parent too (see sweepRows in technology.js) */
.phases__list,
#pricing .row,
.tech-accordion {
    perspective: 1400px;
}

.tile {
    position: relative;
    perspective: 1200px;
}

.tile__card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--bg-2);
    transition: opacity .5s var(--ease);
}

.tile__media {
    position: absolute;
    inset: 0;
}

/* Bleed for the hover counter-shift (at most 8px) */
.js .tile__media {
    inset: -3%;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1.2s var(--ease);
}

.tile__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--tile-shade);
    pointer-events: none;
}

.tiles {
    --tile-shade-rest: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .88) 100%);
    --tile-shade-open: linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, .66) 50%, rgba(0, 0, 0, .92) 100%);
    --tile-shade: var(--tile-shade-rest);
}

/* Where the description is always shown the title sits higher, so the shade starts higher too */
html:not(.js) .tiles {
    --tile-shade: var(--tile-shade-open);
}

@media (hover: none), (max-width: 767.98px) {
    .tiles {
        --tile-shade: var(--tile-shade-open);
    }
}

/* Glare under the pointer */
.tile__card.spot::after {
    z-index: 6;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 45%);
}

/* Layers injected by technology.js for the fly-in */
.tile__shade,
.tile__dim,
.tile__sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tile__shade {
    z-index: 1;
    background: #000;
    opacity: 0;
}

.tile__sheen {
    z-index: 3;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .12) 50%, transparent 68%);
    transform: translateX(-130%);
}

.tile__dim {
    z-index: 5;
    background: #000;
    opacity: 0;
}

.tile__line {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    z-index: 7;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    transform-origin: 0 50%;
    pointer-events: none;
}

.tile__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    padding: 1.4rem 1.5rem;
}

.tile h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

.tile p {
    margin: .5rem 0 0;
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.55;
}

/* With a mouse the description waits below the title until hover.
   Touch, phones, no-JS and reduced motion (which drops .js) always show it. */
@media (hover: hover) and (min-width: 768px) {
    .js .tile__body {
        transform: translateY(var(--shift, 0px));
        transition: transform .8s var(--ease);
    }

    .js .tile p {
        opacity: 0;
        transition: opacity .6s var(--ease);
    }

    .js .tile__card:hover .tile__body {
        transform: translateY(0);
    }

    .js .tile__card:hover p {
        opacity: 1;
        transition-delay: .1s;
    }

    .tile__card:hover img {
        scale: 1.05;
    }
}

/* Spotlight the hovered tile */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .tiles:has(.tile__card:hover) .tile__card:not(:hover) {
        opacity: .7;
    }
}

/* Products */
.product {
    display: grid;
    /* The text column is the tall one, so it gets the extra width: fewer wrapped lines, a shorter card */
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 3.6vw, 64px);
    margin-bottom: 2rem;
    padding: clamp(28px, 4.4vh, 52px) clamp(28px, 3.4vw, 54px);
    border: 1px solid var(--line);
    border-radius: 32px;
    /* Opaque, so a card being covered never shows through the one on top */
    background: linear-gradient(180deg, #131313, #0a0a0a);
    box-shadow: var(--glass-edge), 0 -20px 60px rgba(0, 0, 0, .45);
}

.product--reverse .product__info {
    order: 2;
}

/* Sticky stacking: each product sticks, the next slides over it */
.products.is-stacking .product {
    position: sticky;
    top: var(--stick, 110px);
    transform-origin: 50% 0;
}

.product__shade {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.product__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .4rem;
}

.product__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: #000;
    font-size: 1.15rem;
}

.product__brand h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.85rem, 1.3rem + 1.3vw, 2.55rem);
    font-weight: 400;
    letter-spacing: -.02em;
}

.product__tagline {
    margin: 0 0 20px;
    color: var(--text-soft);
    font-size: 1.02rem;
}

.product__lead {
    max-width: 44ch;
    margin: 0 0 28px;
    color: #e8e8e8;
    font-size: 1.06rem;
    line-height: 1.65;
}

.product__features {
    margin-bottom: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.product__features h4 {
    margin: 0 0 14px;
    color: var(--muted);
    font-family: "Poppins", sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checks li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--text-soft);
    font-size: .95rem;
    line-height: 1.45;
}

.checks li::before {
    content: "";
    position: absolute;
    top: .22em;
    left: .3rem;
    width: .32rem;
    height: .62rem;
    border: solid rgba(255, 255, 255, .85);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* One size smaller than the page's main buttons */
.product__info>.btn-x {
    padding: .7rem 1.3rem;
    font-size: .9rem;
}

/* Short laptop screens: one step tighter, so a stuck card still fits below the navbar */
@media (min-width: 992px) and (max-height: 840px) {
    .product {
        padding-block: 26px;
    }

    .product__brand h3 {
        font-size: clamp(1.75rem, 1.2rem + 1.1vw, 2.2rem);
    }

    .product__tagline {
        margin-bottom: 16px;
        font-size: .98rem;
    }

    .product__lead {
        margin-bottom: 20px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .product__features {
        margin-bottom: 24px;
        padding-top: 16px;
    }

    .product__features h4 {
        margin-bottom: 10px;
    }

    .checks {
        gap: 9px 28px;
    }

    .checks li {
        font-size: .9rem;
    }
}

.product__visual {
    position: relative;
    padding: 2% 7% 13% 5%;
}

.product__devices {
    position: relative;
    transform-style: preserve-3d;
}

/* Device frames. Sizes inside scale with the frame via container units. */
.laptop {
    position: relative;
    container-type: inline-size;
}

.laptop__bezel {
    padding: 1.4cqw;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 2.2cqw 2.2cqw 0 0;
    background: #151515;
    box-shadow: var(--glass-edge), 0 40px 80px rgba(0, 0, 0, .6);
}

.laptop__screen {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: .8cqw;
    background: #0b0b0b;
    font-size: 2cqw;
}

.laptop__base {
    position: relative;
    height: 2.4cqw;
    margin: 0 -4%;
    border: 1px solid var(--line);
    border-radius: 0 0 2.4cqw 2.4cqw;
    background: linear-gradient(#2a2a2a, #121212);
}

.laptop__base::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 16%;
    height: 45%;
    border-radius: 0 0 1cqw 1cqw;
    background: #0d0d0d;
    transform: translateX(-50%);
}

.phone {
    position: absolute;
    right: -5%;
    bottom: -14%;
    z-index: 2;
    width: 27%;
    container-type: inline-size;
}

.phone__body {
    padding: 3cqw;
    border: 1px solid var(--line-strong);
    border-radius: 15cqw;
    background: #141414;
    box-shadow: var(--glass-edge), 0 30px 60px rgba(0, 0, 0, .7);
}

.phone__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
    border-radius: 12cqw;
    background: #0b0b0b;
    font-size: 6.8cqw;
}

/* Laptop UI */
.ui {
    display: grid;
    grid-template-rows: 2.6em minmax(0, 1fr);
    height: 100%;
    color: #e9e9e9;
    font-family: "Poppins", sans-serif;
    line-height: 1.35;
}

.ui p {
    margin: 0;
}

.ui__top {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: #0e0e0e;
}

.ui__dots {
    display: flex;
    gap: .4em;
}

.ui__dots b {
    display: block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #3a3a3a;
}

.ui__title {
    color: #cfcfcf;
    font-size: .8em;
    font-weight: 500;
}

.ui__search {
    display: flex;
    align-items: center;
    gap: .5em;
    min-width: 12em;
    margin-left: auto;
    padding: .3em .9em;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #8a8a8a;
    font-size: .7em;
}

.ui__avatar {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: linear-gradient(135deg, #d9d9d9, #5b5b5b);
}

.ui__body {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    min-height: 0;
}

.ui__side {
    display: flex;
    flex-direction: column;
    gap: .25em;
    margin: 0;
    padding: 1em .7em;
    border-right: 1px solid rgba(255, 255, 255, .06);
    background: #0d0d0d;
    list-style: none;
}

.ui__side li {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .45em .6em;
    border-radius: .5em;
    color: #8d8d8d;
    font-size: .72em;
}

.ui__side li.is-on {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ui__main {
    display: flex;
    flex-direction: column;
    gap: .8em;
    min-width: 0;
    padding: 1em;
    overflow: hidden;
}

.ui-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6em;
}

.ui-kpi,
.ui-card,
.ui-folder {
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .7em;
    background: rgba(255, 255, 255, .035);
}

.ui-kpi {
    padding: .6em .75em;
}

.ui-kpi span {
    display: block;
    color: #8a8a8a;
    font-size: .62em;
}

.ui-kpi b {
    display: block;
    margin-top: .15em;
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
}



.ui-card {
    min-width: 0;
    padding: .75em .85em;
}

.ui-card__title {
    margin-bottom: .7em !important;
    color: #bdbdbd;
    font-size: .68em;
    font-weight: 500;
}

.ui-bars {
    display: flex;
    align-items: flex-end;
    gap: .5em;
    height: 9em;
}

.ui-bars i {
    flex: 1;
    height: var(--h);
    border-radius: .25em .25em .1em .1em;
    background: linear-gradient(180deg, #f2f2f2, rgba(255, 255, 255, .16));
}




.ui-row {
    display: grid;
    grid-template-columns: 1.4em minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .6em;
    padding: .5em .2em;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #dcdcdc;
    font-size: .64em;
}



.ui-muted {
    color: #7d7d7d;
}

.ui-pill {
    padding: .15em .65em;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #bdbdbd;
    font-size: .9em;
}


/* Muted semantic status colours, for realism inside product mockups only */
.ui-pill--ok {
    border-color: rgba(111, 207, 151, .4);
    background: rgba(111, 207, 151, .14);
    color: #9fe0b9;
}


.ui-m__name .ui-pill {
    margin-left: .35em;
    font-size: .5em;
    vertical-align: middle;
}


.ui-folder {
    display: flex;
    flex-direction: column;
    gap: .2em;
    padding: .9em .8em;
}

.ui-folder i {
    margin-bottom: .3em;
    color: #fff;
    font-size: 1.4em;
}

.ui-folder b {
    font-size: .72em;
    font-weight: 500;
}

.ui-folder span {
    color: #7d7d7d;
    font-size: .58em;
}


.ui-chart {
    display: block;
    width: 100%;
    height: 7.5em;
}

.ui-chart__line {
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.ui-chart__area {
    fill: rgba(255, 255, 255, .07);
}

.ui-table {
    display: flex;
    flex-direction: column;
}

.ui-tr {
    display: grid;
    grid-template-columns: 1.3fr 1fr .8fr .6fr;
    gap: .5em;
    padding: .45em .2em;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #d6d6d6;
    font-size: .62em;
}

.ui-tr--head {
    color: #7d7d7d;
    font-size: .54em;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Phone UI */
.ui-m {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 1.1em 1em;
    color: #ececec;
    font-family: "Poppins", sans-serif;
    line-height: 1.35;
}

.ui-m p {
    margin: 0;
}

.ui-m__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.8em;
    padding: 0 .4em;
    color: #cfcfcf;
    font-size: .62em;
}

.ui-m__island {
    width: 5.5em;
    height: 1.6em;
    border: 1px solid #1d1d1d;
    border-radius: 999px;
    background: #000;
}

.ui-m__hello {
    margin-top: .6em !important;
    color: #8a8a8a;
    font-size: .62em;
}

.ui-m__name {
    margin: .1em 0 .9em !important;
    font-size: 1em;
    font-weight: 600;
}

.ui-m__hero {
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: .9em;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .9em;
    background: rgba(255, 255, 255, .05);
    font-size: .7em;
}




.ui-m__label {
    margin: 1.2em 0 .6em !important;
    color: #8a8a8a;
    font-size: .58em;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ui-m__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45em;
}

.ui-m__grid div,
.ui-m__feed div {
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .7em;
    background: rgba(255, 255, 255, .04);
}

.ui-m__grid div {
    padding: .6em .3em;
    text-align: center;
}

.ui-m__grid b {
    display: block;
    font-size: 1em;
}

.ui-m__grid span {
    color: #8a8a8a;
    font-size: .55em;
}

.ui-m__feed {
    display: flex;
    flex-direction: column;
    gap: .45em;
}

.ui-m__feed div {
    display: flex;
    flex-direction: column;
    padding: .6em .75em;
}

.ui-m__feed b {
    font-size: .66em;
    font-weight: 600;
}

.ui-m__big {
    font-size: 1.9em;
    font-weight: 600;
    line-height: 1.1;
}

.ui-m__feed span {
    color: #8a8a8a;
    font-size: .56em;
}

.ui-m__nav {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    padding: .7em 0 .2em;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #6f6f6f;
    font-size: .8em;
}

.ui-m__nav .is-on {
    color: #fff;
}

.product-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 2.5rem 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .02);
    list-style: none;
}

.product-strip li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.3rem 1.4rem;
    color: var(--text-soft);
    font-size: .92rem;
}

.product-strip li+li {
    border-left: 1px solid var(--line);
}

.product-strip i {
    color: #fff;
    font-size: 1.2rem;
}

/* Process */
.phases {
    position: relative;
    padding-top: 2.5rem;
}

.phases__line {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--line);
}

.phases__line span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15));
    transform-origin: left;
}

.phases__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase {
    overflow: hidden;
    min-height: 260px;
    padding: 1.8rem 1.6rem 2rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--glass);
    box-shadow: var(--glass-edge);
}

.phase__num {
    position: absolute;
    top: .2rem;
    right: 1rem;
    color: transparent;
    font-family: var(--font-head);
    font-size: 5.5rem;
    line-height: 1;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
}

.phase .phase__label {
    margin: 0 0 3.4rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.phase h3 {
    margin: 0 0 .7rem;
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

.phase p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.65;
}

/* Pricing */
.price-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.9rem 1.7rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .06), transparent 55%),
        linear-gradient(180deg, #121212, #0a0a0a);
    box-shadow: var(--glass-edge);
    color: #fff;
    text-decoration: none;
    transition: border-color .6s var(--ease), translate .7s var(--ease);
}

.price-card:hover {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    translate: 0 -4px;
}

.price-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.price-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    background: rgba(255, 255, 255, .04);
    font-size: 1.15rem;
    transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

.price-card:hover .price-card__icon {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.price-card__tag {
    padding: .3rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.price-card h3 {
    margin: 0 0 .6rem;
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
}

.price-card__desc {
    margin: 0 0 1.3rem;
    color: var(--text-soft);
    font-size: .93rem;
    line-height: 1.6;
}

/* What the price covers; grows so every card's price lines up at the same height */
.price-card__list {
    display: grid;
    flex-grow: 1;
    align-content: start;
    gap: .55rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.price-card__list li {
    position: relative;
    padding-left: 1.5rem;
    color: #e6e6e6;
    font-size: .9rem;
}

.price-card__list li::before {
    content: "";
    position: absolute;
    top: .25em;
    left: .3rem;
    width: .3rem;
    height: .6rem;
    border: solid rgba(255, 255, 255, .8);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.price-card__foot {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}

.price-card__from {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* How each service is priced, in words (no figures) */
.price-card__range {
    font-family: var(--font-head);
    font-size: 1.75rem;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.price-card__unit {
    color: var(--muted);
    font-size: .88rem;
}

.price-card__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.3rem;
    color: var(--text-soft);
    font-size: .88rem;
    font-weight: 500;
    transition: color .5s var(--ease);
}

.price-card__more i {
    transition: translate .5s var(--ease);
}

.price-card:hover .price-card__more {
    color: #fff;
}

.price-card:hover .price-card__more i {
    translate: 4px 0;
}

.price-note {
    margin-top: 2.6rem;
    color: var(--muted);
    font-size: .92rem;
    text-align: center;
}

.price-note p {
    margin: 0 0 .35rem;
}

.price-note i {
    margin-right: .3rem;
    color: #fff;
}

/* FAQ */
.faq-tabs {
    position: relative;
    display: flex;
    justify-content: center;
    gap: clamp(1.2rem, 3vw, 2.6rem);
    max-width: 760px;
    margin: 0 auto 2.4rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.faq-tabs::-webkit-scrollbar {
    display: none;
}

.faq-tab {
    padding: .9rem .2rem 1rem;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .45s var(--ease);
}

.faq-tab:hover,
.faq-tab[aria-selected="true"] {
    color: #fff;
}

.faq-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.faq-tabs__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
}

.faq-pane {
    max-width: 1080px;
    margin: 0 auto;
}

.faq:not(.is-tabs) .faq-tabs {
    display: none;
}

.faq:not(.is-tabs) .faq-pane+.faq-pane {
    margin-top: .75rem;
}

.tech-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text-soft);
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-color: #fff;
    --bs-accordion-btn-padding-y: 1.15rem;
    --bs-accordion-btn-padding-x: 1.3rem;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: #fff;
    --bs-accordion-body-padding-x: 1.3rem;
    --bs-accordion-body-padding-y: 0;
}

.tech-accordion .accordion-item {
    overflow: hidden;
    margin-bottom: .75rem;
    border: 1px solid var(--line);
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .025);
    transition: border-color .5s var(--ease), background-color .5s var(--ease);
}

.tech-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .045);
}

.tech-accordion .accordion-button {
    border-radius: 18px !important;
    font-size: .98rem;
    font-weight: 500;
}

/* Bootstrap's dark theme tints the chevron blue; keep it white */
.tech-accordion .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
}

.tech-accordion .accordion-button:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
}

.tech-accordion .accordion-body a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
    text-underline-offset: 4px;
    transition: text-decoration-color .4s var(--ease);
}

.tech-accordion .accordion-body a:hover {
    text-decoration-color: #fff;
}

.tech-accordion .accordion-body {
    padding-bottom: 1.2rem;
    font-size: .93rem;
    line-height: 1.7;
}

/* CTA */
.cta {
    padding-top: 0;
}

.cta-band {
    overflow: hidden;
    padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px);
    border: 1px solid var(--line);
    border-radius: 32px;
    background:
        radial-gradient(70% 90% at 0% 0%, var(--glow), transparent 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(255, 255, 255, .07), transparent 60%),
        var(--bg-1);
    box-shadow: var(--glass-edge);
}


.cta-band h2 {
    margin: 1.2rem 0 1rem;
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.06;
}

.cta-band__text>p:not(.eyebrow) {
    max-width: 32rem;
    margin-bottom: 2rem;
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}

.cta-band__media {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.cta-band__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

/* Real product screenshots in the laptop and phone: the whole picture, top-aligned and never stretched; the strip
   below continues the apps' own dark page colour (sampled from the screenshots) */
.laptop__screen--shot {
    background: #040b16;
}

/* With the window-opening reveal the screen stays dark until the picture slides in */
.laptop__screen--shot:has(> .wipe) {
    background: #0b0b0b;
}

.laptop__screen--shot .wipe__inner {
    background: #040b16;
}

.phone__screen--shot {
    background: #020e22;
}

/* The phone pictures are made at the screen's own 9:19.5 shape, so nothing is cropped */
.phone__shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.laptop__shot {
    display: block;
    width: 100%;
    height: auto;
}

/* Window-opening reveal (UAE "split slide"): the wrapper slides in from the left while its contents
   counter-slide from the right, so only the opening edge moves. Wrappers are added by technology.js. */
.wipe {
    display: block;
    overflow: hidden;
    height: 100%;
}

.wipe__inner {
    position: relative;
    height: 100%;
}

/* Tech marquee (UAE rails, About us logo slide). Without JS or with reduced motion: a wrapped list */
.rails {
    position: relative;
    padding: clamp(28px, 4vw, 52px) 0;
    border-block: 1px solid var(--line);
    background: var(--bg);
}

.rails__label {
    margin: 0 0 1.1rem;
    color: var(--muted-2);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
}

.rails__row {
    position: relative;
    overflow: hidden;
}

.rails__row+.rails__row {
    margin-top: .5rem;
}

.rails__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 0;
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.rails__track li {
    position: relative;
    padding: 0 clamp(18px, 2.2vw, 34px);
    color: #d6d6d6;
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 1rem + 1.3vw, 2.3rem);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.rails__track li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-2);
    translate: 0 -50%;
}

.rails__row--quiet {
    opacity: .42;
}

.rails__row--quiet .rails__track li {
    font-family: "Poppins", sans-serif;
    font-size: clamp(.9rem, .8rem + .3vw, 1.05rem);
}

.rails__row--quiet .rails__track li::after {
    width: 4px;
    height: 4px;
}

.rails.is-running .rails__row::before,
.rails.is-running .rails__row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: clamp(40px, 10vw, 160px);
    pointer-events: none;
}

.rails.is-running .rails__row::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
}

.rails.is-running .rails__row::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), transparent);
}

.rails.is-running .rails__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding: 0;
    animation: tech-rail 48s linear infinite;
}

.rails.is-running .rails__row--quiet .rails__track {
    animation-duration: 60s;
    animation-direction: reverse;
}

.rails.is-paused .rails__track {
    animation-play-state: paused;
}

@keyframes tech-rail {
    to {
        transform: translateX(-50%);
    }
}

/* Cursor ring (UAE): a soft ring that follows the real pointer. The pointer itself stays the system's own,
   which is drawn outside the page and so never lags. Only created by technology.js for a mouse with motion
   allowed, and hidden over the navbar, the mobile menu and text fields */
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2050;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    translate: -50% -50%;
}

.cursor-ring {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .55);
    transition: scale .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
}

.cursor-ring.is-hot {
    scale: 1.6;
    border-color: rgba(255, 255, 255, .85);
    background-color: rgba(255, 255, 255, .06);
}

/* Floating hero figure (UAE floaty). The translate property never fights GSAP's transforms */
.js .hero__figure {
    animation: hero-float 9s ease-in-out infinite;
}

@keyframes hero-float {
    50% {
        translate: 0 -8px;
    }
}

/* Scroll cue (influencer marketing mouse) */
.hero__cue {
    display: none;
}

@media (min-width: 992px) and (min-height: 700px) {
    .js .hero__cue {
        position: absolute;
        bottom: 28px;
        left: 50%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        color: var(--muted);
        font-size: .68rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        opacity: 0;
        translate: -50% 0;
        transition: opacity .6s var(--ease);
    }
}

.hero__cue.is-gone {
    opacity: 0 !important;
}

.hero__mouse {
    position: relative;
    width: 22px;
    height: 34px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 12px;
}

.hero__mouse i {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: #fff;
    translate: -50% 0;
    animation: cue-drop 1.8s var(--ease) infinite;
}

@keyframes cue-drop {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Endless ambient motion rests while its section is off screen */
.is-off .hero__figure,
.is-off .hero__mouse i {
    animation-play-state: paused;
}

/* Process journey (the team and social pages' pinned horizontal track): desktop with room only */
.phases.is-journey .phases__list {
    display: flex;
    width: max-content;
}

.phases.is-journey .phase {
    flex: 0 0 auto;
    width: clamp(380px, 34vw, 500px);
}

/* Heading and cards pin together, so the block is tightened to fit a 700px-tall window */
#process.is-journey .section-head {
    margin-bottom: 32px;
}

.phases.is-journey {
    padding-top: 2rem;
}

.phases.is-journey .phase {
    min-height: 236px;
}

/* Typing heading: a slim caret rides after the last typed character. It never blinks. */
.section-head h2.is-typing {
    position: relative;
}

.type-caret {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    border-radius: 1px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .55);
    opacity: 0;
    pointer-events: none;
}

/* Pricing flight: progress line, one light sweep and a top hairline per card (added by technology.js) */
.price-progress {
    display: none;
}

.js .price-progress {
    position: relative;
    display: block;
    overflow: hidden;
    height: 1px;
    margin: 0 0 28px;
    background: var(--line);
}

.price-progress span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .15), #fff);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.price-card__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .1) 50%, transparent 68%);
    transform: translateX(-130%);
    pointer-events: none;
}

.price-card__line {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Depth for the price cards' hover tilt and the product text's side entrance */
#pricing .row>*,
.product__info {
    perspective: 1200px;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .svc-panel {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .svc-tab {
        gap: .6rem;
        padding-inline: .7rem;
        font-size: .86rem;
    }

    .svc-pane {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 40%);
    }
}

@media (max-width: 991.98px) {
    :root {
        --nav-h: 72px;
    }

    .hero__visual {
        width: min(78%, 400px);
    }

    .caps__list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .caps__list::-webkit-scrollbar {
        display: none;
    }

    .caps__list li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .svc-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .svc-tabs {
        flex-direction: row;
        gap: .25rem;
        margin-bottom: 1.6rem;
        padding: 0 0 1rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .svc-tabs::-webkit-scrollbar {
        display: none;
    }

    .svc-tab {
        flex: 0 0 auto;
        width: auto;
        padding: .6rem .95rem;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .svc-panes {
        padding-left: 0;
    }

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

    .product {
        grid-template-columns: minmax(0, 1fr);
    }

    .product--reverse .product__info {
        order: 0;
    }

    /* width is required: the size-contained laptop has no intrinsic width, so an auto-sized grid item collapses */
    .product__visual {
        justify-self: center;
        width: 100%;
        max-width: 640px;
    }

    .product-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-strip li:nth-child(3) {
        border-left: 0;
    }

    .product-strip li:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }

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

}

@media (max-width: 767.98px) {
    .svc-pane {
        grid-template-columns: minmax(0, 1fr);
    }

    .svc-panel.is-tabs .svc-pane:not(.is-active):not(.is-leaving) {
        display: none;
    }

    .svc-pane__media {
        order: -1;
    }

    .svc-pane__frame {
        max-width: none;
    }

    .tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    /* No hover on phones, so no bleed */
    .js .tile__media {
        inset: 0;
    }

    .phases__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .phases {
        padding-top: 0;
    }

    .phases__line {
        display: none;
    }

    .phase {
        min-height: 0;
    }

    .phase .phase__label {
        margin-bottom: 1.6rem;
    }
}

@media (max-width: 575.98px) {
    .hero {
        padding-bottom: 64px;
    }

    .hero .btn-row .btn-x {
        justify-content: center;
        width: 100%;
    }

    .hero__visual {
        width: min(82%, 320px);
    }

    .statement__text {
        text-align: left;
    }

    .svc-pane__foot .btn-x {
        justify-content: center;
        width: 100%;
    }

    .checks {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-strip li+li {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}