/* ===========================================================
   BMLS — ملف الموقع الكامل. عدّل بحرية.
   الألوان:  كحلي #0d3b66 · ذهبي #c99a2e · رملي #e6e4de
             أبيض دافئ #f7f6f3 · فحمي #1c1d20
   =========================================================== */

:root{
  --navy:#0d3b66; --navy-d:#0a3159; --navy-dd:#071f3a; --navy-l:#8fb3d4;
  --gold:#c99a2e; --sand:#e6e4de; --paper:#f7f6f3; --ink:#1c1d20;
  --line:#dedbd3; --muted:#4a4f55; --grey:#8a857d;
  --pad-x:64px;                      /* هامش جانبي للأقسام */
}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{
  font-family:'Tajawal','Archivo',sans-serif;
  background:var(--paper); color:var(--ink);
}
body[dir="ltr"]{font-family:'Archivo',sans-serif}
body[data-lang="zh"]{font-family:'Noto Sans SC','Archivo',sans-serif}
body[data-lang="ko"]{font-family:'Noto Sans KR','Archivo',sans-serif}
/* CJK: عناوين أقل حدة في التتبع وسطور أوسع قليلاً */
body[data-lang="zh"] .hero h1,body[data-lang="ko"] .hero h1{line-height:1.35}
body[data-lang="zh"] .h2,body[data-lang="ko"] .h2{letter-spacing:0}
body[data-lang="zh"] p,body[data-lang="ko"] p{line-height:1.9}
img{display:block;max-width:100%}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
.ltr{direction:ltr}

/* ---------- شعار الشركة (مربع مقسوم قطرياً) ---------- */
.mark{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;direction:ltr;flex:none}
.mark i{display:block}

