/* Real Estate ERP Software in the UAE (industry_real_estate_uae.html).
   Hero reuses .rex-* from industry_real_estate.css; everything below is scoped to .ruae. */

.ruae, .rex-hero {
    --ru-ink: #182241;
    --ru: #3f57d6;
    --ru-2: #5b74f0;
    --ru-gold: #c19a3d;
    --ru-gold-2: #e0bd63;
    --ru-soft: #eef1fd;
    --ru-soft-2: #f6f8fe;
    --ru-line: #e6e9f4;
    --ru-muted: #5f6785;
    --ru-grad: linear-gradient(120deg, #5b74f0 0%, #3f57d6 100%);
    --ru-grad-gold: linear-gradient(120deg, #e0bd63 0%, #c19a3d 100%);
}

/* hero: two small status cards over the dashboard */
.ruae-float-lang, .ruae-float-vat {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .95rem .65rem .65rem; border-radius: 1rem;
}
.ruae-float-lang { left: 0; bottom: 1.2rem; animation-delay: -2s; }
.ruae-float-vat { top: .1rem; right: 0; animation-delay: -4.5s; }
.ruae-float-vat::before {
    content: ""; position: absolute; left: .8rem; right: .8rem; top: 0; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--ru-grad-gold);
}
.ruae-float-lang .ic, .ruae-float-vat .ic {
    flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .7rem;
    font-size: 1.15rem; color: #fff; background: var(--ru-grad);
}
.ruae-float-vat .ic { color: #3a2e08; background: var(--ru-grad-gold); }
.ruae-float-lang b, .ruae-float-vat b { display: block; font-size: .78rem; color: var(--ru-ink); line-height: 1.25; }
.ruae-float-lang span:not(.ic), .ruae-float-vat span:not(.ic) { font-size: .7rem; color: var(--ru-muted); }

/* section heads */
.ruae-head { max-width: 46rem; margin: 0 auto 2.75rem; text-align: center; }
.ruae-head h2 {
    margin: 1.1rem 0 .9rem; color: var(--ru-ink); font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.7rem, 3.1vw, 2.45rem); line-height: 1.15; text-wrap: balance;
}
.ruae-head p { margin: 0; color: var(--ru-muted); font-size: 1.05rem; line-height: 1.7; }
.ruae h3 { color: var(--ru-ink); font-weight: 700; letter-spacing: -.01em; }
.ruae-ic {
    flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .9rem;
    font-size: 1.45rem; color: var(--ru); background: var(--ru-soft);
}
.ruae-ic--sm { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; border-radius: .75rem; }

/* UAE features */
.ruae-features { background: linear-gradient(180deg, #fff 0%, var(--ru-soft-2) 100%); }
.ruae-uae-grid {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 1.25rem;
}
.ruae-card {
    display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; border-radius: 1.2rem;
    background: #fff; border: 1px solid var(--ru-line);
    box-shadow: 0 1.2rem 2.4rem -2rem rgba(24, 34, 65, .35);
}
.ruae-card h3 { margin: .2rem 0 0; font-size: 1.1rem; }
.ruae-card p { margin: 0; color: var(--ru-muted); font-size: .92rem; line-height: 1.65; }
.ruae-card--lead {
    grid-row: span 2; color: #c6cbe6; border-color: transparent; padding: 2rem;
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(224, 189, 99, .22) 0%, transparent 60%),
        linear-gradient(160deg, #1b2550 0%, #141c38 100%);
    box-shadow: 0 1.8rem 3.2rem -1.8rem rgba(20, 28, 56, .7);
}
.ruae-card--lead .ruae-ic { color: #3a2e08; background: var(--ru-grad-gold); }
.ruae-card--lead h3 { color: #fff; font-size: 1.35rem; }
.ruae-card--lead p { color: #c6cbe6; font-size: .98rem; }
.ruae-card--lead ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ruae-card--lead li { position: relative; padding-left: 1.6rem; color: #fff; font-size: .9rem; font-weight: 600; }
.ruae-card--lead li::before {
    content: "\2713"; position: absolute; left: 0; top: .05rem; width: 1.1rem; height: 1.1rem;
    display: grid; place-items: center; border-radius: 50%; font-size: .65rem;
    color: #3a2e08; background: var(--ru-gold-2);
}

/* modules */
.ruae-mod-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.ruae-mod-grid li {
    display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem 1.2rem; border-radius: 1rem;
    border: 1px solid var(--ru-line); background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ruae-mod-grid li:hover { transform: translateY(-2px); border-color: #cfd6f7; box-shadow: 0 1rem 1.8rem -1.4rem rgba(24, 34, 65, .45); }
.ruae-mod-grid h3 { margin: .1rem 0 .25rem; font-size: .98rem; }
.ruae-mod-grid p { margin: 0; color: var(--ru-muted); font-size: .85rem; line-height: 1.55; }
.ruae-more { margin: 2rem 0 0; text-align: center; color: var(--ru-muted); }
.ruae-more a { color: var(--ru); font-weight: 700; border-bottom: 2px solid var(--ru-gold); }

/* who it's for */
.ruae-who { background: var(--ru-soft-2); }
.ruae-who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.ruae-who-grid article {
    position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: 1.1rem; background: #fff;
    border: 1px solid var(--ru-line); overflow: hidden;
}
.ruae-who-grid article::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--ru-grad);
}
.ruae-who-grid article:nth-child(even)::before { background: var(--ru-grad-gold); }
.ruae-who-grid h3 { margin: 0 0 .55rem; font-size: 1.05rem; }
.ruae-who-grid p { margin: 0; color: var(--ru-muted); font-size: .9rem; line-height: 1.6; }

/* implementation steps */
.ruae-steps-list {
    list-style: none; margin: 0; padding: 0; counter-reset: ruae;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
}
.ruae-steps-list li { counter-increment: ruae; position: relative; padding-top: 3.4rem; }
.ruae-steps-list li::before {
    content: counter(ruae, decimal-leading-zero); position: absolute; left: 0; top: 0;
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .8rem;
    font-weight: 800; font-size: .9rem; color: #fff; background: var(--ru-grad);
    box-shadow: 0 0 0 .35rem var(--ru-soft);
}
.ruae-steps-list li::after {
    content: ""; position: absolute; left: 3.4rem; right: 0; top: 1.3rem; border-top: 2px dashed #d7ddf6;
}
.ruae-steps-list li:last-child::after { display: none; }
.ruae-steps-list h3 { margin: 0 0 .45rem; font-size: 1.05rem; }
.ruae-steps-list p { margin: 0; color: var(--ru-muted); font-size: .9rem; line-height: 1.6; }
.ruae-proof {
    display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2.75rem; padding: 1.5rem 1.6rem;
    border-radius: 1.1rem; background: #fbf7ec; border: 1px solid #eeddb0;
}
.ruae-proof .ruae-ic { color: #3a2e08; background: var(--ru-grad-gold); }
.ruae-proof h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.ruae-proof p { margin: 0; color: #5d5337; line-height: 1.6; }
.ruae-case { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e3cf95; }
.ruae-case h4 { margin: 0 0 .35rem; font-size: .98rem; color: var(--ru-ink); }
.ruae-case ul { margin: .5rem 0 0; padding-left: 1.1rem; color: #5d5337; }

/* FAQ */
.ruae-faq { background: var(--ru-soft-2); }
.ruae-faq-list { max-width: 52rem; margin: 0 auto; }
.ruae-faq-list .card { border: 1px solid var(--ru-line); border-radius: .9rem; margin-bottom: .75rem; }

/* closing CTA */
.ruae-cta { background: var(--ru-soft-2); }
.ruae-cta-card {
    display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 1.5rem 3rem; align-items: center;
    padding: 2.4rem 2.6rem; border-radius: 1.4rem; color: #c6cbe6;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(224, 189, 99, .2) 0%, transparent 60%),
        radial-gradient(60% 80% at 0% 100%, rgba(91, 116, 240, .25) 0%, transparent 60%),
        linear-gradient(160deg, #1b2550 0%, #141c38 100%);
    box-shadow: 0 2rem 3.6rem -2rem rgba(20, 28, 56, .7);
}
.ruae-cta-card h2 { margin: 1rem 0 .6rem; color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ruae-cta-card p { margin: 0; max-width: 36rem; line-height: 1.65; }
.ruae-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.ruae-cta .rex-btn--primary { --rx-gold: #c19a3d; --rx-gold-2: #e0bd63; color: var(--ru-ink); background: #fff; }
.ruae-cta .rex-btn--primary:hover, .ruae-cta .rex-btn--primary:focus-visible { color: var(--ru-ink); }
.ruae-mail { color: #fff; font-weight: 600; font-size: .9rem; }
.ruae-mail:hover { color: var(--ru-gold-2); }

@media (max-width: 1199.98px) {
    .ruae-mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ruae-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ruae-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .ruae-steps-list li:nth-child(2)::after { display: none; }
}
@media (max-width: 991.98px) {
    .ruae-uae-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ruae-card--lead { grid-row: auto; grid-column: span 2; }
    .ruae-cta-card { grid-template-columns: minmax(0, 1fr); padding: 2rem; }
}
@media (max-width: 575.98px) {
    .ruae-uae-grid, .ruae-mod-grid, .ruae-who-grid, .ruae-steps-list { grid-template-columns: minmax(0, 1fr); }
    .ruae-card--lead { grid-column: auto; padding: 1.6rem; }
    .ruae-steps-list li::after { display: none; }
    .ruae-proof { flex-direction: column; }
    .ruae-cta-card { padding: 1.6rem 1.4rem; }
    .ruae-float-lang { bottom: .4rem; padding: .5rem .7rem .5rem .5rem; }
    .ruae-visual .ruae-float-vat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ruae-mod-grid li { transition: none; }
    .ruae-mod-grid li:hover { transform: none; }
}

.tk-answer {
    --qa-accent: #3f57d6; --qa-accent-soft: rgba(63, 87, 214, .07); --qa-accent-line: rgba(63, 87, 214, .22);
    --qa-grad: linear-gradient(120deg, #e0bd63 0%, #c19a3d 100%);
    --qa-ink: #182241; --qa-muted: #5f6785;
}

/* ---------- Hero: animated property console (replaces the dashboard screenshot) ---------- */
.ruae-float-lang .ic { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.ruae-visual .ruae-float-lang { bottom: -.4rem; }
.ruae-visual .ruae-float-vat { top: -.9rem; }
.ruae-float-lang b { direction: ltr; unicode-bidi: plaintext; }
.ruae-live {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .62rem; font-weight: 700; color: #1f9d55;
}
.ruae-live i { width: .45rem; height: .45rem; border-radius: 50%; background: #1f9d55; animation: ruaeLive 2s ease-in-out infinite; }
.ruae-dash-body {
    display: grid; gap: .65rem; padding: .85rem;
    background: linear-gradient(180deg, #f6f8fe 0%, #fff 100%); color: var(--ru-ink); font-size: .7rem;
}
.ruae-panel, .ruae-kpi { background: #fff; border: 1px solid var(--ru-line); border-radius: .75rem; }
.ruae-panel { padding: .65rem .75rem; min-width: 0; }
.ruae-panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .55rem; }
.ruae-panel-h b { font-size: .72rem; font-weight: 800; }
.ruae-panel-h span { font-size: .56rem; color: var(--ru-muted); white-space: nowrap; }

.ruae-kpis { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: .6rem; }
.ruae-kpi { display: flex; flex-direction: column; gap: .12rem; padding: .6rem .7rem; min-width: 0; }
.ruae-kpi .lbl { font-size: .54rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ru-muted); }
.ruae-kpi b { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.ruae-kpi .trend { font-size: .56rem; color: var(--ru-muted); white-space: nowrap; }
.ruae-kpi .trend.up { color: #1f9d55; font-weight: 700; }
.ruae-kpi--ring { flex-direction: row; align-items: center; gap: .55rem; }
.ruae-kpi--ring div { display: flex; flex-direction: column; gap: .1rem; }
.ruae-ring { flex: none; width: 2.5rem; height: 2.5rem; transform: rotate(-90deg); }
.ruae-ring circle { fill: none; stroke-width: 4.4; }
.ruae-ring .trk { stroke: var(--ru-soft); }
.ruae-ring .val { stroke: var(--ru); stroke-linecap: round; stroke-dasharray: 94 100; animation: ruaeRing 1.6s .3s cubic-bezier(.2, .8, .2, 1) both; }

.ruae-dash-mid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: .6rem; }

/* tower: unit windows light up floor by floor */
.ruae-tower-card { display: flex; flex-direction: column; }
.ruae-tower {
    position: relative; width: 70%; margin: 1.35rem auto 0; padding: .35rem .35rem .45rem;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px;
    background: linear-gradient(180deg, #2a3668 0%, #182241 100%); border-radius: .35rem .35rem 0 0;
}
.ruae-tower::before {
    content: ""; position: absolute; left: 50%; bottom: 100%; width: 34%; height: .7rem;
    transform: translateX(-50%); background: #2a3668; border-radius: .35rem .35rem 0 0;
}
.ruae-tower::after {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + .7rem); width: 2px; height: .55rem;
    transform: translateX(-50%); background: var(--ru-gold-2); box-shadow: 0 -2px 6px rgba(224, 189, 99, .9);
}
.ruae-tower i {
    aspect-ratio: 1 / 1.2; border-radius: 1.5px; background: var(--ru-2); opacity: 0;
    animation: ruaeWin .35s calc(.35s + (47 - var(--i)) * 28ms) ease-out forwards;
}
.ruae-tower i.v { background: rgba(255, 255, 255, .16); }
.ruae-tower i.r {
    background: var(--ru-gold-2);
    animation: ruaeWin .35s calc(.35s + (47 - var(--i)) * 28ms) ease-out forwards,
               ruaeGlow 2.6s calc(2.2s + var(--i) * 60ms) ease-in-out infinite;
}
.ruae-tower i.n {
    background: rgba(255, 255, 255, .16);
    animation: ruaeWin .35s calc(.35s + (47 - var(--i)) * 28ms) ease-out forwards,
               ruaeLease 6s 2.4s ease-in-out infinite;
}
.ruae-ground { width: 88%; height: 3px; margin: 0 auto; border-radius: 2px; background: #cfd6ef; }
.ruae-legend { display: flex; justify-content: center; gap: .6rem; margin-top: .55rem; font-size: .55rem; color: var(--ru-muted); }
.ruae-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.ruae-legend span::before { content: ""; width: .45rem; height: .45rem; border-radius: 2px; }
.ruae-legend .occ::before { background: var(--ru-2); }
.ruae-legend .ren::before { background: var(--ru-gold-2); }
.ruae-legend .vac::before { background: #cfd6ef; }

/* post-dated cheques clear one after another, then the cycle repeats */
.ruae-pdc { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.ruae-pdc li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem;
    padding: .34rem .45rem; border-radius: .5rem; background: var(--ru-soft-2);
}
.ruae-pdc .d { width: 2.7rem; font-size: .6rem; font-weight: 700; color: var(--ru-muted); }
.ruae-pdc .amt { font-size: .66rem; font-weight: 700; white-space: nowrap; }
.ruae-pdc .st { position: relative; width: 3.8rem; height: 1.1rem; }
.ruae-pdc .st > span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .15rem;
    border-radius: 2rem; font-size: .55rem; font-weight: 800;
}
.ruae-pdc .st .due { color: #8a6d1f; background: #fbf1d7; }
.ruae-pdc .st .ok { color: #1f9d55; background: #e3f5ea; opacity: 0; }
.ruae-pdc li:nth-child(1) .ok { animation: ruaePdc1 10s 1s infinite; }
.ruae-pdc li:nth-child(2) .ok { animation: ruaePdc2 10s 1s infinite; }
.ruae-pdc li:nth-child(3) .ok { animation: ruaePdc3 10s 1s infinite; }
.ruae-pdc li:nth-child(4) .ok { animation: ruaePdc4 10s 1s infinite; }
.ruae-pdc-foot { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; font-size: .55rem; color: var(--ru-muted); }
.ruae-pdc-bar { flex: 1; height: .32rem; border-radius: 1rem; background: var(--ru-soft); overflow: hidden; }
.ruae-pdc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #34c77b, #1f9d55); animation: ruaePdcBar 10s 1s infinite; }

/* rent collection bars grow in */
.ruae-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; align-items: end; height: 4.4rem; }
.ruae-bars .bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; height: 100%; }
.ruae-bars .bar i {
    width: 100%; height: var(--h); border-radius: .3rem .3rem .15rem .15rem; background: var(--ru-grad);
    transform-origin: bottom; animation: ruaeBar .9s calc(.6s + var(--k) * .11s) cubic-bezier(.2, .8, .2, 1) both;
}
.ruae-bars .bar:last-child i { background: var(--ru-grad-gold); }
.ruae-bars span { font-size: .52rem; color: var(--ru-muted); }

@keyframes ruaeLive { 50% { box-shadow: 0 0 0 .3rem rgba(31, 157, 85, .18); } }
@keyframes ruaeRing { from { stroke-dasharray: 0 100; } }
@keyframes ruaeWin { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ruaeGlow { 50% { filter: brightness(1.2); box-shadow: 0 0 6px rgba(224, 189, 99, .85); } }
@keyframes ruaeLease {
    0%, 35% { background: rgba(255, 255, 255, .16); box-shadow: none; }
    45%, 85% { background: #7c90ff; box-shadow: 0 0 7px rgba(124, 144, 255, .95); }
    100% { background: rgba(255, 255, 255, .16); box-shadow: none; }
}
@keyframes ruaePdc1 { 0%, 8% { opacity: 0; } 12%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ruaePdc2 { 0%, 28% { opacity: 0; } 32%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ruaePdc3 { 0%, 48% { opacity: 0; } 52%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ruaePdc4 { 0%, 68% { opacity: 0; } 72%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ruaePdcBar {
    0%, 8% { width: 0; } 12%, 28% { width: 25%; } 32%, 48% { width: 50%; }
    52%, 68% { width: 75%; } 72%, 90% { width: 100%; } 96%, 100% { width: 0; }
}
@keyframes ruaeBar { from { transform: scaleY(0); } }

@media (max-width: 575.98px) {
    .ruae-dash-body { padding: .6rem; gap: .5rem; }
    .ruae-kpis { gap: .4rem; }
    .ruae-kpi { padding: .5rem .5rem; }
    .ruae-kpi b { font-size: .78rem; }
    .ruae-kpi .trend { display: none; }
    .ruae-ring { width: 2rem; height: 2rem; }
    .ruae-kpi--ring { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .ruae-kpi .lbl { font-size: .5rem; letter-spacing: .03em; }
    .ruae-dash-mid { grid-template-columns: minmax(0, 1fr); }
    .ruae-tower-card { display: none; }
    .ruae-float-lang b { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ruae-live i, .ruae-ring .val, .ruae-tower i, .ruae-bars .bar i, .ruae-pdc .st .ok, .ruae-pdc-bar i { animation: none; }
    .ruae-tower i { opacity: 1; }
    .ruae-tower i.n { background: rgba(255, 255, 255, .16); }
    .ruae-pdc li:nth-child(-n+3) .ok { opacity: 1; }
    .ruae-pdc-bar i { width: 75%; }
}