.prlow-scope{
--bg-void:#060b14;
--bg-panel:#0e1a2c;
--bg-panel-2:#16283f;
--line:#233a56;
--flame:#1e4fd8;
--flame-2:#1e4fd8;
--route:#35d6c4;
--text-1:#f3f6fa;
--text-2:#8ca0b8;
--text-3:#5b7188;
--danger:#ff6b6b;
--radius:16px;
--ff-ui:'Vazirmatn', sans-serif;
--ff-mono:'Space Grotesk', sans-serif;
}
.prlow-scope, .prlow-scope *{
box-sizing:border-box; margin:0; padding:0;
}
.prlow-scope{
height:100%;
}
.prlow-scope{
background:var(--bg-void);
color:var(--text-1);
font-family:var(--ff-ui);
overflow-x:hidden;
min-height:100vh;
position:relative;
}
.prlow-scope::before{
content:'';
position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 40% at 20% 0%, rgba(30,79,216,0.08), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 100%, rgba(53,214,196,0.08), transparent 60%),
linear-gradient(180deg, #060b14 0%, #081222 100%);
z-index:-2;
}
.prlow-scope::after{
content:'';
position:absolute; inset:0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size:64px 64px;
opacity:0.06;
z-index:-1;
pointer-events:none;
}
.prlow-scope[dir="rtl"]{
direction:rtl;
}
.prlow-scope .screen{
min-height:100vh;
width:100%;
display:none;
align-items:center;
justify-content:center;
position:relative;
padding:24px;
}
.prlow-scope .screen.active{
display:flex;
}
.prlow-scope .screen:not(#splash){
padding-bottom:84px;
}
.prlow-scope button{
font-family:inherit; cursor:pointer; border:none;
}
.prlow-scope input, .prlow-scope select, .prlow-scope textarea{
font-family:inherit;
}
/* ============ SPLASH ============ */
.prlow-scope #splash{
overflow:hidden;
}
.prlow-scope .splash-stage{
position:relative;
width:100%;
max-width:900px;
height:520px;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
}
.prlow-scope .radar-bg{
position:absolute;
top:50%; left:50%;
width:640px; height:640px;
margin:-320px 0 0 -320px;
border-radius:50%;
opacity:0;
background:
repeating-conic-gradient(from 0deg,
rgba(53,214,196,0.16) 0deg 4deg,
transparent 4deg 90deg);
-webkit-mask-image:radial-gradient(circle, #000 55%, transparent 78%);
mask-image:radial-gradient(circle, #000 55%, transparent 78%);
animation:radarSpin 7s linear infinite, radarFadeIn 1.4s ease forwards;
pointer-events:none;
}
@keyframes radarSpin{
to{
transform:rotate(360deg);
}
}
@keyframes radarFadeIn{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
.prlow-scope .trail-svg{
position:absolute;
inset:0;
width:100%; height:100%;
overflow:visible;
pointer-events:none;
}
.prlow-scope .trail-path{
fill:none;
stroke-width:2.5;
stroke-linecap:round;
filter:drop-shadow(0 0 4px currentColor);
opacity:0.85;
}
.prlow-scope .vehicle{
position:absolute;
width:64px; height:64px;
opacity:0;
filter:drop-shadow(0 0 6px rgba(0,0,0,0.4));
will-change:offset-distance, transform, opacity;
}
.prlow-scope .vehicle svg{
width:100%; height:100%; display:block;
}
.prlow-scope #veh-plane{
top:6%; left:6%; color:var(--route);
}
.prlow-scope #veh-ship{
bottom:8%; left:8%; color:var(--flame-2);
}
.prlow-scope #veh-truck{
bottom:10%; right:8%; color:var(--route);
}
.prlow-scope #veh-van{
top:8%; right:6%; color:var(--flame-2);
}
.prlow-scope .vehicle.fly-path{
animation-name:flyAlongPath, vehicleWobble;
animation-timing-function:cubic-bezier(.5,0,.15,1), ease-in-out;
animation-fill-mode:forwards, forwards;
animation-duration:var(--dur), var(--dur);
animation-delay:var(--delay), var(--delay);
animation-iteration-count:1, 3;
}
@keyframes flyAlongPath{
0%{
offset-distance:0%; opacity:0;
}
8%{
opacity:1;
}
88%{
opacity:1;
}
100%{
offset-distance:100%; opacity:0;
}
}
@keyframes vehicleWobble{
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.16);
}
}
/* Fallback for browsers without offset-path support */
.prlow-scope .vehicle.fly-in{
animation:flyToCenter 1.1s cubic-bezier(.55,0,.2,1) forwards;
}
@keyframes flyToCenter{
0%{
opacity:0; transform:translate(0,0) scale(1);
}
15%{
opacity:1;
}
100%{
opacity:0; transform:translate(var(--tx),var(--ty)) scale(0.35);
}
}
.prlow-scope .spark{
position:absolute;
top:50%; left:50%;
width:6px; height:6px;
margin:-3px 0 0 -3px;
border-radius:50%;
background:radial-gradient(circle, #fff, var(--flame-2) 55%, transparent 75%);
opacity:0;
pointer-events:none;
}
.prlow-scope .spark.go{
animation:sparkFly var(--sdur) ease-out forwards;
}
@keyframes sparkFly{
0%{
opacity:1; transform:translate(0,0) scale(1);
}
100%{
opacity:0; transform:translate(var(--sx), var(--sy)) scale(0.3);
}
}
.prlow-scope .impact-ring{
position:absolute;
top:50%; left:50%;
width:10px; height:10px;
margin:-5px 0 0 -5px;
border-radius:50%;
border:2px solid var(--flame-2);
opacity:0;
pointer-events:none;
}
.prlow-scope .impact-ring.expand{
animation:ringExpand 0.9s ease-out forwards;
}
@keyframes ringExpand{
0%{
opacity:0.9; width:10px; height:10px; margin:-5px 0 0 -5px;
}
100%{
opacity:0; width:300px; height:300px; margin:-150px 0 0 -150px;
}
}
.prlow-scope .impact-flare{
position:absolute;
width:10px; height:10px;
border-radius:50%;
background:radial-gradient(circle, #fff 0%, var(--flame-2) 30%, var(--flame) 60%, transparent 75%);
opacity:0;
pointer-events:none;
}
.prlow-scope .impact-flare.burst{
animation:flareBurst 0.9s ease-out forwards;
}
@keyframes flareBurst{
0%{
opacity:0; width:10px; height:10px;
}
10%{
opacity:1;
}
60%{
opacity:1; width:340px; height:340px;
}
100%{
opacity:0; width:420px; height:420px;
}
}
.prlow-scope .logo-mark{
position:relative;
width:320px; max-width:70vw; height:auto;
display:flex; align-items:center; justify-content:center;
opacity:0;
transform:scale(0.7);
}
.prlow-scope .prl-logo-img{
width:100%; height:auto;
display:block;
filter:drop-shadow(0 0 22px rgba(30,79,216,0.55));
}
.prlow-scope .logo-mark.reveal{
animation:logoReveal 0.8s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes logoReveal{
0%{
opacity:0; transform:scale(0.5) rotate(-6deg);
}
55%{
opacity:1; transform:scale(1.1) rotate(3deg);
}
80%{
transform:scale(0.97) rotate(-1deg);
}
100%{
opacity:1; transform:scale(1) rotate(0deg);
}
}
.prlow-scope .logo-mark svg, .prlow-scope .logo-mark img{
width:100%; height:auto;
}
.prlow-scope .splash-flicker{
animation:flicker 2.4s ease-in-out infinite;
}
@keyframes flicker{
0%,100%{
filter:drop-shadow(0 0 18px rgba(30,79,216,0.55));
}
50%{
filter:drop-shadow(0 0 30px rgba(30,79,216,0.85));
}
}
.prlow-scope .welcome-text{
position:absolute;
bottom:6%;
left:0; right:0;
text-align:center;
opacity:0;
}
.prlow-scope .welcome-text.show{
animation:fadeUp 1s ease forwards;
}
@keyframes fadeUp{
0%{
opacity:0; transform:translateY(16px);
}
100%{
opacity:1; transform:translateY(0);
}
}
.prlow-scope .welcome-eyebrow{
font-family:var(--ff-mono);
letter-spacing:0.35em;
font-size:11px;
color:var(--route);
text-transform:uppercase;
margin-bottom:10px;
}
.prlow-scope .welcome-cycle{
position:relative;
height:1.35em;
margin-bottom:14px;
font-size:clamp(30px,5.4vw,52px);
font-weight:800;
line-height:1.35;
}
.prlow-scope .welcome-word{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(14px) scale(0.96);
background:linear-gradient(92deg, var(--text-1) 10%, var(--flame-2) 55%, var(--flame) 95%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
filter:drop-shadow(0 0 22px rgba(30,79,216,0.28));
white-space:nowrap;
}
.prlow-scope .welcome-word.in{
animation:prlWordIn 0.42s cubic-bezier(.2,.9,.3,1) forwards;
}
.prlow-scope .welcome-word.out{
animation:prlWordOut 0.34s ease forwards;
}
@keyframes prlWordIn{
0%{ opacity:0; transform:translateY(16px) scale(0.94); }
100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes prlWordOut{
0%{ opacity:1; transform:translateY(0) scale(1); }
100%{ opacity:0; transform:translateY(-14px) scale(1.03); }
}
.prlow-scope .welcome-brand{
font-family:var(--ff-mono);
font-size:clamp(13px,1.6vw,17px);
font-weight:600;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--text-2);
}
.prlow-scope .welcome-dots{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-top:18px;
}
.prlow-scope .welcome-dot{
width:5px;
height:5px;
border-radius:50%;
background:var(--line);
transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.prlow-scope .welcome-dot.on{
background:var(--flame);
transform:scale(1.5);
box-shadow:0 0 10px rgba(30,79,216,0.8);
}
.prlow-scope .skip-btn{
position:absolute;
bottom:24px; right:24px;
background:transparent;
color:var(--text-3);
border:1px solid var(--line);
padding:8px 16px;
border-radius:999px;
font-size:12px;
letter-spacing:0.05em;
transition:.2s;
}
.prlow-scope[dir="rtl"] .skip-btn{
right:auto; left:24px;
}
.prlow-scope .skip-btn:hover{
color:var(--text-1); border-color:var(--route);
}
/* ============ LANGUAGE SWITCHER ============ */
.prlow-scope .lang-switcher{
position:absolute;
top:24px; right:24px;
z-index:60;
opacity:0;
pointer-events:none;
transition:opacity .4s ease;
}
.prlow-scope .lang-switcher.show{
opacity:1; pointer-events:auto;
}
.prlow-scope[dir="rtl"] .lang-switcher{
right:auto; left:24px;
}
@media(max-width:520px){
.prlow-scope .lang-switcher{
top:16px; right:16px;
}
.prlow-scope[dir="rtl"] .lang-switcher{
right:auto; left:16px;
}
.prlow-scope .lang-switcher-btn span{
display:none;
}
.prlow-scope .lang-switcher-btn{
padding:9px 10px;
}
}
.prlow-scope .lang-switcher-btn{
display:flex; align-items:center; gap:8px;
background:rgba(14,26,44,0.85);
border:1px solid var(--line);
color:var(--text-1);
padding:9px 14px;
border-radius:999px;
font-size:13px;
font-weight:600;
backdrop-filter:blur(6px);
transition:.2s;
}
.prlow-scope .lang-switcher-btn:hover{
border-color:var(--route);
}
.prlow-scope .lang-switcher-btn svg{
width:16px; height:16px; color:var(--route);
}
.prlow-scope .lang-switcher-menu{
position:absolute;
top:calc(100% + 8px); right:0;
min-width:150px;
background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
border:1px solid var(--line);
border-radius:12px;
padding:6px;
display:none;
flex-direction:column;
box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.prlow-scope[dir="rtl"] .lang-switcher-menu{
right:auto; left:0;
}
.prlow-scope .lang-switcher-menu.open{
display:flex;
}
.prlow-scope .lang-switcher-menu button{
background:transparent;
color:var(--text-2);
text-align:start;
padding:9px 12px;
border-radius:8px;
font-size:14px;
transition:.15s;
}
.prlow-scope .lang-switcher-menu button:hover{
background:rgba(30,79,216,0.1); color:var(--text-1);
}
.prlow-scope .lang-switcher-menu button.active{
color:var(--flame-2); font-weight:700;
}
/* ============ FOOTER BAR ============ */
.prlow-scope .footer-bar{
position:absolute;
bottom:0; left:0; right:0;
display:flex; align-items:center; justify-content:center;
gap:14px;
padding:14px 20px;
background:linear-gradient(0deg, rgba(6,11,20,0.92), rgba(6,11,20,0.55));
backdrop-filter:blur(6px);
border-top:1px solid var(--line);
z-index:40;
opacity:0;
pointer-events:none;
transition:opacity .4s ease;
}
.prlow-scope .footer-bar.show{
opacity:1; pointer-events:auto;
}
.prlow-scope .footer-link{
display:inline-flex;
align-items:center;
gap:6px;
background:transparent;
color:var(--text-2);
font-size:13px;
font-weight:600;
letter-spacing:0.02em;
transition:.2s;
}
/* Every icon inside a footer link needs an explicit size — an SVG with no
   width/height and no CSS falls back to the browser default of 300x150px,
   which is what made the "Get the app" arrow render huge. */
.prlow-scope .footer-link svg{
width:14px;
height:14px;
flex-shrink:0;
vertical-align:-2px;
}
.prlow-scope .footer-link:hover{
color:var(--flame-2);
}
.prlow-scope .footer-dot{
color:var(--text-3);
}
/* ============ MODALS ============ */
.prlow-scope .modal-overlay{
position:fixed; inset:0;
background:rgba(4,8,15,0.72);
backdrop-filter:blur(4px);
display:none;
align-items:center; justify-content:center;
z-index:100;
padding:24px;
}
.prlow-scope .modal-overlay.open{
display:flex;
}
.prlow-scope .modal-panel{
position:relative;
max-width:460px; width:100%;
background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
border:1px solid var(--line);
border-radius:18px;
padding:32px 28px;
}
.prlow-scope .modal-close{
position:absolute;
top:14px; right:16px;
background:transparent;
color:var(--text-3);
font-size:22px;
line-height:1;
transition:.2s;
}
.prlow-scope[dir="rtl"] .modal-close{
right:auto; left:16px;
}
.prlow-scope .modal-close:hover{
color:var(--text-1);
}
.prlow-scope .modal-title{
font-size:20px; font-weight:700;
margin-bottom:16px;
color:var(--text-1);
}
.prlow-scope .modal-body{
font-size:14px; line-height:1.9;
color:var(--text-2);
}
.prlow-scope .modal-contact-row{
display:flex; justify-content:space-between; gap:12px;
padding:12px 0;
border-bottom:1px solid var(--line);
font-size:14px;
}
.prlow-scope .modal-contact-row:last-child{
border-bottom:none;
}
.prlow-scope .modal-contact-label{
color:var(--text-3);
}
.prlow-scope .modal-contact-value{
color:var(--text-1); font-weight:600; direction:ltr; unicode-bidi:isolate;
}
/* ============ PERSISTENT BRAND MARK ============ */
.prlow-scope .brand-mark{
position:absolute;
top:24px; left:24px;
width:110px;
z-index:50;
opacity:0;
pointer-events:none;
background:transparent;
padding:0;
border:none;
cursor:pointer;
transition:opacity .4s ease, transform .2s ease;
}
.prlow-scope .brand-mark.show{
pointer-events:auto;
}
.prlow-scope .brand-mark:hover{
transform:translateY(-2px);
}
.prlow-scope .brand-mark.show{
opacity:0.92;
}
.prlow-scope .brand-mark img{
width:100%; height:auto; display:block;
}
.prlow-scope[dir="rtl"] .brand-mark{
left:auto; right:24px;
}
@media(max-width:520px){
.prlow-scope .brand-mark{
width:84px; top:16px; left:16px;
}
.prlow-scope[dir="rtl"] .brand-mark{
right:16px;
}
}
/* ============ LANGUAGE SELECT ============ */
.prlow-scope .lang-wrap{
width:100%; max-width:840px;
text-align:center;
}
.prlow-scope .lang-eyebrow{
font-family:var(--ff-mono);
color:var(--route);
letter-spacing:0.3em;
font-size:12px;
text-transform:uppercase;
margin-bottom:14px;
}
.prlow-scope .lang-title{
font-size:clamp(22px,3.4vw,30px);
font-weight:700;
margin-bottom:32px;
color:var(--text-1);
}
.prlow-scope .lang-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
@media(max-width:720px){
.prlow-scope .lang-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}
}
@media(max-width:420px){
.prlow-scope .lang-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}
}
.prlow-scope .lang-card{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
min-height:104px;
padding:18px 12px;
background:linear-gradient(158deg, var(--bg-panel), var(--bg-panel-2));
border:1px solid var(--line);
border-radius:14px;
text-align:center;
transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* thin accent bar that grows across the top on hover */
.prlow-scope .lang-card::after{
content:'';
position:absolute;
top:0; left:50%;
width:0; height:2px;
background:linear-gradient(90deg, var(--flame), var(--flame-2));
transform:translateX(-50%);
transition:width .28s ease;
}
.prlow-scope .lang-card:hover{
transform:translateY(-4px);
border-color:var(--flame);
box-shadow:0 12px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(30,79,216,0.16);
}
.prlow-scope .lang-card:hover::after{
width:100%;
}
.prlow-scope .lang-card:focus-visible{
outline:2px solid var(--flame-2);
outline-offset:2px;
}
.prlow-scope .lang-code{
font-family:var(--ff-mono);
font-size:10px;
font-weight:700;
letter-spacing:0.16em;
color:var(--route);
opacity:0.75;
margin-bottom:4px;
transition:color .22s ease, opacity .22s ease;
}
.prlow-scope .lang-card:hover .lang-code{
color:var(--flame-2);
opacity:1;
}
.prlow-scope .lang-native{
display:block;
font-size:19px;
font-weight:700;
line-height:1.5;
color:var(--text-1);
}
.prlow-scope .lang-en{
font-family:var(--ff-mono);
font-size:10px;
letter-spacing:0.13em;
text-transform:uppercase;
color:var(--text-3);
}
/* ============ WIZARD ============ */
.prlow-scope .wizard-wrap{
width:100%; max-width:640px;
}
.prlow-scope .route-progress{
width:100%;
margin-bottom:36px;
}
.prlow-scope .route-progress svg{
width:100%; height:64px; overflow:visible;
}
.prlow-scope .route-step-label{
font-family:var(--ff-mono);
font-size:10px;
letter-spacing:0.08em;
text-transform:uppercase;
fill:var(--text-3);
}
.prlow-scope .panel{
background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
border:1px solid var(--line);
border-radius:20px;
padding:36px 32px;
position:relative;
}
.prlow-scope .panel-eyebrow{
font-family:var(--ff-mono);
color:var(--route);
letter-spacing:0.25em;
font-size:11px;
text-transform:uppercase;
margin-bottom:8px;
}
.prlow-scope .panel-title{
font-size:24px;
font-weight:700;
margin-bottom:28px;
color:var(--text-1);
}
.prlow-scope .field{
margin-bottom:20px;
}
.prlow-scope .field label{
display:block;
font-size:13px;
color:var(--text-2);
margin-bottom:7px;
font-weight:500;
}
.prlow-scope .field input, .prlow-scope .field select, .prlow-scope .field textarea{
width:100%;
background:#0a1524;
border:1px solid var(--line);
border-radius:10px;
padding:12px 14px;
color:var(--text-1);
font-size:14px;
transition:.2s;
}
.prlow-scope .field input:focus, .prlow-scope .field select:focus, .prlow-scope .field textarea:focus{
outline:none;
border-color:var(--flame);
box-shadow:0 0 0 3px rgba(30,79,216,0.15);
}
.prlow-scope .field textarea{
resize:vertical; min-height:88px;
}
.prlow-scope .row-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.prlow-scope .row-phone{
display:grid;
grid-template-columns:130px 1fr;
gap:10px;
}
@media(max-width:520px){
.prlow-scope .row-2{
grid-template-columns:1fr;
}
.prlow-scope .row-phone{
grid-template-columns:1fr;
}
}
.prlow-scope .choice-group{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:8px;
}
@media(max-width:520px){
.prlow-scope .choice-group{
grid-template-columns:1fr;
}
}
.prlow-scope .choice-card{
background:#0a1524;
border:1.5px solid var(--line);
border-radius:14px;
padding:20px 16px;
text-align:center;
transition:.2s;
}
.prlow-scope .choice-card:hover{
border-color:var(--route);
}
.prlow-scope .choice-card.selected{
border-color:var(--flame);
background:linear-gradient(160deg, rgba(30,79,216,0.12), rgba(30,79,216,0.03));
}
.prlow-scope .choice-icon{
width:34px; height:34px;
margin:0 auto 10px;
color:var(--flame-2);
}
.prlow-scope .choice-icon svg{
width:100%; height:100%;
}
.prlow-scope .choice-label{
font-weight:700; font-size:15px; color:var(--text-1); margin-bottom:4px;
}
.prlow-scope .choice-sub{
font-size:12px; color:var(--text-3);
}
.prlow-scope .btn-row{
display:flex;
justify-content:space-between;
gap:12px;
margin-top:28px;
}
.prlow-scope .btn{
padding:13px 26px;
border-radius:10px;
font-weight:600;
font-size:14px;
transition:.2s;
}
.prlow-scope .btn-primary{
background:var(--flame);
color:#fff;
border:1px solid var(--flame);
transition:background .15s ease, color .15s ease;
}
.prlow-scope .btn-primary:hover{
background:#fff; color:var(--flame);
}
.prlow-scope .btn-ghost{
background:transparent;
color:var(--text-2);
border:1px solid var(--line);
}
.prlow-scope .btn-ghost:hover{
color:var(--text-1); border-color:var(--route);
}
.prlow-scope .error-text{
color:var(--danger);
font-size:12px;
margin-top:6px;
display:none;
}
.prlow-scope .field.has-error input, .prlow-scope .field.has-error select{
border-color:var(--danger);
}
.prlow-scope .field.has-error .error-text{
display:block;
}
/* ============ THANK YOU ============ */
.prlow-scope .thanks-wrap{
max-width:560px;
text-align:center;
}
.prlow-scope .thanks-icon{
width:88px; height:88px;
margin:0 auto 24px;
color:var(--flame-2);
animation:flicker 2.4s ease-in-out infinite;
}
.prlow-scope .thanks-icon svg{
width:100%; height:100%;
}
.prlow-scope .thanks-title{
font-size:28px; font-weight:700; margin-bottom:14px;
}
.prlow-scope .thanks-sub{
color:var(--text-2);
font-size:15px;
line-height:1.8;
margin-bottom:28px;
}
.prlow-scope .thanks-ref{
display:inline-block;
font-family:var(--ff-mono);
background:#0a1524;
border:1px solid var(--line);
border-radius:10px;
padding:10px 20px;
color:var(--route);
letter-spacing:0.1em;
margin-bottom:30px;
}
/* ============ DIMENSIONS ============ */
.prlow-scope .row-dims{
display:grid;
grid-template-columns:1fr 1fr 1fr 84px;
gap:8px;
}
@media(max-width:520px){
.prlow-scope .row-dims{
grid-template-columns:1fr 1fr;
}
}
.prlow-scope .field-hint{
font-size:12px;
line-height:1.7;
color:var(--text-3);
margin-top:7px;
}
.prlow-scope .field-hint-sm{
font-size:10.5px;
line-height:1.5;
margin-top:4px;
opacity:0.85;
}

/* ============ HANDLING CHECKBOXES ============ */
.prlow-scope .chk-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:12px;
}
@media(max-width:560px){
.prlow-scope .chk-grid{
grid-template-columns:1fr;
}
}
.prlow-scope .chk{
display:flex;
align-items:center;
gap:9px;
padding:10px 12px;
background:#0a1524;
border:1px solid var(--line);
border-radius:9px;
font-size:13px;
color:var(--text-2);
cursor:pointer;
transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.prlow-scope .chk:hover{
border-color:var(--route);
color:var(--text-1);
}
.prlow-scope .chk input{
width:15px;
height:15px;
accent-color:var(--flame);
flex-shrink:0;
cursor:pointer;
}
.prlow-scope .chk:has(input:checked){
border-color:var(--flame);
background:linear-gradient(160deg, rgba(30,79,216,0.12), rgba(30,79,216,0.03));
color:var(--text-1);
}

/* ============ PHOTO UPLOAD ============ */
.prlow-scope .upload-box{
padding:16px;
background:#0a1524;
border:1px dashed var(--line);
border-radius:11px;
text-align:center;
}
.prlow-scope .btn-sm{
padding:9px 18px;
font-size:13px;
}
.prlow-scope .upload-preview{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:12px;
}
.prlow-scope .upload-preview:empty{
margin-top:0;
}
.prlow-scope .upload-thumb{
position:relative;
width:76px;
height:76px;
border-radius:9px;
overflow:hidden;
border:1px solid var(--line);
}
.prlow-scope .upload-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.prlow-scope .upload-remove{
position:absolute;
top:2px; right:2px;
width:20px; height:20px;
border-radius:50%;
background:rgba(6,11,20,0.85);
color:var(--text-1);
font-size:14px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
}
.prlow-scope .upload-remove:hover{
background:var(--danger);
}
.prlow-scope .upload-status{
font-family:var(--ff-mono);
font-size:16px;
color:var(--text-3);
}
.prlow-scope .upload-status.ok{
color:var(--route);
}

/* ============ ABOUT MODAL ============ */
.prlow-scope .modal-scroll{
max-height:min(58vh, 460px);
overflow-y:auto;
padding-inline-end:8px;
}
.prlow-scope .modal-scroll::-webkit-scrollbar{
width:6px;
}
.prlow-scope .modal-scroll::-webkit-scrollbar-thumb{
background:var(--line);
border-radius:99px;
}
.prlow-scope .about-h{
font-size:14px;
font-weight:700;
color:var(--flame-2);
margin:18px 0 8px;
line-height:1.7;
}
.prlow-scope .about-h:first-child{
margin-top:0;
}

/* ============ ORDER TRACKING ============ */
.prlow-scope .track-result{
margin-top:22px;
padding-top:20px;
border-top:1px solid var(--line);
}
.prlow-scope .track-ref{
font-family:var(--ff-mono);
font-size:19px;
font-weight:700;
color:var(--flame-2);
letter-spacing:0.06em;
margin-bottom:16px;
direction:ltr;
}
.prlow-scope .track-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:9px 0;
font-size:14px;
border-bottom:1px solid var(--line);
}
.prlow-scope .track-label{
color:var(--text-3);
}
.prlow-scope .track-value{
color:var(--text-1);
font-weight:600;
}
.prlow-scope .track-status{
color:var(--route);
}
.prlow-scope .track-steps{
margin-top:24px;
display:flex;
flex-direction:column;
gap:0;
}
.prlow-scope .track-step{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
position:relative;
font-size:13px;
color:var(--text-3);
}
/* the connecting rail between stops */
.prlow-scope .track-step:not(:last-child)::before{
content:'';
position:absolute;
inset-inline-start:5px;
top:26px;
width:2px;
height:calc(100% - 12px);
background:var(--line);
}
.prlow-scope .track-step.done:not(:last-child)::before{
background:var(--flame);
}
.prlow-scope .track-dot{
width:12px;
height:12px;
border-radius:50%;
background:var(--bg-panel);
border:2px solid var(--line);
flex-shrink:0;
z-index:1;
}
.prlow-scope .track-step.done .track-dot{
background:var(--flame);
border-color:var(--flame);
}
.prlow-scope .track-step.done{
color:var(--text-2);
}
.prlow-scope .track-step.current .track-dot{
background:var(--flame-2);
border-color:var(--flame-2);
box-shadow:0 0 0 4px rgba(30,79,216,0.2);
}
.prlow-scope .track-step.current{
color:var(--text-1);
font-weight:700;
}

/* ============ CAPTCHA ============ */
.prlow-scope .captcha-wrap{
display:flex;
justify-content:center;
margin-top:20px;
}
.prlow-scope .captcha-wrap:empty{
margin-top:0;
}

/* ============ HOME / INSTALL BUTTONS ============ */
.prlow-scope .footer-home,
.prlow-scope .footer-install{
display:inline-flex;
align-items:center;
gap:6px;
}
.prlow-scope .footer-home svg,
.prlow-scope .footer-install svg{
width:14px;
height:14px;
stroke-linecap:round;
stroke-linejoin:round;
}
.prlow-scope .footer-install{
margin-inline-start:6px;
padding:5px 12px;
border:1px solid var(--route);
border-radius:999px;
color:var(--route);
}
.prlow-scope .footer-install:hover{
background:rgba(53,214,196,0.12);
color:var(--route);
}
.prlow-scope .footer-install[hidden]{
display:none;
}

/* ============ APP BADGES ============ */
.prlow-scope .badge-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:6px;
max-width:360px;
}
@media(max-width:480px){
.prlow-scope .badge-row{
grid-template-columns:1fr;
}
}
.prlow-scope .app-badge{
display:flex;
align-items:center;
gap:9px;
padding:10px 12px;
background:linear-gradient(158deg, #0a1524, #101f33);
border:1px solid var(--line);
border-radius:11px;
text-decoration:none;
cursor:pointer;
position:relative;
overflow:hidden;
transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.prlow-scope .app-badge::after{
content:'';
position:absolute;
top:0; left:50%;
width:0; height:2px;
background:linear-gradient(90deg, var(--flame), var(--flame-2));
transform:translateX(-50%);
transition:width .28s ease;
}
.prlow-scope .app-badge:hover{
transform:translateY(-3px);
border-color:var(--flame);
box-shadow:0 12px 26px rgba(0,0,0,0.4);
}
.prlow-scope .app-badge:hover::after{
width:100%;
}
.prlow-scope .app-badge-icon{
width:22px;
height:22px;
flex-shrink:0;
color:var(--route);
transition:color .2s ease;
}
.prlow-scope .app-badge:hover .app-badge-icon{
color:var(--flame-2);
}
.prlow-scope .app-badge-icon svg{
width:100%;
height:100%;
display:block;
}
.prlow-scope .app-badge-text{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}
.prlow-scope .app-badge-top{
font-family:var(--ff-mono);
font-size:8px;
letter-spacing:0.09em;
text-transform:uppercase;
color:var(--text-3);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.prlow-scope .app-badge-name{
font-size:12.5px;
font-weight:700;
color:var(--text-1);
line-height:1.4;
}

/* ============ iOS STEPS ============ */
.prlow-scope .ios-steps{
margin:14px 0 4px;
padding-inline-start:20px;
display:flex;
flex-direction:column;
gap:10px;
}
.prlow-scope .ios-steps li{
font-size:14px;
line-height:1.8;
color:var(--text-2);
}
.prlow-scope .ios-steps li::marker{
color:var(--flame-2);
font-weight:700;
}

/* ============ AUTO INSTALL BANNER ============ */
.prlow-scope .install-banner{
position:fixed;
left:12px;
right:12px;
bottom:66px;
z-index:70;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:linear-gradient(158deg, #0e1a2c, #16283f);
border:1px solid var(--line);
border-radius:13px;
box-shadow:0 18px 44px rgba(0,0,0,0.55);
transform:translateY(140%);
opacity:0;
transition:transform .38s cubic-bezier(.2,.9,.3,1), opacity .3s ease;
}
.prlow-scope .install-banner.up{
transform:translateY(0);
opacity:1;
}
.prlow-scope .install-banner[hidden]{
display:none;
}
@media(min-width:640px){
.prlow-scope .install-banner{
left:auto;
right:24px;
max-width:400px;
}
}
.prlow-scope .install-banner-icon{
width:32px;
height:32px;
border-radius:8px;
overflow:hidden;
flex-shrink:0;
border:1px solid var(--line);
}
.prlow-scope .install-banner-icon img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.prlow-scope .install-banner-text{
flex:1;
min-width:0;
}
.prlow-scope .install-banner-title{
font-size:12.5px;
font-weight:700;
color:var(--text-1);
line-height:1.4;
}
.prlow-scope .install-banner-sub{
font-size:11px;
color:var(--text-3);
line-height:1.6;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.prlow-scope .install-banner-actions{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}
.prlow-scope .install-banner-later{
background:transparent;
color:var(--text-3);
font-size:12px;
padding:7px 4px;
white-space:nowrap;
}
.prlow-scope .install-banner-later:hover{
color:var(--text-1);
}
.prlow-scope .install-banner-go{
background:var(--flame);
color:#fff;
font-size:11.5px;
font-weight:700;
padding:7px 13px;
border-radius:999px;
white-space:nowrap;
border:1px solid var(--flame);
transition:background .15s ease, color .15s ease;
}
.prlow-scope .install-banner-go:hover{
background:#fff; color:var(--flame);
}

/* ===================================================================
   MOBILE HARDENING PASS
   Real, verified issues fixed here (not guesswork):
   1. Inputs were 14px, which makes iOS Safari auto-zoom the whole page
      on focus — every tap felt like the page "jumped". WCAG/iOS baseline
      is 16px.
   2. .footer-bar had no flex-wrap, so its 5 links overflowed horizontally
      on narrow phones instead of wrapping to a second line.
   3. .panel and .modal-panel used a fixed desktop padding (36px/32px) that
      ate too much of a 320–375px-wide screen, leaving cramped content.
   4. .badge-row had a hard max-width that could exceed a very narrow
      viewport once modal padding was subtracted.
=================================================================== */
.prlow-scope{
overflow-x:hidden;
}

@media(max-width:600px){

  /* 1. Prevent iOS auto-zoom on focus */
  .prlow-scope .field input,
  .prlow-scope .field select,
  .prlow-scope .field textarea,
  .prlow-scope .row-dims select,
  .prlow-scope .row-phone select{
    font-size:16px;
  }

  /* 2. Footer bar wraps instead of overflowing */
  .prlow-scope .footer-bar{
    flex-wrap:wrap;
    gap:8px 14px;
    padding:10px 14px;
    row-gap:4px;
  }
  .prlow-scope .footer-link{
    font-size:12px;
  }
  .prlow-scope .footer-dot{
    display:none;
  }

  /* 3. Tighter panel padding so content isn't cramped */
  .prlow-scope .panel{
    padding:26px 18px;
    border-radius:16px;
  }
  .prlow-scope .panel-title{
    font-size:20px;
    margin-bottom:22px;
  }
  .prlow-scope .modal-panel{
    padding:24px 18px;
    border-radius:14px;
  }
  .prlow-scope .lang-wrap{
    padding:0 4px;
  }

  /* Buttons get more tappable and stack cleanly when there isn't room
     for two side by side. */
  .prlow-scope .btn-row{
    flex-wrap:wrap;
  }
  .prlow-scope .btn-row .btn{
    flex:1 1 auto;
    min-width:120px;
  }

  /* 4. Let the app badges size to the actual viewport instead of a
     fixed max-width that could overflow a very narrow phone. */
  .prlow-scope .badge-row{
    max-width:none;
  }

  .prlow-scope .choice-card{
    padding:16px 12px;
  }
  .prlow-scope .upload-box{
    padding:12px;
  }

  /* The route-progress SVG has a fixed 600×64 viewBox that was scaling down
     awkwardly on very narrow screens — give it more breathing room instead
     of letting the step labels collide. */
  .prlow-scope .route-progress{
    margin-bottom:26px;
  }
}

@media(max-width:360px){
  .prlow-scope .lang-title{
    font-size:19px;
  }
  .prlow-scope .welcome-cycle{
    font-size:clamp(24px,9vw,34px);
  }
}

/* ============ COMPACT CHOICE VARIANTS (delivery / urgency / shipping) ============ */
.prlow-scope .choice-group-sm{
grid-template-columns:1fr 1fr;
gap:10px;
}
.prlow-scope .choice-group-3{
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}
@media(max-width:480px){
.prlow-scope .choice-group-3{
grid-template-columns:1fr;
}
}
.prlow-scope .choice-card-sm{
padding:14px 12px;
}
.prlow-scope .choice-icon-sm{
width:24px;
height:24px;
margin:0 auto 8px;
}
.prlow-scope .choice-card-sm .choice-label{
font-size:13.5px;
}
.prlow-scope .choice-card-sm .choice-sub{
font-size:11px;
}