/* ==========================================================================
   Garage, Car Repair & Fleet Management Software for MENA Countries
   Loaded after industry_vehicle_repair.css (.au-* tokens and components) and
   industry_automotive_uae.css (shared .aue-* landing components, reveals and
   reduced-motion rules). This file adds the MENA-only sections, scoped .amn.
   ========================================================================== */
.amn .amn-h2 { font-size: clamp(1.8rem, 3.2vw, 2.55rem); margin-bottom: 1rem; }
.amn-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; align-items: center; }

/* ==========================================================================
   HERO — regional workshop network
   ========================================================================== */
.amn-net { padding: 1.3rem; }
.amn-map { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.amn-links path { animation: amn-dash 1.6s linear infinite; opacity: .75; }
@keyframes amn-dash { to { stroke-dashoffset: -22; } }
.amn-pin .core { fill: var(--au); stroke: var(--au-dark); stroke-width: 2; }
.amn-pin.hq .core { fill: #fff; stroke: var(--au); stroke-width: 3.5; }
.amn-pin .ring {
    fill: none; stroke: #ff8a3d; stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
    animation: amn-ping 2.8s ease-out infinite; animation-delay: calc(var(--k) * .4s);
}
.amn-pin.hq .ring { stroke: #fff; }
@keyframes amn-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.amn-pin text { font: 600 10.5px/1 system-ui, sans-serif; fill: #93a0b4; }
.amn-pin.hq text { fill: #fff; font-weight: 800; }
.amn-kpis { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .6rem; }
.amn-kpis div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: .8rem; padding: .6rem .75rem; }
.amn-kpis span { display: block; font-size: .68rem; color: #93a0b4; font-weight: 600; }
.amn-kpis b { color: #fff; font-weight: 800; font-size: .95rem; }
.amn-kpis b small { color: #93a0b4; font-weight: 600; font-size: .68rem; }
.amn-kpis b.ok { color: #9af0bd; font-size: .8rem; }

/* ==========================================================================
   BUILT FOR REGIONAL GROUPS — rotating per-country invoices
   ========================================================================== */
.amn-region { background: #fff; }
.amn-invstack { position: relative; height: 20rem; }
.amn-invstack::before, .amn-invstack::after {
    content: ""; position: absolute; left: 50%; width: min(100%, 22rem); height: 15rem; border-radius: 1.2rem;
    background: #fff; border: 1px solid var(--au-line); transform: translateX(-50%);
}
.amn-invstack::before { top: 3.4rem; transform: translateX(-50%) rotate(-5deg); background: var(--au-soft-2); }
.amn-invstack::after { top: 2.8rem; transform: translateX(-50%) rotate(3deg); }
.amn-inv {
    position: absolute; z-index: 2; top: 2.2rem; left: 50%; width: min(100%, 22rem); margin-left: max(-50%, -11rem);
    background: #fff; border: 1px solid var(--au-line); border-radius: 1.2rem; padding: 1.3rem 1.3rem 1.1rem;
    box-shadow: 0 1.8rem 3.6rem rgba(20,24,31,.14);
    animation: amn-deal 12.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s - 12.5s);
}
@keyframes amn-deal {
    0% { opacity: 0; transform: translateY(26px) scale(.95); }
    4%, 16% { opacity: 1; transform: none; }
    19.5%, 100% { opacity: 0; transform: translateY(-18px) scale(.98); }
}
.amn-inv-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.amn-inv-head .cc { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--au-grad); border-radius: .45rem; padding: .25rem .45rem; }
.amn-inv-head b { color: var(--au-ink); font-weight: 800; font-size: .95rem; }
.amn-inv-head .st { margin-left: auto; font-size: .66rem; font-weight: 800; color: #1a8f4c; background: #e5f7ec; padding: .22rem .55rem; border-radius: 2rem; }
.amn-inv-line { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--au-line); font-size: .8rem; color: var(--au-muted); }
.amn-inv-line span { width: 5.5rem; flex: none; }
.amn-inv-line i { height: .45rem; width: 80%; border-radius: 2rem; background: #f1e8de; }
.amn-inv-line i.s { width: 55%; }
.amn-inv-line i.xs { width: 25%; background: #ffd9bf; }
.amn-inv-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .78rem; color: var(--au-muted); }
.amn-inv-foot b { color: var(--au-3); font-weight: 800; }
.amn-stamp {
    position: absolute; z-index: 3; top: 1rem; right: calc(50% - 12.2rem); width: 3rem; height: 3rem; border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 .8rem 1.6rem rgba(22,163,74,.35);
    animation: amn-stamp 2.5s ease-in-out infinite;
}
@keyframes amn-stamp { 0%, 30% { transform: scale(0); } 40% { transform: scale(1.2); } 48%, 82% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
.amn-ctable { margin-top: 3.5rem; }
.amn-caption { caption-side: top; padding: 1rem 1.1rem; font-weight: 800; color: var(--au-ink); background: #fff; text-align: left; }

/* ==========================================================================
   ADVANCE VEHICLE REPAIR — roles + DVI phone
   ========================================================================== */
.amn-avr-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 3rem; align-items: center; margin-top: 3.2rem; }
.amn-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.amn-role { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 1.1rem; padding: 1.3rem 1.3rem 1.1rem; }
.amn-role h3 { display: flex; align-items: center; gap: .75rem; color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0 0 .9rem; }
.amn-role h3 .aue-ic { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
.amn-role ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.amn-role li { position: relative; padding-left: 1.3rem; font-size: .85rem; line-height: 1.5; }
.amn-role li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--au-2); }

.amn-phone {
    position: relative; width: 17rem; max-width: 100%; margin: 0 auto; padding: 1.7rem 1rem 1.1rem;
    background: #fff; color: #303a44; border: 8px solid #0b0e13; border-radius: 2.2rem;
    box-shadow: 0 2.4rem 5rem rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.amn-phone-notch { position: absolute; top: .45rem; left: 50%; width: 4.5rem; height: .55rem; margin-left: -2.25rem; border-radius: 1rem; background: #0b0e13; }
.amn-dvi-head small { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--au); }
.amn-dvi-head b { display: block; color: var(--au-ink); font-weight: 800; font-size: 1rem; margin: .15rem 0; }
.amn-dvi-head span { font-size: .68rem; color: var(--au-muted); }
.amn-dvi { list-style: none; padding: 0; margin: .9rem 0 .7rem; display: flex; flex-direction: column; gap: .4rem; }
.amn-dvi li {
    display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: .6rem; background: var(--au-soft-2);
    animation: amn-row 9s ease-in-out infinite; animation-delay: calc(var(--i) * .35s);
}
@keyframes amn-row { 0% { opacity: 0; transform: translateX(-10px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.amn-dvi .ph { width: 1.6rem; height: 1.6rem; flex: none; border-radius: .4rem; background: #e9e1d8; color: #a59684; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.amn-dvi .nm { font-size: .76rem; font-weight: 700; color: var(--au-ink); }
.amn-dvi .chip { margin-left: auto; font-size: .6rem; font-weight: 800; padding: .18rem .45rem; border-radius: 2rem; }
.amn-dvi .chip.bad { color: #b4232a; background: #fde4e4; }
.amn-dvi .chip.warn { color: #a56a00; background: #fbf1db; }
.amn-dvi .chip.ok { color: #1a8f4c; background: #e5f7ec; }
.amn-dvi-quote { display: flex; justify-content: space-between; font-size: .76rem; color: var(--au-muted); padding: .2rem .2rem .5rem; }
.amn-dvi-quote b { color: var(--au-ink); font-weight: 800; }
.amn-dvi-sign { border: 1px dashed #d9d2c9; border-radius: .6rem; height: 3.2rem; display: flex; align-items: center; padding: 0 .4rem; }
.amn-dvi-sign svg { width: 100%; height: 2.4rem; }
.amn-sig { stroke-dasharray: 100; stroke-dashoffset: 0; animation: amn-sign 9s ease-in-out infinite; }
@keyframes amn-sign { 0%, 38% { stroke-dashoffset: 100; } 58%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.amn-dvi-btn {
    margin-top: .7rem; padding: .65rem; border-radius: .8rem; text-align: center; font-weight: 800; font-size: .82rem; color: #fff;
    background: var(--au-grad); animation: amn-approve 9s ease-in-out infinite;
}
@keyframes amn-approve {
    0%, 58% { transform: none; background: var(--au-grad); }
    63% { transform: scale(1.06); }
    66%, 92% { transform: none; background: linear-gradient(90deg, #22c55e, #16a34a); }
    100% { background: var(--au-grad); }
}

/* ==========================================================================
   FLEET & AUTOMOTIVE SUITE — fleet health
   ========================================================================== */
.amn-suite { background: var(--au-soft-2); }
.amn-suite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.amn-suite-grid article { background: #fff; border: 1px solid var(--au-line); border-radius: 1rem; padding: 1.1rem 1.2rem; }
.amn-suite-grid h3 { display: flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 800; color: var(--au-ink); margin: 0 0 .35rem; }
.amn-suite-grid h3 i { color: var(--au); font-size: 1.2rem; }
.amn-suite-grid p { font-size: .84rem; color: var(--au-muted); line-height: 1.5; margin: 0; }
.amn-health-body { display: flex; align-items: center; gap: 1.6rem; padding: .4rem 0; }
.amn-ring { position: relative; width: 8rem; flex: none; }
.amn-ring svg { display: block; width: 100%; transform: rotate(-90deg); }
.amn-ring .val { stroke-dasharray: 87 100; animation: amn-ring 7s ease-in-out infinite; }
@keyframes amn-ring { 0% { stroke-dasharray: 0 100; } 30%, 85% { stroke-dasharray: 87 100; } 100% { stroke-dasharray: 0 100; } }
.amn-ring div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.amn-ring b { font-size: 1.5rem; font-weight: 800; color: var(--au-ink); line-height: 1; }
.amn-ring span { font-size: .62rem; color: var(--au-muted); max-width: 5rem; line-height: 1.25; margin-top: .2rem; }
.amn-bars { flex: 1; display: flex; align-items: flex-end; gap: .55rem; height: 8.5rem; }
.amn-bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem; height: 100%; }
.amn-bars .bar i {
    display: block; width: 100%; max-width: 1.8rem; height: calc(var(--h) * .8); border-radius: .45rem .45rem .2rem .2rem;
    background: var(--au-grad); transform-origin: bottom;
    animation: amn-grow 7s ease-in-out infinite; animation-delay: calc(var(--k) * .12s);
}
@keyframes amn-grow { 0% { transform: scaleY(.1); } 30%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.amn-bars .bar span { font-size: .64rem; font-weight: 700; color: var(--au-muted); }

/* ==========================================================================
   COMPARE + ROLLOUT
   ========================================================================== */
.amn-compare { background: #fff; }
.amn-compare .aue-table { min-width: 36rem; }
.amn-compare .aue-table tbody th { width: 26%; }

.amn-timeline { position: relative; max-width: 54rem; margin: 0 auto 3.2rem; }
.amn-tl-track { position: absolute; top: 1.1rem; left: 10%; right: 10%; height: 4px; border-radius: 4px; background: #f1e4d8; overflow: hidden; }
.amn-tl-track i { display: block; height: 100%; background: var(--au-grad); transform-origin: left; }
.amn-timeline ol { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.amn-timeline li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
.amn-timeline .dot {
    width: 2.3rem; height: 2.3rem; border-radius: 50%; margin-bottom: .45rem; display: flex; align-items: center; justify-content: center;
    background: var(--au-grad); color: #fff; border: 3px solid #fff; box-shadow: 0 .5rem 1.2rem rgba(242,102,26,.3);
}
.amn-timeline b { font-size: .92rem; font-weight: 800; color: var(--au-ink); }
.amn-timeline small { font-size: .74rem; color: var(--au-muted); }
/* plays once, country by country, when the timeline scrolls into view */
.aue.is-armed .amn-timeline .amn-tl-track i { transform: scaleX(0); transition: transform 4.2s cubic-bezier(.4,0,.2,1) .3s; }
.aue.is-armed .amn-timeline.is-in .amn-tl-track i { transform: scaleX(1); }
.aue.is-armed .amn-timeline .dot { background: #fff; color: transparent; border-color: #f1e4d8; box-shadow: none; transform: scale(.85);
    transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.3,1.6,.5,1);
    transition-delay: calc(var(--k) * 1s + .3s); }
.aue.is-armed .amn-timeline.is-in .dot { background: var(--au-grad); color: #fff; border-color: #fff; box-shadow: 0 .5rem 1.2rem rgba(242,102,26,.3); transform: none; }
.amn-svc { margin-top: 3rem; }

/* ==========================================================================
   CTA — orbiting markets
   ========================================================================== */
.amn-orbit { position: absolute; right: -2.5rem; bottom: -3.5rem; width: 15rem; opacity: .75; pointer-events: none; }
.amn-orbit-a { transform-origin: 100px 100px; animation: aue-spin 14s linear infinite; }
.amn-orbit-b { transform-origin: 100px 100px; animation: aue-spin 22s linear infinite reverse; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .amn-split, .amn-avr-body { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
}
@media (max-width: 767px) {
    .amn-roles, .amn-suite-grid { grid-template-columns: minmax(0, 1fr); }
    .amn-kpis { grid-template-columns: minmax(0, 1fr); }
    .amn-health-body { flex-direction: column; align-items: stretch; }
    .amn-ring { margin: 0 auto; }
    .amn-timeline b { font-size: .78rem; }
    .amn-timeline small { display: none; }
    .amn-stamp { right: .5rem; }
    .amn-orbit { width: 11rem; opacity: .4; }
}