/* حادي · خط واحد يحمل الصفحة. الأساس حبر، والبرتقالي للشحنة وحدها */
:root{
  --ink:#0B0B0B; --white:#fff; --sig:#FF6A1A; --dim:#8F8F8F; --soft:#C9C9C9;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(24px,5vw,76px);
  --ar-h:'Alexandria','Readex Pro',sans-serif; --ar:'Readex Pro',sans-serif; --lat:'Manrope',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{position:relative;background:var(--ink);color:var(--white);font:400 clamp(16px,1.25vw,19px)/1.75 var(--ar)}
ol{list-style:none;padding:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

#line{position:absolute;inset-block-start:0;inset-inline-start:0;display:none;pointer-events:none;z-index:2;overflow:hidden}
.js #line{display:block}
#ghost{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:1;transition:stroke-opacity .3s var(--ease)}
#drawn path{fill:#fff;stroke:#fff;stroke-width:.5}
#nodes circle{fill:var(--ink);stroke:#fff;stroke-width:1.5;stroke-opacity:.55}
#nodes circle.on{fill:var(--sig);stroke:var(--sig);stroke-opacity:1}
#mark{fill:var(--sig)}

/* السطور الثابتة */
.credit,.where{position:fixed;z-index:5;inset-block-start:calc(10px + env(safe-area-inset-top));background:var(--ink);font-size:12px;line-height:1.5;padding:5px 9px}
.credit{inset-inline-end:10px;color:var(--soft);text-decoration:none}
.where{inset-inline-start:10px;display:none;align-items:center;gap:7px;color:var(--white)}
.js .where{display:flex}
.where i{width:7px;height:7px;background:var(--sig);flex:none}
@media (hover:hover) and (pointer:fine){.credit:hover{color:#fff}}

/* الهيرو */
.hero{min-height:100vh;min-height:100svh;padding:clamp(64px,8vh,84px) var(--pad) 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(24px,4vw,64px);align-items:end}
.hero-h1{font:700 clamp(96px,19vw,300px)/1.3 var(--ar-h);grid-column:1}
.js .hero-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-word{display:none;grid-column:1;width:100%;max-width:calc(68vh * 1025 / 567);aspect-ratio:1025/567;justify-self:start;align-self:center}
.js .hero-word{display:block}
.hero-side{grid-column:2;grid-row:1}
.hero-lead{font:700 clamp(26px,2.5vw,38px)/1.35 var(--ar-h)}
.hero-sub{margin-block-start:16px;color:var(--soft)}
.hero-hint{margin-block-start:22px;color:var(--sig);font-size:.92em}

/* المحطات */
.st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(44%,600px));column-gap:clamp(72px,9vw,150px);align-items:start;padding:clamp(120px,17vh,190px) var(--pad)}
.st-n{color:var(--dim);font-size:.92em;margin-block-end:2px}
.st-n bdi{font-family:var(--lat)}
.st h2,.end h2{font:700 clamp(84px,10.4vw,164px)/1.3 var(--ar-h);color:var(--dim);padding-block-end:.17em;transition:color .5s var(--ease)}
.st.on h2,.end.on h2{color:#fff}
.st-text>p:not(.st-n){max-width:30em}
.st-lead{font:600 clamp(23px,2.2vw,32px)/1.4 var(--ar-h);margin-block:clamp(26px,3vw,38px) 12px}
.st-text p:last-child{color:var(--soft)}
.st-fig{padding-block-start:clamp(48px,7vw,120px)}
html:not(.js) .st h2,html:not(.js) .end h2{color:#fff}

/* نوع الشحنة: الخط نفسه هو إطار هذه الخانة */
.pick{padding:clamp(22px,2.6vw,38px)}
html:not(.js) .pick{border:1px solid #fff}
.pick-q{font:700 clamp(38px,4.2vw,62px)/1.3 var(--ar-h)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-block:18px 20px}
.chips button{flex:1 1 auto;min-height:50px;padding:6px 18px;background:none;border:1px solid #fff;cursor:pointer;font-weight:500;transition:background-color .25s var(--ease),color .25s var(--ease)}
.chips button[aria-pressed=true]{background:#fff;color:var(--ink)}
html:not(.js) .chips{display:none}
.v{display:block}
.js .v{display:grid}
.js .v>[data-c]{grid-area:1/1;visibility:hidden}
.js [data-cargo=parcel] .v>[data-c=parcel],.js [data-cargo=cold] .v>[data-c=cold],.js [data-cargo=doc] .v>[data-c=doc]{visibility:visible}
.pick-note{color:var(--soft);font-size:.95em}
html:not(.js) .pick-note span{display:block;margin-block-end:8px}
html:not(.js) .row .v [data-c]:not([data-c=parcel]){display:none}

/* الفرز: كل مسار سطر، والخط يمر تحته */
.lane{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-block:clamp(20px,2.4vw,32px) 14px;padding-inline:clamp(26px,3vw,40px)}
.lane+.lane{margin-block-start:clamp(8px,1vw,14px)}
.lane b{font:700 clamp(32px,3.8vw,54px)/1.3 var(--ar-h);color:var(--dim);transition:color .3s var(--ease)}
.lane span{color:var(--dim);font-size:.95em;transition:color .3s var(--ease)}
[data-cargo=parcel] .lane[data-lane=parcel] b,[data-cargo=cold] .lane[data-lane=cold] b,[data-cargo=doc] .lane[data-lane=doc] b{color:#fff}
[data-cargo=parcel] .lane[data-lane=parcel] span,[data-cargo=cold] .lane[data-lane=cold] span,[data-cargo=doc] .lane[data-lane=doc] span{color:var(--soft)}

/* الطريق */
.st-wide{grid-template-columns:minmax(0,1fr)}
.cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(30px,4.6vw,64px);margin-block-start:clamp(56px,7vw,110px);padding-inline:clamp(16px,2vw,32px)}
.cities li{text-align:center;font:700 clamp(30px,4.4vw,66px)/1.3 var(--ar-h);color:var(--dim);padding-block-end:22px;transition:color .35s var(--ease)}
.cities li.on{color:#fff}
html:not(.js) .cities li{color:#fff}
.cities-note{margin-block-start:34px;color:var(--dim);font-size:.9em;padding-inline:clamp(16px,2vw,32px)}

/* التتبع */
.track{display:block;padding:clamp(20px,2.4vw,34px)}
html:not(.js) .track{border:1px solid #fff}
.track-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;align-items:baseline}
.track label{font-weight:500}
.sample-tag{color:var(--sig);font-size:.88em}
#num{display:block;width:100%;margin-block:8px 16px;padding:6px 0;background:none;border:0;border-block-end:1px solid #666;border-radius:0;font:600 clamp(30px,3.6vw,50px)/1.3 var(--lat);text-align:start;outline-offset:6px}
#num::placeholder{color:#6f6f6f}
.track-btns{display:flex;flex-wrap:wrap;gap:10px}
.track-btns button{flex:1 1 150px;min-height:50px;padding:6px 18px;cursor:pointer;font-weight:500;transition:background-color .25s var(--ease),color .25s var(--ease)}
.btn-solid{background:#fff;color:var(--ink);border:1px solid #fff}
.btn-ghost{background:none;border:1px solid #fff}
.track-msg{min-height:3.5em;margin-block-start:10px;color:var(--soft);font-size:.92em}
html:not(.js) .track-btns,html:not(.js) .track-msg{display:none}
html:not(.js) .log-head{position:static;margin-block-end:12px}

.log{padding-block-start:clamp(26px,3vw,40px);padding-inline-start:30px}
.log{position:relative}
.log-head{position:absolute;inset-block-start:clamp(16px,2vw,28px);inset-inline-end:calc(100% + clamp(56px,6vw,96px));display:flex;flex-direction:column;white-space:nowrap}
.log-head span{color:var(--dim);font-size:.9em}
.log-head strong{font:700 clamp(44px,5.6vw,92px)/1.3 var(--ar-h);color:var(--dim);transition:color .4s var(--ease)}
.log.done .log-head strong,html:not(.js) .log-head strong{color:#fff}
.row{display:grid;grid-template-columns:minmax(74px,auto) minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding-block:12px}
.row b{font-weight:600;color:var(--dim);transition:color .25s var(--ease)}
.row time{font:500 .92em/1.75 var(--lat);color:var(--dim)}
.js .row .v,.js .row time{opacity:0;transition:opacity .35s var(--ease)}
.row.on b{color:#fff}
.js .row.on .v,.js .row.on time{opacity:1}
.row .v{color:var(--soft);font-size:.95em}
.row-last span{color:var(--dim);font-size:.95em}
html:not(.js) .row b{color:#fff}

/* التوقيع */
.sign{margin:0}
.sign-pad{height:clamp(170px,17vw,250px)}
.sign figcaption{margin-block-start:16px;color:var(--dim);font-size:.92em}

/* الباب */
.end{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,auto);gap:clamp(40px,8vw,130px);align-items:end;padding:clamp(100px,16vh,170px) var(--pad) 26vh}
.end h2{color:var(--dim)}
.end-text{align-self:center}
.end-text p:last-child{color:var(--soft)}
.end-text>p{max-width:30em}
.door{position:relative;width:clamp(280px,27vw,400px);height:clamp(420px,66vh,620px);perspective:1400px;justify-self:center}
.door-in{position:absolute;inset:0;background:#fff;color:var(--ink);border-radius:999px 999px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;padding-block:32px 52px;padding-inline:37% 14px;text-align:center}
.door-label{color:#2b2b2b;font:600 clamp(18px,1.5vw,22px)/1.4 var(--ar-h)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:10px 26px;background:var(--ink);color:#fff;text-decoration:none;font:700 clamp(18px,1.5vw,21px)/1.4 var(--ar-h);transition:background-color .25s var(--ease)}
.door-leaf{position:absolute;inset:0;display:none;background:var(--ink);border-radius:999px 999px 0 0;transform-origin:100% 50%;transition:transform .9s var(--ease);pointer-events:none}
.js .door-leaf{display:block}
.door.open .door-leaf{transform:rotateY(-74deg)}
.end-foot{position:absolute;inset-block-end:clamp(28px,7vh,64px);inset-inline-start:var(--pad);color:var(--dim)}
@media (hover:hover) and (pointer:fine){
  .chips button:hover{background:rgba(255,255,255,.14)}
  .chips button[aria-pressed=true]:hover{background:#fff}
  .btn-ghost:hover{background:rgba(255,255,255,.14)}
  .btn-solid:hover{background:var(--sig);border-color:var(--sig)}
  .cta:hover{background:#2b2b2b}
}

/* عمود واحد: الخط يتكيف مع العرض من الحساب في main.js، والنص يترك له ممراً على الطرفين */
@media (max-width:899px){
  :root{--pad:26px}
  .hero{grid-template-columns:minmax(0,1fr);align-content:start;gap:30px;padding-block-start:64px}
  .hero-word{max-width:none;aspect-ratio:1025/860;align-self:start}
  .hero-side{grid-column:1;grid-row:2}
  .hero-lead{font-size:clamp(30px,8.6vw,48px)}
  .st{grid-template-columns:minmax(0,1fr);padding-block:clamp(88px,13vh,130px)}
  .st h2,.end h2{font-size:clamp(70px,20.5vw,132px)}
  .st-fig{padding-block-start:46px}
  .cities{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px;padding-inline:4px;margin-block-start:48px}
  .cities li{font-size:clamp(30px,8.6vw,56px);padding-block-end:18px}
  .cities-note{padding-inline:4px}
  .log{padding-inline:0 22px;padding-block-start:18px}
  .log-head{position:static;margin-block-end:12px;white-space:normal}
  .log-head strong{font-size:clamp(38px,11vw,70px)}
  .row{grid-template-columns:minmax(0,1fr) auto;padding-block:10px}
  .row .v,.row-last span:last-child{grid-column:1/-1;grid-row:2}
  .row time{grid-column:2;grid-row:1}
  .end{grid-template-columns:minmax(0,1fr);gap:48px;align-items:start;padding-block-end:calc(22vh + env(safe-area-inset-bottom))}
  .door{width:min(100%,300px);height:clamp(400px,62vh,500px)}
  .door-in{padding-inline:26% 8px}
  .door.open .door-leaf{transform:rotateY(-80deg)}
}
@media (min-width:600px) and (max-width:899px){
  .cities{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-word{aspect-ratio:1025/640}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
  .door-leaf,.door.open .door-leaf{transform:rotateY(-78deg)}
  .where{display:none!important}
}