/* =========================================================
   Mobile App Development Dubai — page styles
   Scoped under .dubai-page / .dubai-hero to avoid leaking
   into the shared service page styles in style.css
   ========================================================= */

.dubai-hero {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    display: flex;
    align-items: center;
    isolation: isolate;
}

/* Background video fills the rounded card */
.dubai-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Darkening overlay so the white copy stays readable over any frame */
.dubai-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 20, .72) 0%, rgba(3, 8, 20, .55) 45%, rgba(3, 8, 20, .78) 100%);
    z-index: -1;
}

.dubai-hero__inner {
    width: 100%;
    padding: 90px 0;
    text-align: center;
}

.dubai-hero__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 auto 28px;
    max-width: 900px;
}

.dubai-hero__subtitle {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.65;
    max-width: 1030px;
    margin: 0 auto;
}

/* ---------- Feature cards ---------- */

.dubai-hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 56px 0 64px;
}

.dubai-feature {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    text-align: left;
    /* Gradient border that blends with the fill: the fill sits in the
       padding-box, a brighter matching gradient in the border-box, and the
       1px border is transparent so it reveals that border-box gradient --
       blue hairline up top fading to dark at the bottom, following the fill.
       Shadow lifts the card off the dark hero background. */
    background:
        linear-gradient(360deg, #000113 0%, #00418C 100%) padding-box,
        linear-gradient(360deg, #16233f 0%, #5c8fd0 100%) border-box;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(5px);
    transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.dubai-feature__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .35s ease, border-color .35s ease, border-radius .35s ease;
}

.dubai-feature__icon img {
    width: 24px;
    height: 24px;
    transition: filter .35s ease;
}

.dubai-feature__title {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px;
    transition: color .35s ease;
}

.dubai-feature__text {
    color: rgba(255, 255, 255, .72);
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0;
    transition: color .35s ease;
}

/* Hover: card lifts into the glossy periwinkle treatment from the design --
   a bright top-left sheen over a blue gradient that stays blue (not white) */
.dubai-feature:hover {
    background:
        radial-gradient(120% 120% at 14% 8%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(145deg, #cadcf5 0%, #b6cef0 48%, #9fbce9 100%);
    border-color: rgba(255, 255, 255, .75);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(20, 49, 207, .18), 0 4px 12px rgba(11, 23, 48, .12);
}

/* White rounded-square tile with a darkened glyph (SVGs ship a fixed blue
   fill, so the filter is what pulls the mark to near-black to match design) */
.dubai-feature:hover .dubai-feature__icon {
    background: #fbfdff;
    border-color: rgba(11, 23, 48, .10);
    border-radius: 13px;
}

.dubai-feature:hover .dubai-feature__icon img {
    filter: brightness(0) saturate(100%);
}

.dubai-feature:hover .dubai-feature__title {
    color: #0b1730;
}

.dubai-feature:hover .dubai-feature__text {
    color: #3d4a63;
}

/* ---------- CTA ---------- */

.dubai-hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    /* Asymmetric gutters: the arrow-sized gutter is only on the side the arrow
       occupies; the text hugs the opposite edge (no empty space there). Left +
       right padding always sums to 96px, so the pill width never jumps -- only
       the split swaps on hover, sliding the text in sync with the arrow. */
    padding: 12px 62px 12px 34px;
    border-radius: 999px;
    background: #fff;
    color: #0b1730;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background .4s ease, color .4s ease, padding .45s cubic-bezier(.65, 0, .35, 1), transform .3s ease, box-shadow .3s ease;
}

/* Hover: fill turns royal-blue, text white, gutters swap (arrow now on left) */
.dubai-hero__cta:hover {
    background: #1e2ad6;
    color: #fff;
    padding: 12px 34px 12px 62px;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(20, 42, 214, .38);
}

/* Absolutely positioned so it can travel; rest = right gutter */
.dubai-hero__cta-arrow {
    position: absolute;
    top: 50%;
    left: calc(100% - 46px);
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1431cf;
    transition: left .45s cubic-bezier(.65, 0, .35, 1), background .4s ease;
}

.dubai-hero__cta-arrow img {
    transition: filter .4s ease;
}

/* Hover: slide to the left gutter, circle turns white, arrow darkens
   (the SVG stroke is white, so brightness(0) pulls it to a dark mark) */
.dubai-hero__cta:hover .dubai-hero__cta-arrow {
    left: 8px;
    background: #fff;
}

.dubai-hero__cta:hover .dubai-hero__cta-arrow img {
    filter: brightness(0);
}

/* Two identical copies sit side by side, so -50% is exactly one copy.
   (Used by the awards track.) */
@keyframes dubai-marquee-scroll {
    from {
        transform: translateX(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .dubai-awards__track {
        animation: none;
    }

    .dubai-awards__marquee {
        overflow-x: auto;
    }
}

/* =========================================================
   Stats — "Number that reflects our commitment"
   ========================================================= */

.dubai-stats {
    background: #0a0a0a;
    padding: 70px 0 90px;
}

.dubai-badge-wrap {
    text-align: center;
    margin-bottom: 46px;
}

.dubai-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    border-radius: 999px;
    border: 1px solid #2b2b2b;
    background: #0f0f0f;
    color: #8fe63f;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dubai-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8fe63f;
}

.dubai-stats__grid {
    display: flex;
    align-items: stretch;
    gap: 22px;
}

/* Horizontal accordion: every card is flex-basis 0 and grows to fill. The
   expanded card gets a larger grow factor (~412:311 from the design). Only one
   is expanded at a time -- see the :hover rules below. */
.dubai-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 24px 28px;
    border-radius: 32px;
    border: 1px solid rgba(220, 208, 254, .12);
    background: linear-gradient(180deg, rgba(220, 208, 254, .01) 0%, rgba(220, 208, 254, .18) 100%);
    overflow: hidden;
    transition: flex-grow .45s cubic-bezier(.65, 0, .35, 1), border-color .35s ease;
}

/* Apps Deliver (first card) is expanded by default... */
.dubai-stat:first-child {
    flex-grow: 1.35;
}

/* ...but as soon as the row is hovered, the default collapses and only the
   hovered card expands -- guaranteeing exactly one expanded card. */
.dubai-stats__grid:hover .dubai-stat:first-child {
    flex-grow: 1;
}

.dubai-stats__grid:hover .dubai-stat:hover {
    flex-grow: 1.35;
    border-color: rgba(220, 208, 254, .28);
}

.dubai-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.dubai-stat__icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.dubai-stat__icon img {
    width: 24px;
    height: 24px;
}

/* The number sits above its own gradient underline (::after) */
.dubai-stat__value {
    position: relative;
    padding-bottom: 10px;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dubai-stat__value::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
}

/* Bottom-aligned so every card's title sits on the same baseline */
.dubai-stat__body {
    margin-top: auto;
}

.dubai-stat__title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

/* Description is revealed only on the expanded card (default first card, or the
   hovered one). Collapsed cards animate it closed. */
.dubai-stat__text {
    color: #b9b3c9;
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.65, 0, .35, 1), opacity .3s ease, margin-top .45s ease;
}

.dubai-stat:first-child .dubai-stat__text {
    max-height: 120px;
    opacity: 1;
    margin-top: 10px;
}

.dubai-stats__grid:hover .dubai-stat:first-child .dubai-stat__text {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.dubai-stats__grid:hover .dubai-stat:hover .dubai-stat__text {
    max-height: 120px;
    opacity: 1;
    margin-top: 10px;
}

/* ---- Per-card accent colours ---- */

.dubai-stat--apps-deliver .dubai-stat__icon {
    background: linear-gradient(150deg, #3b82f6 0%, #1d4ed8 100%);
}

.dubai-stat--apps-deliver .dubai-stat__value {
    background-image: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
}

.dubai-stat--apps-deliver .dubai-stat__value::after {
    background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
}

.dubai-stat--years-of-experience .dubai-stat__icon {
    background: linear-gradient(150deg, #7c3aed 0%, #3b1d78 100%);
}

.dubai-stat--years-of-experience .dubai-stat__value {
    background-image: linear-gradient(90deg, #6d28d9 0%, #a78bfa 100%);
}

.dubai-stat--years-of-experience .dubai-stat__value::after {
    background: linear-gradient(90deg, #6d28d9 0%, #a78bfa 100%);
}

.dubai-stat--expert-developer .dubai-stat__icon {
    background: linear-gradient(150deg, #14b8a6 0%, #0f5d63 100%);
}

.dubai-stat--expert-developer .dubai-stat__value {
    background-image: linear-gradient(90deg, #0d9488 0%, #5eead4 100%);
}

.dubai-stat--expert-developer .dubai-stat__value::after {
    background: linear-gradient(90deg, #0d9488 0%, #5eead4 100%);
}

.dubai-stat--countries-served .dubai-stat__icon {
    background: linear-gradient(150deg, #f59e0b 0%, #7c4a08 100%);
}

.dubai-stat--countries-served .dubai-stat__value {
    background-image: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}

.dubai-stat--countries-served .dubai-stat__value::after {
    background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}

/* =========================================================
   Awards & Recognitions
   ========================================================= */

.dubai-awards {
    background: #0a0a0a;
    padding: 20px 0 90px;
}

.dubai-awards__head {
    position: relative;
    text-align: center;
    padding: 30px 0 40px;
}

/* Decorative laurels flanking the heading block */
.dubai-awards__leaf {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 130px;
    width: auto;
    pointer-events: none;
}

.dubai-awards__leaf--left {
    left: 12%;
}

.dubai-awards__leaf--right {
    right: 12%;
}

.dubai-badge--plain {
    color: #cfe9b4;
    border-color: #4a6b2c;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 500;
}

.dubai-awards__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    margin: 22px 0 14px;
}

.dubai-awards__title span {
    color: #8fe63f;
}

.dubai-awards__text {
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Rotating award rail — two identical rows, shifted by exactly one row width */
.dubai-awards__marquee {
    overflow: hidden;
}

.dubai-awards__track {
    display: flex;
    width: max-content;
    animation: dubai-marquee-scroll 45s linear infinite;
}

.dubai-awards__marquee:hover .dubai-awards__track {
    animation-play-state: paused;
}

.dubai-awards__row {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.dubai-award {
    flex: 0 0 260px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 20px 24px;
    border-radius: 14px;
    border: 1px solid #1e2536;
    background: linear-gradient(170deg, #0e1421 0%, #080b13 100%);
    transition: transform .35s ease, border-color .35s ease;
}

.dubai-award:hover {
    transform: translateY(-4px);
    border-color: #2c3752;
}

.dubai-award__media {
    height: 150px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}

.dubai-award__media img {
    max-height: 150px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.dubai-award__title {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
}

.dubai-award__meta {
    color: #9aa3b2;
    font-size: .9375rem;
    margin: 0 0 22px;
}

/* Accent rule pinned to the bottom of every card */
.dubai-award__bar {
    width: 46px;
    height: 2px;
    border-radius: 2px;
    margin-top: auto;
}

.dubai-award--1 .dubai-award__bar {
    background: #3b6bff;
}

.dubai-award--2 .dubai-award__bar {
    background: #22c3d6;
}

.dubai-award--3 .dubai-award__bar {
    background: #e5484d;
}

.dubai-award--4 .dubai-award__bar {
    background: #f5a623;
}

.dubai-award--5 .dubai-award__bar {
    background: #8b5cf6;
}

/* =========================================================
   Our Services — sticky intro + numbered service rows
   ========================================================= */

.dubai-services {
    background: #0d0d0d;
    padding: 90px 0 100px;
}

.dubai-services__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 70px;
}

/* Intro stays pinned while the long service list scrolls past it */
.dubai-services__aside {
    position: sticky;
    top: 110px;
    align-self: start;
}

/* Right column is its own vertical scroll region, paired with the sticky intro
   on the left. Custom thin scrollbar in the section's green accent. */
.dubai-services__list {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: #2bb84a rgba(255, 255, 255, .06);
}

.dubai-services__list::-webkit-scrollbar {
    width: 6px;
}

.dubai-services__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
    border-radius: 100px;
}

.dubai-services__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2bb84a 0%, #4ade61 100%);
    border-radius: 100px;
}

.dubai-services__eyebrow {
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.dubai-services__title {
    font-weight: 800;
    /* Sized so "End-to-end custom app development" sits on one line */
    font-size: clamp(1.4rem, 2.05vw, 1.9rem);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 22px;
}

.dubai-services__title span {
    display: block;
    color: #8fe63f;
    font-weight: 500;
    margin-bottom: 6px;
}

.dubai-services__lead {
    color: rgba(255, 255, 255, .72);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 430px;
    margin: 0 0 40px;
}

/* ---- "Don't see your industry?" card ---- */

.dubai-industry {
    border-radius: 18px;
    padding: 30px 30px 34px;
    background: linear-gradient(135deg, #0a5f1f 0%, #2bb84a 62%, #4ade61 100%);
}

.dubai-industry__title {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.dubai-industry__text {
    color: rgba(255, 255, 255, .88);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0 0 26px;
}

.dubai-industry__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Exact copy of the FAQ CTA swap: button (left) + filled white arrow disc
   (right); on hover they trade sides (arrow slides left, button slides right),
   both turning near-black, glyph rotating. --consult-btn-w = button width. */
.dubai-industry__btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-industry__arrow {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #0a0a0a;
    transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-industry__arrow svg {
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-industry__actions:hover .dubai-industry__btn {
    transform: translateX(calc(38px + 10px));
    background: #0a0a0a;
    color: #fff;
}

.dubai-industry__actions:hover .dubai-industry__arrow {
    transform: translateX(calc(-1 * (var(--consult-btn-w, 190px) + 10px)));
    background: #0a0a0a;
    color: #fff;
}

.dubai-industry__actions:hover .dubai-industry__arrow svg {
    transform: rotate(45deg);
}

/* ---- Service rows ---- */

.dubai-service {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 0 30px;
    border-bottom: 3px solid transparent;
    /* Gradient rule under each row — a border can't take a gradient, so
       border-image paints it instead */
    border-image: linear-gradient(90deg, #0e7a32 0%, #3ddc61 100%) 1;
}

.dubai-service__content {
    flex: 1 1 auto;
    min-width: 0;
}

.dubai-service__title {
    color: #fff;
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.dubai-service__text {
    color: rgba(255, 255, 255, .8);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.dubai-service__link {
    color: #37d95c;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dubai-service__link:hover {
    color: #8fe63f;
    text-decoration: underline;
}

/* Artwork with the oversized index number layered on top of its right edge */
.dubai-service__visual {
    position: relative;
    flex: 0 0 320px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dubai-service__visual img {
    position: relative;
    z-index: 1;
    max-height: 190px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    margin-right: 46px;
}

.dubai-service__num {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: clamp(5rem, 8vw, 8.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
}

.dubai-service--baked-number .dubai-service__num {
    display: none;
}

.dubai-service--baked-number .dubai-service__visual img {
    margin-right: 0;
}

/* =========================================================
   How it works — scroll-spy process steps
   ========================================================= */

.dubai-process {
    background: #000;
    padding: 80px 0 0;
}

.dubai-process__head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 46px;
}

.dubai-process__eyebrow {
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.dubai-process__title {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 18px;
}

.dubai-process__title span {
    display: block;
    color: #8fe63f;
    font-weight: 400;
    margin-bottom: 4px;
}

.dubai-process__lead {
    color: rgba(255, 255, 255, .72);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

.dubai-process__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    background: #0d0d0d;
    border-radius: 18px;
    padding: 22px;
}

/* ---- Step cards ---- */

.dubai-process__steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dubai-step {
    padding: 26px 28px 30px;
    border-radius: 14px;
    border: 1px solid #232733;
    background: #16191f;
    scroll-margin-top: 120px;
    /* Inactive steps sit back (dimmer + slightly smaller); the active one lifts
       forward. `transform` here (scale) composes with the reveal, which uses the
       `translate` property. The transition animates the swap as you scroll. */
    opacity: .38;
    transform: scale(.975);
    transform-origin: center left;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1),
        border-color .5s ease, background .5s ease;
}

.dubai-step.is-active {
    opacity: 1;
    transform: scale(1.015);
    border-color: #3a465e;
    background: #1a1e27;
}

.dubai-step__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.dubai-step__title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.dubai-step__num {
    color: #8fe63f;
}

.dubai-step__arrow {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #10131a;
    transition: transform .3s ease;
}

.dubai-step__arrow:hover {
    color: #10131a;
    transform: translate(2px, -2px);
}

.dubai-step__text {
    color: rgba(255, 255, 255, .7);
    font-size: .9375rem;
    line-height: 1.65;
    margin: 0 0 26px;
    max-width: 560px;
}

.dubai-step__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dubai-step__features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* The source SVGs are solid white glyphs, so masking them lets one rule
   recolour every icon to the section green without editing the files */
.dubai-step__icon {
    width: 28px;
    height: 28px;
    background: #8fe63f;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.dubai-step__label {
    color: rgba(255, 255, 255, .82);
    font-size: .75rem;
    line-height: 1.4;
    max-width: 90px;
}

/* ---- Sticky nav rail ---- */

.dubai-process__nav {
    position: sticky;
    top: 110px;
    background: #101318;
    border-radius: 14px;
    padding: 8px 22px;
}

.dubai-process__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dubai-process__nav li+li {
    border-top: 1px solid #232733;
}

.dubai-process__navlink {
    display: block;
    padding: 20px 0;
    text-decoration: none;
}

.dubai-process__navtitle {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    transition: color .3s ease;
}

.dubai-process__navmeta {
    display: block;
    color: #8a8f99;
    font-size: .8125rem;
}

.dubai-process__navlink:hover .dubai-process__navtitle {
    color: #cfe9b4;
}

.dubai-process__navlink.is-active .dubai-process__navtitle {
    color: #8fe63f;
}

/* Active item tints the rule beneath it */
.dubai-process__nav li:has(.dubai-process__navlink.is-active)+li {
    border-top-color: transparent;
    border-image: linear-gradient(90deg, #8fe63f 0%, rgba(143, 230, 63, 0) 85%) 1;
}

/* =========================================================
   Advanced technology — timeline rail
   ========================================================= */

.dubai-tech {
    background: #000;
    padding: 80px 0 90px;
}

.dubai-tech__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.dubai-tech__eyebrow {
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.dubai-tech__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.25;
    margin: 0 0 16px;
}

.dubai-tech__title span {
    color: #8fe63f;
}

.dubai-tech__lead {
    color: rgba(255, 255, 255, .68);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ---- Rail ---- */

.dubai-tech__list {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1040px;
}

/* One continuous line behind every row; it stops short at both ends so the
   first and last dots sit on a fading edge rather than a hard cut */
.dubai-tech__list::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 50%;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            #2a2f3a 8%,
            #2a2f3a 92%,
            rgba(255, 255, 255, 0) 100%);
}

.dubai-tech__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 70px;
}

.dubai-tech__row+.dubai-tech__row {
    margin-top: 70px;
}

/* ---- Copy ---- */

.dubai-tech__copy {
    opacity: .3;
    transform: scale(.97);
    transform-origin: center;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.dubai-tech__row.is-active .dubai-tech__copy {
    opacity: 1;
    transform: scale(1.03);
}

.dubai-tech__num {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    background: #131b2e;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 20px;
    transition: background .35s ease;
}

.dubai-tech__row.is-active .dubai-tech__num {
    background: #3fa63a;
}

.dubai-tech__name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.dubai-tech__text {
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    line-height: 1.7;
    margin: 0;
    max-width: 330px;
}

/* ---- Artwork ---- */

/* Capping the box at the artwork's native width makes the box and the image
   exactly the same size, so the percentages below address points inside the
   picture itself rather than the grid cell around it. */
.dubai-tech__visual {
    position: relative;
    width: 100%;
    max-width: 458px;
}

.dubai-tech__visual img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .4;
    transform: scale(.97);
    transform-origin: center;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.dubai-tech__row.is-active .dubai-tech__visual img {
    opacity: 1;
    transform: scale(1.03);
}

/* The artwork's own dashed wire starts from a dot at 5.73% / 27.63% of the
   image (measured off ai-integration.png). Both the rail marker and the
   bridge are keyed to that point, so they stay joined as the image scales. */

/* Rail dot: the column gap is 70px and the rail runs down its middle, so the
   rail sits exactly half a gap to the left of this box. */
.dubai-tech__visual::after {
    content: "";
    position: absolute;
    top: 27.63%;
    left: -35px;
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #3a4050;
    transform: scale(1);
    transition: background .4s ease, box-shadow .4s ease, transform .4s ease;
}

.dubai-tech__row.is-active .dubai-tech__visual::after {
    background: #fff;
    /* solid inner ring, soft outer ring, then the bloom */
    box-shadow:
        0 0 0 4px #1668ef,
        0 0 0 7px rgba(47, 124, 246, .28),
        0 0 22px 6px rgba(47, 124, 246, .55);
    transform: scale(1.1);
}

/* Bridge: rail dot -> the artwork's baked-in dot. Same dash rhythm as the
   printed wire, drawn left-to-right as the row scrolls into focus. */
.dubai-tech__row.has-wire .dubai-tech__visual::before {
    content: "";
    position: absolute;
    top: 27.63%;
    left: -35px;
    width: calc(35px + 5.73%);
    height: 2px;
    margin-top: -1px;
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .8) 0 5px,
            transparent 5px 11px);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .75s ease .12s;
}

.dubai-tech__row.has-wire.is-active .dubai-tech__visual::before {
    clip-path: inset(0 0 0 0);
}

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

    .dubai-tech__row.has-wire .dubai-tech__visual::before {
        transition: none;
        clip-path: inset(0 0 0 0);
    }
}

/* =========================================================
   App showcase — full-bleed card artwork
   ========================================================= */

/* The artwork carries the perspective floor grid and both edge glows. Anchoring
   it to the bottom keeps the grid's horizon under the cards whatever the
   section grows to; flat colour underneath covers the taller-than-image case
   and stands in while the PNG loads. */
.dubai-showcase {
    position: relative;
    overflow: hidden;
    padding: 80px 0 90px;
    background: #03091a url("../images/dubai/background-awards.png") center bottom / cover no-repeat;
}

.dubai-showcase__head {
    margin-bottom: 44px;
}

.dubai-showcase__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.dubai-showcase__spark {
    color: #8fe63f;
    font-size: 1rem;
    line-height: 1;
}

.dubai-showcase__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.3;
    margin: 0;
}

/* ---- Cards ---- */

.dubai-showcase__list {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* flex-basis 0 with a grow factor set to each file's natural width means the
   three share the row in their own proportions, so every card lands at the
   same scale and the stat footers line up across the row */
.dubai-showcase__item {
    flex-basis: 0;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .35s ease;
}

.dubai-showcase__item:hover {
    transform: translateY(-6px);
}

.dubai-showcase__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   Pricing guide
   ========================================================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The skyline artwork occupies the upper half of the file, so the image is
   pinned to the top and the flat black below carries the table. */
.dubai-pricing {
    padding: 70px 0 90px;
    background: #000 url("../images/dubai/mobile-app-dubai.png") center top / 100% auto no-repeat;
}

.dubai-pricing__head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 54px;
}

.dubai-pricing__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8fe63f;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid #3d5c24;
    border-radius: 999px;
    background: rgba(143, 230, 63, .06);
    margin: 0 0 22px;
}

.dubai-pricing__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fe63f;
}

.dubai-pricing__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    line-height: 1.18;
    margin: 0 0 20px;
}

.dubai-pricing__title span {
    color: #8fe63f;
    border-bottom: 3px solid #8fe63f;
    padding-bottom: 2px;
}

/* Narrower than the heading so the copy column sits inside the skyline gap */
.dubai-pricing__lead {
    color: rgba(255, 255, 255, .75);
    font-size: .9375rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto;
}

.dubai-pricing__lead strong {
    color: #8fe63f;
    font-weight: 700;
}

/* ---- Table ---- */

/* Narrow viewports scroll the table sideways rather than crushing three
   columns of currency ranges into an unreadable stack */
.dubai-pricing__scroll {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: 18px;
    /* Glass panel: translucent fill (padding-box) that fades to black at the
       bottom, over a gradient border (border-box) that is brightest up top and
       fades away toward the bottom -- so both the surface and its edge dissolve
       into the section below. */
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(23, 25, 21, .82) 0%, rgba(13, 13, 13, .82) 44%, rgba(5, 5, 5, .88) 78%, rgba(0, 0, 0, .92) 100%) padding-box,
        linear-gradient(180deg, rgba(180, 200, 150, .30) 0%, rgba(140, 148, 138, .22) 45%, rgba(110, 110, 110, .06) 82%, transparent 100%) border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dubai-pricing__table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    /* Equal thirds so the overlaid gradient column dividers (on .__scroll) land
       exactly on the column boundaries. */
    table-layout: fixed;
    text-align: center;
}

/* Two vertical dividers at the 1/3 and 2/3 boundaries, fading toward the bottom
   just like the panel's outer border. */
.dubai-pricing__scroll::before,
.dubai-pricing__scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, .02) 80%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.dubai-pricing__scroll::before {
    left: 33.333%;
}

.dubai-pricing__scroll::after {
    left: 66.666%;
}

.dubai-pricing__table th,
.dubai-pricing__table td {
    /* Colour has to be stated here: the page default is dark, so any cell left
       to inherit renders near-black on the black table */
    color: rgba(255, 255, 255, .88);
    padding: 18px 26px;
    font-size: .9375rem;
    font-weight: 500;
    vertical-align: middle;
}

/* Horizontal dividers fade the further down they sit (matching the edge fade) */
.dubai-pricing__table thead th {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.dubai-pricing__table tbody tr:nth-child(1) th,
.dubai-pricing__table tbody tr:nth-child(1) td {
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.dubai-pricing__table tbody tr:nth-child(2) th,
.dubai-pricing__table tbody tr:nth-child(2) td {
    border-bottom: 1px solid rgba(255, 255, 255, .038);
}

.dubai-pricing__table thead th {
    color: #fff;
    font-weight: 600;
}

.dubai-pricing__table tbody th {
    color: rgba(255, 255, 255, .88);
    font-weight: 500;
}

.dubai-pricing__table tbody tr {
    transition: background .3s ease;
}

.dubai-pricing__table tbody tr:hover {
    background: rgba(143, 230, 63, .04);
}

.dubai-pricing__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Every icon sits in a padded box; the header uses a green-tinted rounded
   square with a glow, the body rows a subtle dark circle. */
.dubai-pricing__icon {
    box-sizing: border-box;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 8px;
    color: #a3e635;
}

.dubai-pricing__table thead .dubai-pricing__icon {
    border-radius: 10px;
    background: rgba(143, 230, 63, .10);
    border: 1px solid rgba(143, 230, 63, .32);
    box-shadow: 0 0 14px rgba(143, 230, 63, .18);
}

.dubai-pricing__table tbody .dubai-pricing__icon {
    border-radius: 50%;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .07);
}

/* Scoped to the table so it outweighs the generic cell colour above */
.dubai-pricing__table .dubai-pricing__cost {
    color: #8fe63f;
    font-weight: 600;
}

/* =========================================================
   Native vs cross-platform
   ========================================================= */

/* One export covers the green stage and the navy panel beneath it. Stretching
   it to the wrapper box keeps the notch on the seam between the two sections
   at any width — the sections themselves stay transparent. */
/* Base colour matches the panel's own navy, not black: the artwork fades to
   transparent across its last ~20 rows, so a black base showed through there
   as a dark band between this wrapper and the section below. */
.dubai-nativestack {
    background: #020913 url("../images/dubai/native-cross-platform-technology-stack.png") center top / 100% 100% no-repeat;
}

/* Top and bottom padding are traded against each other on purpose: the merged
   artwork puts its notch at a fixed 45% of the wrapper, so changing this
   section's total height would walk the notch off the seam. */
.dubai-compare {
    position: relative;
    padding: 140px 0 90px;
}

.dubai-compare__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 50px;
    align-items: start;
}

.dubai-compare__eyebrow {
    color: rgba(255, 255, 255, .85);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.dubai-compare__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.3;
    margin: 0 0 16px;
}

.dubai-compare__title span {
    color: #8fe63f;
}

.dubai-compare__lead {
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    line-height: 1.7;
    max-width: 330px;
    margin: 0 0 40px;
}

.dubai-compare__phones {
    display: block;
    width: 100%;
    max-width: 418px;
    height: auto;
}

/* ---- Comparison table ---- */

.dubai-compare__panel {
    border: 1px solid #24331a;
    border-radius: 18px;
    background: rgba(4, 8, 3, .82);
    overflow: hidden;
}

.dubai-compare__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dubai-compare__table th,
.dubai-compare__table td {
    color: rgba(255, 255, 255, .82);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.55;
    padding: 22px 26px;
    border-bottom: 1px solid #1b2612;
    border-right: 1px solid #1b2612;
    vertical-align: middle;
}

/* Factor names read as white labels, like the design */
.dubai-compare__table tbody th {
    color: #fff;
    font-weight: 600;
}

.dubai-compare__table th:last-child,
.dubai-compare__table td:last-child {
    border-right: 0;
}

.dubai-compare__table tbody tr:last-child th,
.dubai-compare__table tbody tr:last-child td {
    border-bottom: 0;
}

.dubai-compare__table thead th {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .04);
}

.dubai-compare__cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dubai-compare__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #8fe63f;
}

.dubai-compare__icon--cross {
    color: #cbd5e1;
}

/* Winner of each row, per the design */
.dubai-compare__table td.is-win {
    color: #8fe63f;
    font-weight: 600;
}

/* =========================================================
   Technology stack
   ========================================================= */

/* Panel and notch come from the wrapper's artwork; this only has to clear the
   notch so the badge sits inside it. */
.dubai-stack {
    position: relative;
    padding: 108px 0 90px;
}

.dubai-stack__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}

/* Pill: dark fill + gradient (purple->blue->cyan->green) border with a glow.
   padding-box carries the fill, border-box the gradient stroke. */
.dubai-stack__badge {
    display: inline-block;
    padding: 9px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#0a1122, #0a1122) padding-box,
        linear-gradient(95deg, #b57bff 0%, #5b9bff 42%, #35d0e0 70%, #66e06b 100%) border-box;
    box-shadow: 0 0 24px rgba(83, 130, 255, .35), inset 0 0 14px rgba(83, 130, 255, .12);
    margin: 0 0 22px;
}

/* Gradient text, matching the border sweep */
.dubai-stack__badge-txt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: linear-gradient(95deg, #b57bff 0%, #5b9bff 42%, #35d0e0 70%, #66e06b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dubai-stack__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.75rem, 3.6vw, 2.85rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.dubai-stack__title span {
    color: #8fe63f;
}

.dubai-stack__lead {
    color: rgba(255, 255, 255, .66);
    font-size: .8125rem;
    line-height: 1.7;
    margin: 0;
}

/* ---- Logo grid ---- */

.dubai-stack__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* All rows equal height so cards stay uniform even with less content
       (aspect-ratio gives the square floor; this equalises any overflow). */
    grid-auto-rows: 1fr;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dubai-stack__card {
    /* Square cards */
    position: relative;
    z-index: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
    border-radius: 16px;
    border: 1px solid #1a2540;
    background: linear-gradient(180deg, #0d1730 0%, #070c18 100%);
    transition: transform .3s ease, border-color .3s ease, box-shadow .35s ease;
}

/* Edge-only glow: three directional coloured shadows (one colour per side)
   from the icon's palette. No interior fill -- the glow sits outside the card. */
.dubai-stack__card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--g1) 50%, #2f4470);
    box-shadow:
        -11px 2px 24px color-mix(in srgb, var(--g1) 52%, transparent),
        11px 2px 24px color-mix(in srgb, var(--g3) 52%, transparent),
        0 13px 28px color-mix(in srgb, var(--g2) 46%, transparent);
}

/* Fixed box + contain keeps a 41px wordmark and a 242px glyph the same
   optical size across the grid */
.dubai-stack__logo {
    display: grid;
    place-items: center;
    height: 52px;
    margin-bottom: 16px;
}

.dubai-stack__logo img,
.dubai-stack__logo svg {
    max-width: 52px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The Apple mark ships solid black, which would vanish on the dark card */
.dubai-stack__logo img.is-inverted {
    filter: invert(1);
}

.dubai-stack__name {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.dubai-stack__text {
    color: rgba(255, 255, 255, .58);
    font-size: .8125rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   Compliance
   ========================================================= */

/* Green ambient glow from the top-left corner fading to black bottom-right,
   matching the design. */
.dubai-comply {
    position: relative;
    padding: 80px 0 90px;
    background: radial-gradient(135% 130% at 6% -10%,
            #00571e 0%,
            #00401a 18%,
            #002a10 38%,
            #001608 56%,
            #000a05 74%,
            #000000 100%);
}

.dubai-comply>.container {
    position: relative;
    z-index: 1;
}

.dubai-comply__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    line-height: 1.35;
    margin: 0 0 44px;
}

.dubai-comply__title span {
    display: block;
    color: #8fe63f;
    margin-top: 10px;
}

.dubai-comply__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}

.dubai-comply__card {
    padding: 26px 26px 30px;
    border-radius: 16px;
    border: 1px solid #2f5a34;
    background: rgba(6, 16, 10, .55);
    box-shadow: inset 0 1px 0 rgba(143, 230, 63, .08);
}

.dubai-comply__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Bright lime gradient tile with a dark glyph and an outer glow */
.dubai-comply__badge {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #c8f24f 0%, #9be63d 55%, #79cf2d 100%);
    color: #06170a;
    box-shadow: 0 0 22px rgba(143, 230, 63, .45);
}

.dubai-comply__badge svg {
    width: 27px;
    height: 27px;
}

.dubai-comply__subtitle {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.dubai-comply__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dubai-comply__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 18px 6px 6px;
    border-radius: 12px;
    border: 1px solid #2f5433;
    background: rgba(3, 10, 6, .4);
    transition: border-color .3s ease, background .3s ease;
}

.dubai-comply__list li:hover {
    border-color: #4d8f39;
    background: rgba(143, 230, 63, .06);
}

/* Rounded-square tile with a soft radial green glow behind a bright glyph */
.dubai-comply__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(143, 230, 63, .30);
    background: radial-gradient(circle at 50% 42%, rgba(143, 230, 63, .30) 0%, rgba(143, 230, 63, .10) 55%, rgba(143, 230, 63, .02) 100%);
    box-shadow: inset 0 0 12px rgba(143, 230, 63, .18);
    color: #a3e635;
}

.dubai-comply__icon svg {
    width: 24px;
    height: 24px;
}

.dubai-comply__label {
    flex: 1 1 auto;
    color: #fff;
    font-size: .95rem;
    line-height: 1.4;
}

.dubai-comply__chev {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: #9de63a;
}

/* =========================================================
   Why choose us
   ========================================================= */

.dubai-why {
    padding: 70px 0 90px;
    background: #010401 url("../images/dubai/dubai-company.png") center top / cover no-repeat;
}

.dubai-why__cta {
    text-align: center;
    margin: 0 0 46px;
}

.dubai-why__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8fe63f;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 26px;
    border: 1px solid #3f7a2c;
    border-radius: 999px;
    background: rgba(143, 230, 63, .06);
}

.dubai-why__pill svg {
    width: 18px;
    height: 18px;
}

.dubai-why__lead {
    color: rgba(255, 255, 255, .9);
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 40px;
}

.dubai-why__lead span {
    color: #8fe63f;
}

/* ---- Cards ---- */

.dubai-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dubai-why__card {
    text-align: center;
    padding: 30px 24px 32px;
    border-radius: 14px;
    border: 1px solid #1c2a16;
    background: rgba(6, 12, 5, .72);
    transition: transform .3s ease, border-color .3s ease;
}

.dubai-why__card:hover {
    transform: translateY(-4px);
    border-color: #3f7a2c;
}

/* Ringed disc with a soft halo, matching the design's lit icons */
.dubai-why__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 1px solid #3f7a2c;
    background: radial-gradient(circle at 50% 45%, rgba(143, 230, 63, .18) 0%, rgba(6, 12, 5, .9) 70%);
    box-shadow: 0 0 20px rgba(143, 230, 63, .16);
    color: #8fe63f;
}

.dubai-why__icon svg {
    width: 26px;
    height: 26px;
}

.dubai-why__name {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.dubai-why__text {
    color: rgba(255, 255, 255, .62);
    font-size: .8125rem;
    line-height: 1.65;
    margin: 0;
}

/* =========================================================
   FAQ
   ========================================================= */

.dubai-faq {
    background: #0a0a0a;
    padding: 80px 0 90px;
}

.dubai-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: 60px;
    align-items: stretch;
}

/* Promo is pushed to the foot of the column so it sits low against the
   accordion, as in the design */
/* Compact intro that stays pinned while the question list scrolls past it */
.dubai-faq__aside {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 110px;
    align-self: start;
}

.dubai-faq__title {
    color: #8fe63f;
    font-weight: 800;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.15;
    margin: 0;
}

.dubai-faq__title span {
    color: #5f9e2c;
}

.dubai-faq__promo {
    margin-top: 34px;
    padding: 28px 30px 32px;
    border-radius: 14px;
    background: linear-gradient(105deg, #04140a 0%, #0d6b1f 55%, #17a52c 100%);
}

.dubai-faq__promo-title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.dubai-faq__promo-text {
    color: rgba(255, 255, 255, .82);
    font-size: .8125rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Same swap mechanic as the industry consultation button: on hover the label
   and icon trade sides (keeping the gap) and both darken; --faq-btn-w (set by
   the page script) is the label width so the icon travels exactly past it. */
.dubai-faq__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.dubai-faq__cta-label {
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-faq__cta-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #0a0a0a;
    transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-faq__cta-icon svg {
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-faq__cta:hover .dubai-faq__cta-label {
    transform: translateX(calc(38px + 10px));
    background: #0a0a0a;
    color: #fff;
}

.dubai-faq__cta:hover .dubai-faq__cta-icon {
    transform: translateX(calc(-1 * (var(--faq-btn-w, 190px) + 10px)));
    background: #0a0a0a;
    color: #fff;
}

.dubai-faq__cta:hover .dubai-faq__cta-icon svg {
    transform: rotate(45deg);
}

/* ---- Accordion ---- */

.dubai-faq__list {
    display: grid;
    gap: 14px;
    align-content: start;
}

.dubai-faq__item {
    border-radius: 12px;
    background: #141414;
    transition: background .3s ease;
}

.dubai-faq__item[open] {
    background: #1b1b1b;
}

.dubai-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

/* Both are needed: one kills the default triangle in WebKit, the other
   everywhere else */
.dubai-faq__q::-webkit-details-marker {
    display: none;
}

.dubai-faq__q::marker {
    content: "";
}

/* Marker is two bars; the vertical one is dropped when the panel opens, so
   the plus becomes a minus without swapping any markup */
.dubai-faq__mark {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.dubai-faq__mark::before,
.dubai-faq__mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 1.5px;
    margin-top: -.75px;
    background: rgba(255, 255, 255, .85);
    transition: transform .3s ease, opacity .3s ease;
}

.dubai-faq__mark::after {
    transform: rotate(90deg);
}

.dubai-faq__item[open] .dubai-faq__mark::after {
    transform: rotate(0deg);
    opacity: 0;
}

/* The wrapper carries the animated height (no padding of its own, so it can
   collapse all the way to 0); the padding lives on the <p> inside it. */
.dubai-faq__a-wrap {
    overflow: hidden;
    transition: height .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.dubai-faq__a {
    color: rgba(255, 255, 255, .55);
    font-size: .8125rem;
    line-height: 1.7;
    margin: 0;
    padding: 0 52px 22px 22px;
}

/* =========================================================
   Closing CTA band
   ========================================================= */

.dubai-cta {
    padding: 90px 0 100px;
    text-align: center;
    background: linear-gradient(90deg, #0e5c1d 0%, #06240c 32%, #000000 65%, #000000 100%);
}

.dubai-cta__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    line-height: 1.22;
    max-width: 760px;
    margin: 0 auto 18px;
}

.dubai-cta__text {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 36px;
}

/* Single pill, hero mechanic: arrow rides inside and slides right->left on
   hover (padding split swaps so no empty gutter), the glyph rotating diagonal
   -> straight. Hover flips the fill to white with black text. */
.dubai-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 50px 16px 32px;
    border-radius: 999px;
    background: #96f13f;
    color: #06140a;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background .4s ease, color .4s ease, padding .5s cubic-bezier(.65, 0, .35, 1), transform .3s ease, box-shadow .3s ease;
}

.dubai-cta__btn:hover {
    background: #fff;
    color: #000;
    padding: 16px 32px 16px 50px;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}

.dubai-cta__btn-arrow {
    position: absolute;
    top: 50%;
    left: calc(100% - 38px);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: inherit;
    transition: left .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-cta__btn-arrow svg {
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.dubai-cta__btn:hover .dubai-cta__btn-arrow {
    left: 24px;
}

.dubai-cta__btn:hover .dubai-cta__btn-arrow svg {
    transform: rotate(45deg);
}

/* ---------- Start a conversation ---------- */

/* The artwork carries its own black right-hand half for the panel to sit on,
   so `cover` keeps that split at the same 54% of the width the design used,
   whatever the viewport. */
.dubai-connect {
    display: flex;
    align-items: center;
    min-height: 700px;
    padding: 44px 0;
    /* Consultation CTAs across the page jump here; clear the fixed header. */
    scroll-margin-top: 84px;
    background: #000 url("../images/dubai/transform-idea-dubai.png") center / cover no-repeat;
}

.dubai-connect__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    width: 100%;
}

/* Left column is a spacer on desktop — the section background is the artwork */
.dubai-connect__art {
    display: none;
}

.dubai-connect__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Left intro ---- */
.dubai-connect__aside {
    position: relative;
}

.dubai-connect__intro {
    position: relative;
    z-index: 1;
    max-width: 470px;
}

.dubai-connect__lead-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8fe63f;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.dubai-connect__spark {
    width: 20px;
    height: 20px;
}

.dubai-connect__headline {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 26px;
}

.dubai-connect__headline span {
    color: #8fe63f;
}

.dubai-connect__desc {
    color: rgba(255, 255, 255, .74);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 410px;
    margin: 0 0 34px;
}

.dubai-connect__based {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 20px 28px;
    border-radius: 16px;
    border: 1px solid rgba(143, 230, 63, .45);
    background: rgba(6, 16, 8, .3);
    backdrop-filter: blur(2px);
}

.dubai-connect__based-icon {
    flex: 0 0 auto;
    color: #8fe63f;
    display: grid;
    place-items: center;
}

.dubai-connect__based-icon svg {
    width: 42px;
    height: 46px;
}

.dubai-connect__based-title {
    display: block;
    color: #8fe63f;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.dubai-connect__based-text {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-size: .9375rem;
    line-height: 1.45;
}

.dubai-connect__panel {
    /* Sit the form to the right of its column with a gap from the figure on the
       left, and trim its width a little. */
    max-width: 560px;
    margin-left: auto;
    padding: 32px 34px 28px;
    border: 1px solid rgba(143, 230, 63, .5);
    border-radius: 18px;
    background: rgba(6, 11, 5, .9);
}

.dubai-connect__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8fe63f;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dubai-connect__title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.3;
    margin: 14px 0 12px;
}

.dubai-connect__title span {
    display: block;
    color: #8fe63f;
}

.dubai-connect__text {
    color: rgba(255, 255, 255, .62);
    font-size: .875rem;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 22px;
}

.dubai-connect__form {
    display: grid;
    /* minmax(0,1fr) lets the column shrink below its content, so the fixed-width
       reCAPTCHA widget can't force the whole form wider than the panel. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.dubai-connect__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dubai-connect__phone {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
}

.dubai-connect__input,
.dubai-connect__textarea,
.dubai-connect__select {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.4;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.dubai-connect__input::placeholder,
.dubai-connect__textarea::placeholder {
    color: rgba(255, 255, 255, .4);
}

.dubai-connect__input:focus,
.dubai-connect__textarea:focus,
.dubai-connect__select:focus {
    outline: none;
    border-color: #8fe63f;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(143, 230, 63, .16);
}

.dubai-connect__textarea {
    min-height: 88px;
    resize: vertical;
}

.dubai-connect__dial {
    position: relative;
}

.dubai-connect__flag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    pointer-events: none;
}

.dubai-connect__select {
    appearance: none;
    padding-left: 44px;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* The native dropdown list paints on the OS surface, not the dark panel */
.dubai-connect__select option {
    color: #111;
}

/* intl-tel-input country dropdown blended into the dark field */
.dubai-connect__phone-wrap .iti {
    display: block;
    width: 100%;
}

.dubai-connect__phone-wrap .iti__selected-dial-code {
    color: #fff;
}

/* style.css forces a light #f8fafc flag button globally (with !important); beat
   it here with higher specificity + !important, scoped to this page only. */
.dubai-connect__phone-wrap .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
    border-radius: 8px 0 0 8px;
}

.dubai-connect__phone-wrap .iti--separate-dial-code .iti__selected-flag:hover,
.dubai-connect__phone-wrap .iti--separate-dial-code .iti__selected-flag:focus,
.dubai-connect__phone-wrap .iti--separate-dial-code .iti__selected-flag[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .07) !important;
}

.dubai-connect__phone-wrap .iti__arrow {
    border-top-color: rgba(255, 255, 255, .55);
}

.dubai-connect__phone-wrap .iti__arrow--up {
    border-bottom-color: rgba(255, 255, 255, .55);
}

/* Dark country dropdown list (scoped to this page's form; the list renders
   inside the wrapper, not on <body>) */
.dubai-connect__phone-wrap .iti__country-list {
    background: #0e1a0e;
    border: 1px solid rgba(143, 230, 63, .28);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    color: #fff;
}

.dubai-connect__phone-wrap .iti__country {
    color: #fff;
}

.dubai-connect__phone-wrap .iti__country.iti__highlight,
.dubai-connect__phone-wrap .iti__country:hover {
    background: rgba(143, 230, 63, .14);
}

.dubai-connect__phone-wrap .iti__dial-code {
    color: rgba(255, 255, 255, .55);
}

.dubai-connect__phone-wrap .iti__divider {
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* Status + validation messages from the shared contact handler */
.dubai-connect__alert {
    margin: 0;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.45;
}

.dubai-connect__alert--ok {
    color: #d6f7bf;
    background: rgba(143, 230, 63, .12);
    border: 1px solid rgba(143, 230, 63, .3);
}

.dubai-connect__alert--err {
    color: #ffd0d0;
    background: rgba(255, 80, 80, .12);
    border: 1px solid rgba(255, 80, 80, .35);
}

.dubai-connect__field-error {
    margin: -6px 0 0;
    color: #ff8a8a;
    font-size: .8125rem;
}

.dubai-connect__input.is-invalid,
.dubai-connect__select.is-invalid,
.dubai-connect__textarea.is-invalid {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 80, 80, .14);
}

.dubai-connect__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 22px;
    border: 0;
    border-radius: 8px;
    background: #8fe63f;
    color: #06140a;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease, box-shadow .3s ease;
}

.dubai-connect__submit:hover {
    background: #a7f75c;
    box-shadow: 0 12px 30px rgba(143, 230, 63, .25);
}

/* Three columns inside a ~540px panel leaves ~110px of text per item, so the
   type is a step down from the form copy to keep each title on one line */
.dubai-connect__info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.dubai-connect__info-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.dubai-connect__info-icon {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(143, 230, 63, .12);
    color: #8fe63f;
}

.dubai-connect__info-title {
    display: block;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
}

.dubai-connect__info-text {
    display: block;
    color: rgba(255, 255, 255, .52);
    font-size: .6875rem;
    line-height: 1.45;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {

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

    /* Below the desktop breakpoint the hover-accordion doesn't apply (no hover
       on touch): cards wrap 2-up, all equal width, every description shown. */
    .dubai-stats__grid {
        flex-wrap: wrap;
    }

    .dubai-stat,
    .dubai-stat:first-child {
        flex: 1 1 calc(50% - 11px);
        flex-grow: 1;
    }

    .dubai-stat__text,
    .dubai-stat:first-child .dubai-stat__text {
        max-height: 120px;
        opacity: 1;
        margin-top: 10px;
    }

    .dubai-awards__leaf {
        height: 96px;
    }

    .dubai-awards__leaf--left {
        left: 2%;
    }

    .dubai-awards__leaf--right {
        right: 2%;
    }

    .dubai-services__layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .dubai-services__aside {
        position: static;
    }

    /* Stacked layout: let the list flow with the page, no inner scrollbox */
    .dubai-services__list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .dubai-service__visual {
        flex: 0 0 260px;
        height: 160px;
    }

    .dubai-service__visual img {
        max-height: 160px;
    }

    .dubai-process__layout {
        grid-template-columns: 1fr;
    }

    /* Rail moves above the cards and stops being sticky once stacked */
    .dubai-process__nav {
        position: static;
        order: -1;
    }

    /* Rail slides to the far left and the row becomes copy-over-artwork */
    .dubai-tech__row {
        grid-template-columns: 1fr;
        row-gap: 24px;
        padding-left: 30px;
    }

    .dubai-tech__list::before {
        left: 5px;
    }

    .dubai-tech__text {
        max-width: none;
    }

    /* Dropping the containing block hands the dot back to the row, so it lands
       on the relocated rail instead of tracking the artwork */
    .dubai-tech__visual {
        position: static;
        margin: 0 auto;
    }

    .dubai-tech__visual::after {
        top: 26px;
        left: 5px;
    }

    /* Copy sits above the artwork now, so there is nothing to bridge to */
    .dubai-tech__row.has-wire .dubai-tech__visual::before {
        display: none;
    }

    /* Stacking the compare layout makes that section far taller, so the merged
       image's fixed 45/55 split no longer lands on the seam. Fall back to the
       two separate exports, which each scale on their own. */
    .dubai-nativestack {
        background: none;
    }

    .dubai-compare {
        background: #000 url("../images/dubai/native-cross-platform-background.png") center bottom / cover no-repeat;
        padding-bottom: 120px;
    }

    .dubai-stack {
        z-index: 2;
        margin-top: -70px;
        padding-top: 80px;
        background: url("../images/dubai/technology-stack-background.png") center top / 100% 100% no-repeat;
    }

    /* Table beside the copy leaves neither enough room */
    .dubai-compare__layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .dubai-compare__lead {
        max-width: none;
    }

    .dubai-stack__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dubai-comply__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

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

    .dubai-faq__layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }


    /* Stacked, the promo would otherwise be flung to the bottom of the column */
    .dubai-faq__promo {
        margin-top: 30px;
    }

    /* Three cards get too narrow to read the baked-in stat footers */
    .dubai-showcase__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dubai-showcase__item {
        flex-basis: calc(50% - 13px);
        flex-grow: 0;
        max-width: 384px;
    }

    /* Stacked, so the artwork's photo/black split no longer lines up with the
       columns — drop it as a background and crop the left 54% into its own
       block above the panel */
    .dubai-connect {
        display: block;
        min-height: 0;
        padding: 50px 0;
        background: #000;
    }

    .dubai-connect__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .dubai-connect__art {
        display: block;
        aspect-ratio: 778 / 700;
        border-radius: 16px;
        background: url("../images/dubai/transform-idea-dubai.png") left center / cover no-repeat;
    }

    .dubai-connect__art,
    .dubai-connect__panel {
        width: 100%;
        max-width: 620px;
        margin-inline: auto;
    }
}

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

    .dubai-hero__inner {
        padding: 60px 0;
    }

    .dubai-hero__features {
        grid-template-columns: 1fr;
        margin: 40px 0 44px;
    }

    /* Keep the slide animation; just shrink the button so the label fits. */
    .dubai-hero__cta {
        font-size: .68rem;
        padding: 11px 42px 11px 18px;
    }

    .dubai-hero__cta:hover {
        padding: 11px 18px 11px 42px;
    }

    .dubai-hero__cta-arrow {
        left: calc(100% - 34px);
        width: 28px;
        height: 28px;
    }

    .dubai-hero__cta:hover .dubai-hero__cta-arrow {
        left: 6px;
    }

    .dubai-stats {
        padding: 50px 0 60px;
    }

    .dubai-stat,
    .dubai-stat:first-child {
        flex: 1 1 100%;
        min-height: 0;
    }

    .dubai-badge {
        font-size: .75rem;
        padding: 9px 18px;
        letter-spacing: .04em;
    }

    .dubai-awards {
        padding: 10px 0 60px;
    }

    .dubai-award {
        flex: 0 0 210px;
        width: 210px;
    }

    /* Laurels would collide with the heading on narrow screens */
    .dubai-awards__leaf {
        display: none;
    }

    .dubai-award__media,
    .dubai-award__media img {
        height: 110px;
        max-height: 110px;
    }

    .dubai-services {
        padding: 60px 0 70px;
    }

    /* Stack copy above artwork so neither gets squeezed */
    .dubai-service {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .dubai-service__visual {
        flex: 0 0 auto;
        width: 100%;
        height: 140px;
    }

    .dubai-service__visual img {
        max-height: 140px;
        margin-right: 30px;
    }

    .dubai-industry {
        padding: 24px 22px 28px;
    }


    .dubai-process {
        padding: 55px 0 0;
    }

    .dubai-process__layout {
        padding: 12px;
        gap: 16px;
    }

    .dubai-step {
        padding: 22px 18px 24px;
    }

    .dubai-step__features {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 12px;
    }

    .dubai-tech {
        padding: 55px 0 65px;
    }

    .dubai-tech__head {
        margin-bottom: 40px;
    }

    .dubai-tech__row+.dubai-tech__row {
        margin-top: 46px;
    }

    /* Dimming reads as "broken" when only one row fits the screen */
    .dubai-tech__copy,
    .dubai-tech__visual img {
        opacity: 1;
    }

    .dubai-showcase {
        padding: 55px 0 65px;
    }

    .dubai-showcase__head {
        margin-bottom: 32px;
    }

    .dubai-pricing {
        padding: 55px 0 65px;
        /* Skyline is drawn for a wide canvas; cover keeps the towers in frame
           instead of shrinking them into a thin strip */
        background-size: cover;
    }

    .dubai-pricing__head {
        margin-bottom: 36px;
    }

    .dubai-pricing__table th,
    .dubai-pricing__table td {
        padding: 16px 18px;
        font-size: .875rem;
        /* Per-cell dividers align with the columns while the table scrolls;
           the % pseudo dividers (below) do not, so drop them here. */
        border-right: 1px solid #161616;
    }

    .dubai-pricing__table th:last-child,
    .dubai-pricing__table td:last-child {
        border-right: 0;
    }

    .dubai-pricing__scroll::before,
    .dubai-pricing__scroll::after {
        display: none;
    }

    .dubai-compare {
        padding: 55px 0 110px;
    }

    .dubai-compare__table th,
    .dubai-compare__table td {
        padding: 12px 12px;
    }

    .dubai-stack {
        margin-top: -60px;
        padding: 60px 0 65px;
        /* Stretching the notched panel to a tall narrow box distorts it badly,
           so drop the artwork and keep its colour */
        background: #070d1c;
        border-radius: 20px 20px 0 0;
    }

    .dubai-stack__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dubai-stack__card {
        padding: 20px 10px 18px;
        /* Drop the square ratio on mobile and let the grid stretch every card to
           the tallest in its row so they share one height regardless of copy. */
        aspect-ratio: auto;
        height: 100%;
    }

    /* Design's line breaks land mid-phrase once the column narrows */
    .dubai-stack__lead br,
    .dubai-stack__title br {
        display: none;
    }

    /* The design's line break lands mid-phrase once the column narrows */
    .dubai-showcase__title br {
        display: none;
    }

    .dubai-showcase__item {
        flex-basis: 100%;
        max-width: 240px;
        margin-inline: auto;
    }

    .dubai-why {
        padding: 55px 0 65px;
    }


    .dubai-why__grid {
        grid-template-columns: 1fr;
    }

    /* Design's break lands mid-phrase once the column narrows */
    .dubai-why__lead br {
        display: none;
    }

    .dubai-cta {
        padding: 60px 0 70px;
        /* Green reads better top-to-bottom than left-to-right on narrow screens */
        background: linear-gradient(160deg, #0e5c1d 0%, #06240c 35%, #000000 70%);
    }

    .dubai-cta__btn {
        padding: 14px 46px 14px 26px;
        font-size: 1rem;
    }

    .dubai-cta__btn:hover {
        padding: 14px 26px 14px 46px;
    }

    .dubai-connect {
        padding: 40px 0;
    }

    .dubai-connect__panel {
        padding: 24px 20px 22px;
    }

    /* reCAPTCHA needs its full ~302px to render (a narrower box crops the badge
       on the right). Give it that width, then scale the whole widget down to fit
       the panel -- the overflow is only the invisible untransformed box. */
    .dubai-connect__form .g-recaptcha {
        width: 302px;
        transform: scale(.8);
        transform-origin: left center;
    }

    /* Two name fields and the three info blocks both go single-column before
       their labels start wrapping */
    .dubai-connect__row,
    .dubai-connect__info {
        grid-template-columns: minmax(0, 1fr);
    }

    .dubai-connect__phone {
        grid-template-columns: 106px minmax(0, 1fr);
    }

    .dubai-connect__info {
        gap: 14px;
    }
}
/* =========================================================
   Scroll reveal
   Titles reveal word-by-word (left to right); cards, panels and supporting text
   rise/fade in as they enter the viewport. Driven by an animation (not a
   transition) so element hover/accordion transitions stay intact, and gated on
   html.dubai-anim (set in <head>) so nothing flashes before first paint.
   ========================================================= */

@keyframes dubaiRevealUp {
    from { opacity: 0; translate: 0 28px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes dubaiWordIn {
    from { opacity: 0; translate: 0 .5em; }
    to { opacity: 1; translate: 0 0; }
}

/* ---- Word-by-word titles ---- */
/* color:inherit so the existing `.<title> span { color }` accent rules don't
   paint every word span -- each word keeps its real parent's colour (white in
   the base heading, accent inside the original coloured span). */
html.dubai-anim .dubai-word {
    display: inline-block;
    color: inherit;
    opacity: 0;
    translate: 0 .45em;
    will-change: opacity, translate;
}

html.dubai-anim .is-inview .dubai-word {
    animation: dubaiWordIn .5s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--wd, 0ms);
}

/* ---- Cards / panels / supporting text: rise + fade ---- */
html.dubai-anim :is(
    .dubai-feature, .dubai-hero__cta, .dubai-hero__subtitle,
    .dubai-badge-wrap, .dubai-stat,
    .dubai-service, .dubai-services__eyebrow, .dubai-services__lead,
    .dubai-cta__text, .dubai-cta__btn,
    .dubai-stack__badge, .dubai-stack__lead, .dubai-stack__card,
    .dubai-compare__eyebrow, .dubai-compare__lead, .dubai-compare__phones, .dubai-compare__panel,
    .dubai-pricing__badge, .dubai-pricing__lead, .dubai-pricing__scroll,
    .dubai-awards__text, .dubai-awards__marquee, .dubai-comply__card,
    .dubai-process__eyebrow, .dubai-process__lead, .dubai-process__steps, .dubai-process__nav,
    .dubai-faq__promo, .dubai-faq__item,
    .dubai-connect__eyebrow, .dubai-connect__text, .dubai-connect__panel,
    .dubai-connect__lead-eyebrow, .dubai-connect__desc, .dubai-connect__based,
    .dubai-why__cta, .dubai-why__card,
    .dubai-showcase__eyebrow, .dubai-showcase__item
):not(.is-inview) {
    opacity: 0;
    translate: 0 28px;
}

html.dubai-anim :is(
    .dubai-feature, .dubai-hero__cta, .dubai-hero__subtitle,
    .dubai-badge-wrap, .dubai-stat,
    .dubai-service, .dubai-services__eyebrow, .dubai-services__lead,
    .dubai-cta__text, .dubai-cta__btn,
    .dubai-stack__badge, .dubai-stack__lead, .dubai-stack__card,
    .dubai-compare__eyebrow, .dubai-compare__lead, .dubai-compare__phones, .dubai-compare__panel,
    .dubai-pricing__badge, .dubai-pricing__lead, .dubai-pricing__scroll,
    .dubai-awards__text, .dubai-awards__marquee, .dubai-comply__card,
    .dubai-process__eyebrow, .dubai-process__lead, .dubai-process__steps, .dubai-process__nav,
    .dubai-faq__promo, .dubai-faq__item,
    .dubai-connect__eyebrow, .dubai-connect__text, .dubai-connect__panel,
    .dubai-connect__lead-eyebrow, .dubai-connect__desc, .dubai-connect__based,
    .dubai-why__cta, .dubai-why__card,
    .dubai-showcase__eyebrow, .dubai-showcase__item
).is-inview {
    animation: dubaiRevealUp .7s cubic-bezier(.22, .61, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    html.dubai-anim .dubai-word,
    html.dubai-anim :is(
        .dubai-feature, .dubai-hero__cta, .dubai-hero__subtitle,
        .dubai-badge-wrap, .dubai-stat,
        .dubai-service, .dubai-services__eyebrow, .dubai-services__lead,
        .dubai-cta__text, .dubai-cta__btn,
        .dubai-stack__badge, .dubai-stack__lead, .dubai-stack__card,
        .dubai-compare__eyebrow, .dubai-compare__lead, .dubai-compare__phones, .dubai-compare__panel,
        .dubai-pricing__badge, .dubai-pricing__lead, .dubai-pricing__scroll,
        .dubai-awards__text, .dubai-awards__marquee, .dubai-comply__card,
    .dubai-process__eyebrow, .dubai-process__lead, .dubai-process__steps, .dubai-process__nav,
        .dubai-faq__promo, .dubai-faq__item,
        .dubai-connect__eyebrow, .dubai-connect__text, .dubai-connect__panel,
    .dubai-connect__lead-eyebrow, .dubai-connect__desc, .dubai-connect__based,
    .dubai-why__cta, .dubai-why__card,
    .dubai-showcase__eyebrow, .dubai-showcase__item
    ) {
        opacity: 1 !important;
        translate: none !important;
        animation: none !important;
    }
}

/* Sticky fix: the global layout puts overflow-y:auto on BOTH html and body,
   which nests two scroll containers and disables position:sticky page-wide
   (the process rail, the services intro, etc.). Scoped to this page, make html
   the sole scroller. overflow-x:clip (not hidden) prevents horizontal scroll
   without the browser forcing overflow-y back to auto on body. */
html.dubai-anim body {
    overflow-x: clip;
    overflow-y: visible;
}

/* Smooth scroll for the in-page consultation-CTA anchors (scoped to this page) */
html.dubai-anim {
    scroll-behavior: smooth;
}