/* Advanced Rent - product site. Builds on the ATC "Indigo Stage" stylesheet (site.css). */
.brand img{height:46px;width:46px;border-radius:12px;filter:drop-shadow(0 0 22px #7f7aa855)}
header.solid .brand img{height:40px;width:40px}
.brand b{letter-spacing:.14em}
.nav-cta{padding:10px 22px!important;font-size:13px}
nav.main .btn{color:var(--ink)}
nav.main .btn:hover{color:var(--glow)}
nav.main>a.btn::after{display:none}

/* ---------- phone screens ---------- */
.phone{position:relative;width:min(300px,100%);margin:0}
.phone .scr{position:relative;height:var(--ph,600px);overflow:hidden;border-radius:34px;border:7px solid #0b0930;
  background:#f4f6f9;box-shadow:0 0 0 1.5px #ffffff26,0 44px 80px -24px #000c,0 0 80px #7f7aa83a}
.phone img{width:100%;height:auto;display:block}
.phone.scroll img{animation:scrollscreen var(--dur,14s) ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.phone.scroll.play img{animation-play-state:running}
@keyframes scrollscreen{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(calc(-1 * var(--dist)))}}
.phone figcaption{margin-top:18px;text-align:center;font-size:13px;letter-spacing:.04em;color:var(--mist)}
.phone figcaption b{display:block;color:#fff;font-size:15px;font-weight:600;letter-spacing:0;margin-bottom:2px}
.sample{margin-top:26px;font-size:12px;letter-spacing:.08em;color:#8c86ad;text-align:center}

/* ---------- home hero ---------- */
.phero{position:relative;min-height:100vh;padding:150px 0 90px;overflow:hidden;
  background:radial-gradient(42% 50% at 76% 18%,#453f67,transparent 70%),radial-gradient(40% 8% at 76% 88%,#3a3566aa,transparent 70%),linear-gradient(180deg,#1c1846,#000031 82%)}
.phero .grid{display:grid;grid-template-columns:1.02fr 1fr;gap:50px;align-items:center}
.phero .est{margin-bottom:22px}
.phero h1{font-weight:200;font-size:clamp(44px,5.2vw,82px);line-height:1.03;letter-spacing:-.02em}
.phero h1 b{font-weight:600;color:var(--glow)}
.phero p.lead{margin-top:26px;font-size:17px;line-height:1.85;color:var(--silver);max-width:560px}
.phero .btns{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.phero .pills{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}
.pill{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;background:#ffffff08}
.phones{position:relative;height:700px;display:flex;justify-content:center}
.phones .phone{position:absolute;width:300px;--ph:610px}
.phones .p-back{left:2%;top:46px;transform:rotate(-6deg);opacity:.92}
.phones .p-mid{right:0;top:0;transform:rotate(5deg)}
.phones .p-front{left:50%;top:70px;transform:translateX(-50%);z-index:3;--ph:600px}
.phones .halo{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#7f7aa844,transparent 72%);animation:iconhalo 7s ease-in-out infinite}

/* ---------- sections ---------- */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.five .phone{--ph:430px;width:100%}
.feat{display:grid;grid-template-columns:.85fr 1.5fr;gap:64px;align-items:center}
.feat.rev{grid-template-columns:1.5fr .85fr}
.feat.rev .ftxt{order:2}
.ftxt .lbl{margin-bottom:18px}
.ftxt h2{font-weight:300;font-size:clamp(30px,3.3vw,46px);line-height:1.1}
.ftxt h2 b{font-weight:600;color:var(--glow)}
.ftxt p{margin-top:20px;font-size:16px;line-height:1.85;color:var(--silver)}
.ftxt .flist{margin-top:22px}
.prow{display:flex;gap:30px;overflow-x:auto;padding:14px 8px 34px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#453f67 transparent}
.prow .phone{flex:0 0 288px;scroll-snap-align:start;--ph:580px}
.prow::-webkit-scrollbar{height:6px}.prow::-webkit-scrollbar-thumb{background:#453f67;border-radius:6px}
.swipe{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8c86ad;margin-top:-6px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lav2);border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--glow);background:#ffffff0a}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--lav)}
.ladder{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px;font-size:13px;color:var(--silver)}
.ladder span.s{border:1px solid var(--line2);border-radius:10px;padding:8px 14px;background:#ffffff0a}
.ladder span.ar{color:var(--lav)}
.note{margin-top:18px;font-size:13px;color:#8c86ad;line-height:1.7}
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px;font-size:13px}
.chain span.s{border:1px solid var(--line2);border-radius:10px;padding:8px 14px;background:#ffffff0a;color:var(--silver)}
.chain span.ar{color:var(--lav)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.facts .n{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--glow)}
.facts .l{margin-top:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.payband{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.paycard{border:1px solid var(--line2);border-radius:18px;padding:34px;background:#ffffff08}
.paycard .k{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.paycard h3{font-weight:300;font-size:30px;line-height:1.15;margin:12px 0 14px}
.paycard p{font-size:15px;line-height:1.8;color:var(--silver)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.plan{border:1px solid var(--line2);border-radius:18px;padding:40px 34px;background:#ffffff08;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .5s var(--ease)}
.plan:hover{transform:translateY(-6px);border-color:var(--lav)}
.plan.hl{background:linear-gradient(180deg,#2a2563,#15123f);border-color:var(--lav)}
.plan .k{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.plan h3{font-size:30px;font-weight:300;margin:12px 0 10px}
.plan p{font-size:15px;line-height:1.8;color:var(--silver);flex:1}
.plan .price{margin:22px 0;font-family:var(--serif);font-size:26px;color:var(--glow);font-weight:300}
.plan .btn{width:100%;justify-content:center}
.tenpts{counter-reset:p;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.tenpts li{list-style:none;position:relative;padding:20px 0 20px 54px;border-top:1px solid var(--line2);font-size:15px;line-height:1.7;color:var(--silver)}
.tenpts li::before{counter-increment:p;content:counter(p,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--serif);font-size:24px;color:var(--lav)}
.tenpts li b{display:block;color:#fff;font-weight:600;font-size:16px;margin-bottom:4px}
.contactgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.contactgrid .card .btn{margin-top:22px}

/* ---------- RTL (Arabic): scoped, English untouched ---------- */
[dir="rtl"] .phero h1,[dir="rtl"] .phero p.lead,[dir="rtl"] .ftxt,[dir="rtl"] .plan,[dir="rtl"] .paycard,[dir="rtl"] .contactgrid .card{text-align:right}
[dir="rtl"] .tenpts li{padding:20px 54px 20px 0}[dir="rtl"] .tenpts li::before{left:auto;right:0}
[dir="rtl"] .phone,[dir="rtl"] .phone *{direction:ltr}
[dir="rtl"] .phone figcaption{direction:rtl}
[dir="rtl"] .ladder,[dir="rtl"] .chain{direction:rtl}
[dir="rtl"] .brand b{letter-spacing:normal}

@media(max-width:1100px){
  .phero .grid{grid-template-columns:1fr}
  .phones{height:660px;margin-top:20px}
  .five{display:flex;overflow-x:auto;gap:24px;padding-bottom:30px}.five .phone{flex:0 0 270px}
  .feat,.feat.rev,.payband{grid-template-columns:1fr;gap:34px}.feat.rev .ftxt{order:0}
}
@media(max-width:980px){.plans,.contactgrid,.tenpts{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .phero{padding-top:120px}
  .phones{height:600px}.phones .phone{width:250px;--ph:520px}.phones .p-back,.phones .p-mid{display:none}.phones .p-front{top:20px}
  .prow .phone{flex-basis:250px;--ph:500px}
}
@media(prefers-reduced-motion:reduce){.phone.scroll img{animation:none}}

/* first-screen phone: frame matches the picture, no empty area */
.phone.start .scr{height:auto}
.phones .p-front.start{top:150px}
/* ladder: arrow belongs to the step after it, so it never dangles at a line end */
.ladder span.ar,.chain span.ar{display:none}
.ladder span.s+span.s::before,.chain span.s+span.s::before{content:"\2192";margin-right:9px;color:var(--lav)}
[dir="rtl"] .ladder span.s+span.s::before,[dir="rtl"] .chain span.s+span.s::before{content:"\2190";margin-right:0;margin-left:9px}

/* bullet dots align with the first line of text */
.flist li{align-items:flex-start}
.flist li::before{margin-top:.72em;transform:none}

/* tap-to-enlarge */
.phone .scr{cursor:zoom-in}
#lb{position:fixed;inset:0;z-index:9000;background:#030226ee;backdrop-filter:blur(8px);display:none;overflow:auto;padding:36px 16px;-webkit-overflow-scrolling:touch}
#lb.on{display:block}
#lb .box{width:min(470px,100%);margin:0 auto;position:relative}
#lb img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 30px 90px #000a;background:#f4f6f9}
#lb .cap{margin-top:14px;text-align:center;color:var(--mist);font-size:14px}
#lb .x{position:fixed;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:#15123f;color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.tapnote{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8c86ad}
@media(max-width:720px){.phones{height:470px}.phones .p-front{top:0}.phero .grid{gap:30px}}