/* ---------- الشريط العلوي ---------- */
.topbar{
  background:var(--navy);color:var(--navy-l);
  padding:10px var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;font-size:13px;
}
.topbar a{color:var(--gold)}
.topbar a:hover{color:var(--paper)}
.topbar .left{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.topbar .right{display:flex;gap:20px;align-items:center}
.topbar .sep{width:1px;height:14px;background:#245a8d}
.langs{display:flex;gap:0;flex-wrap:wrap}
.langbtn{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--navy-l);cursor:pointer;border:1px solid #4a7ba8;padding:4px 11px;background:none;
  margin-inline-start:-1px;white-space:nowrap
}
.langbtn:hover{background:#154d80;color:var(--paper)}
.langbtn.on{background:var(--gold);color:var(--ink);border-color:var(--gold);position:relative;z-index:1}

/* ---------- شريط التنقل ---------- */
.nav{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:20px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:16px;cursor:pointer;direction:ltr}
.brand .mark{width:40px;height:40px;background:var(--navy)}
.brand .mark i:nth-child(1),.brand .mark i:nth-child(4){background:var(--paper)}
.brand .word{font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;letter-spacing:.06em;color:var(--navy);line-height:1}
.brand .sub{font-size:11px;font-weight:500;color:#6b665e}
.navlinks{display:flex;align-items:center;gap:8px}
.navlinks .item{
  padding:10px 16px;font-size:16px;font-weight:500;color:#3a3f45;
  cursor:pointer;border-bottom:2px solid transparent
}
.navlinks .item:hover,.navlinks .item.on{color:var(--navy);border-bottom-color:var(--gold)}
.btn-quote{
  margin-inline-start:16px;background:var(--navy);color:var(--paper);
  padding:13px 26px;font-size:16px;font-weight:700;cursor:pointer;border:0;font-family:inherit
}
.btn-quote:hover{background:var(--gold);color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;padding:12px;cursor:pointer;background:var(--navy)}
.burger span{width:22px;height:2px;background:var(--paper)}
.mobmenu{display:none;flex-direction:column;background:var(--navy);position:sticky;top:70px;z-index:19}
.mobmenu .item{padding:18px 24px;font-size:17px;font-weight:600;color:var(--paper);border-bottom:1px solid #245a8d;cursor:pointer}
.mobmenu .m-cta{padding:18px 24px;font-size:17px;font-weight:700;background:var(--gold);color:var(--ink);cursor:pointer}

/* ---------- الهيرو ---------- */
.hero{background:var(--navy);display:grid;grid-template-columns:1.05fr 1fr}
.hero .copy{padding:96px var(--pad-x);display:flex;flex-direction:column;gap:34px;justify-content:center}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--gold);direction:ltr}
.hero h1{font-size:58px;font-weight:800;line-height:1.2;color:var(--paper);margin:0;text-wrap:pretty}
.hero p{font-size:20px;line-height:1.85;color:#a9c6de;max-width:530px;margin:0}
.hero .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-gold{background:var(--gold);color:var(--ink);padding:17px 34px;font-size:17px;font-weight:700;cursor:pointer;border:0;font-family:inherit}
.btn-gold:hover{background:var(--paper)}
.btn-ghost{border:1px solid #4a7ba8;color:var(--paper);padding:16px 32px;font-size:17px;font-weight:500;cursor:pointer;background:none;font-family:inherit}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.badge-strip{display:none;background:var(--gold);color:var(--ink);padding:14px 20px;font-size:14px;font-weight:700;line-height:1.5}

/* ---------- شريط الأرقام ---------- */
.stats{background:var(--ink);display:grid;grid-template-columns:repeat(3,1fr)}
.stats .cell{padding:44px 40px;border-inline-start:1px solid #313236;display:flex;flex-direction:column;gap:10px}
.stats .num{font-family:'Archivo',sans-serif;font-weight:700;font-size:46px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;direction:ltr}
.stats .lbl{font-size:16px;font-weight:500;color:#b3afa7}

/* ---------- أقسام عامة ---------- */
.section{padding:96px var(--pad-x);display:flex;flex-direction:column;gap:48px}
.section.sand{background:var(--sand)}
.h2{font-size:40px;font-weight:800;margin:0}
.h3{font-size:32px;font-weight:800;margin:0}
.pagehead{background:var(--navy);padding:80px var(--pad-x);display:flex;flex-direction:column;gap:20px}
.pagehead h1{font-size:52px;font-weight:800;color:var(--paper);margin:0}
.pagehead p{font-size:20px;line-height:1.85;color:#a9c6de;max-width:720px;margin:0}
.rowhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.link-more{font-size:16px;font-weight:500;color:var(--navy);cursor:pointer;border-bottom:1px solid var(--gold);padding-bottom:4px}
.link-more:hover{color:var(--gold)}

/* ---------- بطاقات الخدمات ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.svc-card{background:var(--sand);padding:40px 34px;display:flex;flex-direction:column;gap:18px;min-height:290px;cursor:pointer}
.svc-card:hover{background:var(--navy);color:var(--paper)}
.svc-card:hover .svc-body,.svc-card:hover .svc-en,.svc-card:hover .svc-num{color:#a9c6de}
.svc-card:hover .svc-icon{color:var(--gold)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start}
.svc-icon{width:40px;height:40px;color:var(--navy)}
.svc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey);direction:ltr}
.svc-title{font-size:24px;font-weight:700;line-height:1.35}
.svc-body{font-size:16px;line-height:1.85;color:var(--muted)}
.svc-en{margin-top:auto;font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--grey);direction:ltr}

/* ---------- لماذا BMLS ---------- */
.why{background:var(--sand);padding:96px var(--pad-x);display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.why-visual{aspect-ratio:1.25;position:relative;overflow:hidden;background:var(--navy)}
.why-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.why-visual .cap{position:absolute;inset:0;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.why-visual .cap b{font-size:30px;font-weight:800;color:var(--paper);line-height:1.4}
.why-visual .cap small{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--gold);direction:ltr}
.reasons{display:flex;flex-direction:column}
.reason{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid #cfccc4}
.reason .dot{width:10px;height:10px;background:var(--gold);margin-top:9px;flex:none}
.reason b{font-size:19px;font-weight:700}
.reason p{font-size:16px;line-height:1.8;color:var(--muted);margin:7px 0 0}

/* ---------- الخطوات ---------- */
.step{background:var(--navy);color:var(--paper);padding:34px 26px;display:flex;flex-direction:column;gap:16px;min-height:200px}
.step .n{font-family:'Archivo',sans-serif;font-weight:700;font-size:34px;color:var(--gold);line-height:1;direction:ltr}
.step b{font-size:19px;font-weight:700}
.step p{font-size:15px;line-height:1.8;color:#a9c6de;margin:0}

/* ---------- شريط الدعوة ---------- */
.cta{background:var(--gold);padding:72px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta b{font-size:40px;font-weight:800;color:var(--ink)}
.cta p{font-size:19px;color:#54421a;margin:12px 0 0}
.btn-navy{background:var(--navy);color:var(--paper);padding:19px 40px;font-size:18px;font-weight:700;cursor:pointer;border:0;font-family:inherit;flex:none}
.btn-navy:hover{background:var(--ink)}

/* ---------- عن الشركة ---------- */
.about-body{padding:88px var(--pad-x);display:grid;grid-template-columns:1fr 1fr;gap:64px}
.about-body p{font-size:17px;line-height:2;color:#3a3f45}
.facts{display:flex;flex-direction:column;gap:2px}
.fact{background:var(--sand);padding:26px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.fact .k{font-size:17px;font-weight:500;color:#3a3f45}
.fact .v{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;color:var(--navy);text-align:end}
.value-card{background:var(--paper);padding:40px 34px;display:flex;flex-direction:column;gap:16px;min-height:230px}
.value-card .mark{width:28px;height:28px;background:var(--navy)}
.value-card .mark i:nth-child(1),.value-card .mark i:nth-child(4){background:var(--paper)}
.value-card b{font-size:22px;font-weight:700}
.value-card p{font-size:16px;line-height:1.85;color:var(--muted);margin:0}

/* ---------- تفاصيل الخدمات ---------- */
.svc-row{background:var(--paper);padding:88px var(--pad-x);display:grid;grid-template-columns:.9fr 1.1fr .8fr;gap:48px;border-bottom:1px solid var(--line)}
.svc-row .head{display:flex;flex-direction:column;gap:14px}
.svc-row .headtop{display:flex;align-items:center;gap:14px}
.svc-row .headtop .ic{width:36px;height:36px;color:var(--navy);flex:none}
.svc-row .n{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--gold);direction:ltr}
.svc-row .en{font-family:'Archivo',sans-serif;font-size:14px;letter-spacing:.06em;color:var(--grey);direction:ltr}
.svc-row p{font-size:17px;line-height:2;color:#3a3f45;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{background:var(--sand);padding:8px 14px;font-size:14px;font-weight:500;color:#3a3f45}
.svc-photo{min-height:180px;position:relative;overflow:hidden;background:var(--navy)}
.svc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.svc-photo .n{position:absolute;inset:0;padding:28px;display:flex;align-items:flex-end;font-family:'Archivo',sans-serif;font-weight:700;font-size:44px;color:var(--paper);line-height:.9;direction:ltr}

/* ---------- الأسطول والمستودعات ---------- */
.fleet-card{background:var(--sand);display:flex;flex-direction:column}
.fleet-card .ph{aspect-ratio:1.4;position:relative;overflow:hidden;background:var(--navy)}
.fleet-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fleet-card .tx{padding:26px 24px;display:flex;flex-direction:column;gap:9px}
.fleet-card b{font-size:20px;font-weight:700}
.fleet-card p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.fleet-card .cnt{display:flex;align-items:baseline;gap:6px;margin-top:4px;color:var(--navy);font-weight:500}
.wh-card{background:var(--paper);padding:32px 26px;display:flex;flex-direction:column;gap:16px}
.wh-card .top{display:flex;justify-content:space-between;align-items:baseline}
.wh-card .city{font-size:22px;font-weight:800;color:var(--navy)}
.wh-card .code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey)}
.wh-card .hr{height:1px;background:var(--line)}
.wh-card .row{display:flex;flex-direction:column;gap:3px}
.wh-card .row .k{font-size:14px;color:var(--grey)}
.wh-card .row .v{font-size:16px;font-weight:700}

/* ---------- طلب عرض سعر ---------- */
.quote{display:grid;grid-template-columns:1.15fr 1fr}
.quote .form{padding:80px var(--pad-x);display:flex;flex-direction:column;gap:34px}
.quote h1{font-size:44px;font-weight:800;margin:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;font-weight:500;color:#3a3f45}
.field input,.field textarea{
  background:var(--sand);border:0;border-bottom:2px solid #cfccc4;
  padding:15px 16px;font-size:16px;font-family:inherit;color:var(--ink)
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--navy)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid #cfccc4;padding:11px 18px;font-size:15px;font-weight:500;color:#3a3f45;cursor:pointer;background:none;font-family:inherit}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.send{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-mail{background:var(--navy);color:var(--paper);padding:18px 36px;font-size:17px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.btn-mail:hover{background:var(--ink)}
.btn-wa{background:#1f7a4c;color:var(--paper);padding:18px 36px;font-size:17px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.btn-wa:hover{background:#16603a}
.quote .aside{background:var(--navy);padding:80px 56px;display:flex;flex-direction:column;gap:40px}
.quote .aside h2{font-size:26px;font-weight:800;color:var(--paper);margin:0}
.after{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid #245a8d}
.after .n{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;color:var(--gold);flex:none;direction:ltr}
.after b{font-size:18px;font-weight:700;color:var(--paper)}
.after p{font-size:15px;line-height:1.8;color:#a9c6de;margin:6px 0 0}
.tender{margin-top:auto;background:var(--navy-d);padding:28px;display:flex;flex-direction:column;gap:10px}
.tender b{font-size:16px;font-weight:700;color:var(--gold)}
.tender p{font-size:15px;line-height:1.8;color:#a9c6de;margin:0}

/* ---------- اتصل بنا ---------- */
.office{background:var(--sand);padding:40px 34px;display:flex;flex-direction:column;gap:20px;min-height:280px}
.office .city{font-size:26px;font-weight:800;color:var(--navy)}
.office .addr{font-size:16px;line-height:1.85;color:#3a3f45}
.office .cont{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);direction:ltr}
.hours{background:var(--navy);padding:56px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.hours b{font-size:30px;font-weight:800;color:var(--paper)}
.hours p{font-size:18px;line-height:1.85;color:#a9c6de;margin:12px 0 0}

/* ---------- الفوتر ---------- */
.footer{background:var(--ink);padding:72px var(--pad-x) 40px;display:flex;flex-direction:column}
.footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px}
.footer .logo{display:flex;align-items:center;gap:14px;direction:ltr}
.footer .logo .mark{width:36px;height:36px;background:var(--gold)}
.footer .logo .mark i:nth-child(1),.footer .logo .mark i:nth-child(4){background:var(--ink)}
.footer .logo .word{font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;letter-spacing:.06em;color:var(--gold)}
.footer .blurb{font-size:16px;line-height:1.85;color:var(--grey);max-width:320px;margin-top:20px}
.footer h4{font-size:15px;font-weight:700;color:var(--paper);margin:0 0 14px}
.footer .fl{font-size:15px;color:var(--grey);cursor:pointer;margin-bottom:14px}
.footer .fl:hover{color:var(--gold)}
.footer .bottom{margin-top:48px;padding-top:24px;border-top:1px solid #313236;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:#6b665e}

/* ---------- زر واتساب العائم ---------- */
.wa-float{
  position:fixed;bottom:28px;inset-inline-end:28px;z-index:50;
  background:#1f7a4c;color:var(--paper);padding:14px 22px;
  display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;
  box-shadow:0 10px 28px rgba(28,29,32,.28)
}
.wa-float:hover{background:#16603a;color:var(--paper)}
.wa-float .dot{
  width:22px;height:22px;flex:none;background:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f1ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.3 8.6 8.6 0 0 1-4-1L3 20l1.3-5.3A8.2 8.2 0 0 1 3.2 11 8.4 8.4 0 0 1 11.7 3a8.4 8.4 0 0 1 9.3 8.5z'/%3E%3Cpath d='M9.2 8.1c.2-.5.4-.5.7-.5h.5c.2 0 .4 0 .6.5l.7 1.6c.1.3 0 .5-.1.7l-.4.5c-.1.2-.2.3-.1.5.4.8 1.4 1.8 2.4 2.2.2.1.4 0 .5-.1l.5-.6c.2-.2.4-.2.6-.1l1.6.8c.2.1.4.2.4.4 0 .3 0 .8-.2 1.1-.3.4-.9.7-1.4.7-1.3.1-2.9-.7-4.1-1.7a9.6 9.6 0 0 1-2.4-3.2c-.4-.9-.4-1.9.2-2.8z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center
}

/* ===========================================================
   مشهد الميناء المتحرك
   =========================================================== */
.scene{
  min-height:520px;position:relative;overflow:hidden;direction:ltr;
  background:linear-gradient(#0e4472 0%, var(--navy-d) 46%, var(--navy-d) 100%)
}
.scene .grid{position:absolute;inset:0;background:repeating-linear-gradient(to right,rgba(143,179,212,.05) 0 1px,transparent 1px 64px)}
.scene .sea{position:absolute;left:0;right:0;bottom:17%;height:33%;background:#093054;border-top:1px solid #2b6394}
.scene .road{position:absolute;left:0;right:0;bottom:0;height:17%;background:var(--navy-dd);border-top:1px solid #1d4a76}
.scene .lane{position:absolute;left:0;right:0;bottom:5%;height:1px;background:repeating-linear-gradient(to right,rgba(143,179,212,.28) 0 22px,transparent 22px 44px)}
.scene .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(4,20,38,.45) 100%)}
.scene .overbadge{position:absolute;inset:0;display:flex;align-items:flex-start;padding:32px}
.scene .overbadge span{background:var(--gold);color:var(--ink);padding:12px 18px;font-size:15px;font-weight:700}

.cloud{position:absolute;left:0;background:rgba(169,198,222,.14);animation:drift 64s linear infinite}
.cloud.c2{background:rgba(169,198,222,.1);animation-duration:88s;animation-delay:-30s}
.gull{position:absolute;left:14%;top:18%;display:flex;gap:9px;opacity:.4;animation:gull 26s ease-in-out infinite}
.gull i{width:7px;height:7px;border-top:1.5px solid #a9c6de;border-left:1.5px solid #a9c6de;transform:rotate(45deg)}
.gull i:last-child{width:5px;height:5px;margin-top:5px}

.far{position:absolute;left:2%;bottom:50%;display:flex;align-items:flex-end;gap:26px;animation:far 70s linear infinite alternate}
.far-crane{position:relative;flex:none}
.far-crane b,.far-crane i{position:absolute;background:var(--navy-l)}
.far-crane b{left:0;top:0;width:100%;height:3px}
.far-crane i{top:3px;bottom:0;width:3px}
.far-crane i:nth-of-type(1){left:16%}
.far-crane i:nth-of-type(2){right:16%}

.ship{position:absolute;left:6%;bottom:50%;width:186px;animation:ship 30s ease-in-out infinite alternate}
.ship .bridge{position:absolute;left:150px;bottom:20px;width:20px;height:22px;background:#a9c6de}
.ship .mast{position:absolute;left:156px;bottom:42px;width:3px;height:12px;background:#a9c6de}
.ship .load{display:flex;align-items:flex-end;gap:4px;padding:0 22px 3px}
.ship .load i{width:24px;height:15px;background:#6f9bc4}
.ship .load i:nth-child(2),.ship .load i:nth-child(4){height:23px;background:var(--navy-l)}
.ship .load i:nth-child(3){background:var(--gold)}
.ship .load i:nth-child(5){background:#5a89b5}
.ship .hull{height:18px;background:#4a7ba8;clip-path:polygon(0 0,100% 0,93% 100%,5% 100%)}

.wave{position:absolute;left:-30px;right:-30px;height:1px;background:rgba(143,179,212,.3);bottom:calc(50% + 16px);animation:swell 9s ease-in-out infinite}
.wave.w2{bottom:calc(50% + 30px);background:rgba(143,179,212,.14);animation:swell2 13s ease-in-out infinite}
.shimmer{position:absolute;height:1px;background:#a9c6de;animation:shimmer 7s ease-in-out infinite}
.shimmer.s1{left:8%;width:170px;bottom:calc(50% + 6px)}
.shimmer.s2{left:44%;width:110px;bottom:calc(50% + 22px);animation-duration:11s;animation-delay:-4s}

.crane{position:absolute;right:8%;bottom:17%;width:150px;height:170px}
.crane .beam{position:absolute;left:0;top:0;width:150px;height:7px;background:#a9c6de}
.crane .jib{position:absolute;left:-18px;top:0;width:24px;height:7px;background:var(--gold)}
.crane .leg{position:absolute;top:7px;width:6px;height:157px;background:#6f9bc4}
.crane .leg.l{left:10px} .crane .leg.r{right:10px}
.crane .tie{position:absolute;left:0;right:0;top:104px;height:3px;background:#4a7ba8}
.crane .brace{position:absolute;left:16px;width:118px;height:2px;background:#4a7ba8;opacity:.45}
.crane .brace.b1{top:40px;transform:skewY(3deg)}
.crane .brace.b2{top:70px;transform:skewY(-3deg)}
.crane .foot{position:absolute;bottom:0;width:24px;height:6px;background:#a9c6de}
.crane .foot.l{left:2px} .crane .foot.r{right:2px}
.crane .light{position:absolute;left:70px;top:-11px;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 3.2s steps(1) infinite}
.trolley{position:absolute;left:14px;top:7px;width:24px;animation:trolley 11s ease-in-out infinite}
.trolley .car{width:24px;height:8px;background:var(--gold)}
.hoist{position:relative;width:24px;animation:hoist 11s ease-in-out infinite}
.hoist .cable{position:absolute;left:11px;top:0;width:2px;height:22px;background:#a9c6de}
.hoist .box{position:absolute;left:-5px;top:22px;width:34px;height:15px;background:var(--gold);display:flex;align-items:center;justify-content:center}

.stacks{position:absolute;right:36%;bottom:17%;display:flex;align-items:flex-end;gap:6px}
.stacks .col{display:flex;flex-direction:column;gap:4px}
.stacks .box{width:48px;height:17px;background:#5a89b5}
.stacks .box.lt{background:#7ba4ca}
.stacks .box.gold{background:var(--gold);display:flex;align-items:center;justify-content:center}

.truck{position:absolute;left:0;bottom:5%;width:186px;height:52px;animation:drive 18s linear infinite}
.truck .body{position:absolute;left:0;bottom:9px;width:118px;height:33px;background:var(--gold);display:flex;align-items:center;justify-content:center;gap:7px}
.truck .body .word{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--navy-d);line-height:1}
.truck .cab{position:absolute;left:118px;bottom:9px;width:40px;height:26px;background:#e0ded7}
.truck .win{position:absolute;left:125px;bottom:22px;width:24px;height:10px;background:var(--navy-d)}
.truck .lamp{position:absolute;left:156px;bottom:12px;width:5px;height:4px;background:var(--paper)}
.truck .chassis{position:absolute;left:0;bottom:5px;width:158px;height:4px;background:#8a6c1f}
.truck .wheel{position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;background:var(--navy-dd);border:2px solid #a9c6de}
.truck .wheel:nth-of-type(1){left:20px}
.truck .wheel:nth-of-type(2){left:76px}
.truck .wheel:nth-of-type(3){left:130px}
.truck.far-truck{bottom:17%;width:104px;height:26px;opacity:.45;animation:drive2 27s linear infinite;animation-delay:-9s}
.truck.far-truck .body{width:68px;height:16px;background:#4a7ba8}
.truck.far-truck .cab{left:68px;width:22px;height:13px;background:#7ba4ca}
.truck.far-truck .wheel{width:8px;height:8px;border-width:1.5px;border-color:#6f9bc4}
.truck.far-truck .wheel:nth-of-type(1){left:12px}
.truck.far-truck .wheel:nth-of-type(2){left:44px}
.truck.far-truck .wheel:nth-of-type(3){left:72px}

@keyframes drive   {0%{left:-190px}100%{left:100%}}
@keyframes drive2  {0%{left:-120px}100%{left:100%}}
@keyframes hoist   {0%,12%{transform:translateY(0)}38%,58%{transform:translateY(96px)}84%,100%{transform:translateY(0)}}
@keyframes trolley {0%,10%{transform:translateX(0)}45%,60%{transform:translateX(104px)}95%,100%{transform:translateX(0)}}
@keyframes ship    {0%{transform:translate(-4px,0)}50%{transform:translate(18px,-2px)}100%{transform:translate(40px,0)}}
@keyframes swell   {0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
@keyframes swell2  {0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)}}
@keyframes blink   {0%,58%{opacity:.2}62%,100%{opacity:1}}
@keyframes drift   {0%{transform:translateX(-14%)}100%{transform:translateX(114%)}}
@keyframes shimmer {0%,100%{opacity:.12;transform:translateX(0)}50%{opacity:.3;transform:translateX(26px)}}
@keyframes far     {0%{transform:translateX(0)}100%{transform:translateX(-46px)}}
@keyframes gull    {0%{transform:translate(0,0)}50%{transform:translate(120px,-14px)}100%{transform:translate(240px,0)}}

@media (prefers-reduced-motion:reduce){
  .cloud,.gull,.far,.ship,.wave,.shimmer,.trolley,.hoist,.truck,.crane .light{animation:none!important}
}

@media (min-width:1200px){
  body[data-lang="zh"] .hero h1,body[data-lang="ko"] .hero h1{font-size:50px}
}

/* ===========================================================
   تابلت — أقل من 1200px
   =========================================================== */
@media (max-width:1199px){
  :root{--pad-x:32px}
  .hero{grid-template-columns:1fr}
  .hero .copy{padding:64px var(--pad-x);gap:34px}
  .hero h1{font-size:44px}
  body[data-lang="zh"] .hero h1,body[data-lang="ko"] .hero h1{font-size:40px}
  .hero p{font-size:19px}
  .scene{min-height:340px}
  .section{padding:64px var(--pad-x);gap:34px}
  .h2,.cta b{font-size:34px}
  .h3,.hours b{font-size:28px}
  .pagehead{padding:56px var(--pad-x)}
  .pagehead h1,.quote h1{font-size:42px}
  .grid-4,.grid-3{grid-template-columns:1fr 1fr}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .why{padding:64px var(--pad-x);grid-template-columns:1fr;gap:34px}
  .about-body,.svc-row{padding:56px var(--pad-x);grid-template-columns:1fr 1fr;gap:34px}
  .svc-row{grid-template-columns:1fr 1fr}
  .svc-photo{grid-column:1 / -1}
  .quote{grid-template-columns:1fr}
  .quote .form,.quote .aside{padding:56px var(--pad-x)}
  .stats .num{font-size:38px}
  .footer{padding:56px var(--pad-x) 32px}
  .footer .cols{grid-template-columns:1fr 1fr;gap:32px}
}

/* ===========================================================
   جوال — أقل من 760px
   =========================================================== */
@media (max-width:759px){
  :root{--pad-x:20px}
  .topbar{padding:10px var(--pad-x);gap:14px;font-size:12px}
  .topbar .left{gap:14px}
  .topbar .cr,.topbar .sep{display:none}
  .nav{padding:14px var(--pad-x)}
  .navlinks{display:none}
  .burger{display:flex}
  .mobmenu.open{display:flex}
  .hero .copy{padding:48px var(--pad-x);gap:26px}
  .hero h1{font-size:32px}
  body[data-lang="zh"] .hero h1,body[data-lang="ko"] .hero h1{font-size:30px}
  .hero p{font-size:17px}
  .scene{min-height:320px}
  .scene .overbadge{display:none}
  .badge-strip{display:block}
  .stats{grid-template-columns:1fr}
  .stats .cell{padding:26px var(--pad-x)}
  .section{padding:48px var(--pad-x);gap:26px}
  .h2,.cta b{font-size:27px}
  .h3,.hours b{font-size:24px}
  .pagehead{padding:44px var(--pad-x)}
  .pagehead h1,.quote h1{font-size:32px}
  .pagehead p{font-size:17px}
  .grid-4,.grid-3{grid-template-columns:1fr}
  .grid-5{grid-template-columns:1fr 1fr}
  .why{padding:48px var(--pad-x);grid-template-columns:1fr;gap:26px}
  .about-body,.svc-row{padding:44px var(--pad-x);grid-template-columns:1fr;gap:28px}
  .fields{grid-template-columns:1fr}
  .quote .form,.quote .aside{padding:44px var(--pad-x)}
  .hours{padding:44px var(--pad-x)}
  .footer{padding:48px var(--pad-x) 28px}
  .footer .cols{grid-template-columns:1fr;gap:28px}
  .cta{padding:48px var(--pad-x)}
  .wa-float{bottom:18px;inset-inline-end:18px;padding:12px 18px;font-size:15px}
}


/* ---------- روابط تعمل كأزرار (نسخة الصفحات المنفصلة) ---------- */
.btn-quote,.btn-gold,.btn-ghost,.btn-navy,.btn-mail,.btn-wa,.link-more,.brand,.svc-card,.navlinks .item,.mobmenu .item,.mobmenu .m-cta,.footer .fl{
  text-decoration:none;display:inline-block;text-align:center
}
.brand,.svc-card{display:flex;text-align:start}
.navlinks .item,.mobmenu .item,.mobmenu .m-cta,.footer .fl{display:block;text-align:start}
.btn-quote,.btn-quote:hover{color:var(--paper)}
.btn-quote:hover{background:var(--gold);color:var(--ink)}
.btn-gold,.btn-gold:hover{color:var(--ink)}
.btn-ghost{color:var(--paper)} .btn-ghost:hover{color:var(--gold)}
.btn-navy,.btn-navy:hover{color:var(--paper)}
.btn-mail,.btn-mail:hover,.btn-wa,.btn-wa:hover{color:var(--paper)}
.svc-card{color:inherit} .svc-card:hover{color:var(--paper)}
.navlinks .item{color:#3a3f45} .mobmenu .item{color:var(--paper)}
.footer .fl{color:var(--grey)} .footer .fl:hover{color:var(--gold)}
.link-more{color:var(--navy)} .link-more:hover{color:var(--gold)}
.langbtn{text-decoration:none;display:inline-block}


/* ---------- قائمة الجوال حتى 1080px حتى لا تنكسر العناصر ---------- */
@media (max-width:1079px){
  .navlinks{display:none}
  .burger{display:flex}
  .mobmenu.open{display:flex}
  .nav{padding:16px var(--pad-x)}
}
/* الشريط العلوي: منع تكدس العناصر على الشاشات المتوسطة */
@media (max-width:1079px) and (min-width:760px){
  .topbar{font-size:12px}
  .topbar .left{gap:18px}
}