/* ==========================================================
   الزين المميز للتوكيلات الملاحية — طبرق، ليبيا
   خط عادي (IBM Plex Sans Arabic) + صور + حركة
   ========================================================== */

:root{
  --ink:    #0D1F2A;
  --slate:  #5C6F7B;
  --line:   #E3E9EB;
  --paper:  #FBFCFC;
  --alt:    #F3F6F7;
  --white:  #FFFFFF;
  --sea:    #0F6B7E;
  --sand:   #B08A4A;

  --ff-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ff-en: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ff: var(--ff-ar);

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 44px);
  --sec: clamp(76px, 10vw, 132px);
  --hdr: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
html[lang="en"]{ --ff: var(--ff-en); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--hdr); }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff); font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.9; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[lang="en"] body{ line-height:1.75; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,figcaption{ margin:0; }
.mono{ font-family:var(--ff-mono); }

/* العربية: بدون خط أحادي وبدون تباعد حروف — لأنه يفكّك الكلمة العربية */
html[lang="ar"] .label,
html[lang="ar"] .eyebrow,
html[lang="ar"] .strip-item span,
html[lang="ar"] .crow-label,
html[lang="ar"] .registry dt,
html[lang="ar"] .brand-text em,
html[lang="ar"] .footer-brand span,
html[lang="ar"] .marquee-track span,
html[lang="ar"] .copy{
  font-family:var(--ff-ar) !important;
  letter-spacing:normal !important;
}
html[lang="ar"] .label,
html[lang="ar"] .eyebrow{ font-size:.82rem; font-weight:500; }
html[lang="ar"] .strip-item span,
html[lang="ar"] .crow-label,
html[lang="ar"] .registry dt,
html[lang="ar"] .brand-text em{ font-size:.78rem; }
html[lang="ar"] .copy{ font-size:.78rem; }
html[lang="ar"] .marquee-track span{ font-size:.88rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:300;
  background:var(--sea); color:#fff; padding:10px 18px;
}
.skip-link:focus{ inset-inline-start:12px; top:12px; }

/* شريط تقدّم القراءة */
.progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:200;
  height:2px; width:0; background:var(--sea); transition:width .12s linear;
}

/* ================= الشريط العلوي ================= */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:150;
  transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s;
  border-block-end:1px solid transparent;
}
.header-inner{
  min-height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.header-side{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }

.brand{ display:flex; align-items:center; gap:11px; color:#fff; transition:color .35s; }
.brand-mark{ width:28px; height:28px; flex:none; color:inherit; }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text b{ font-size:1.02rem; font-weight:600; letter-spacing:.005em; }
.brand-text em{
  font-style:normal; font-size:.6rem; letter-spacing:.2em;
  font-weight:400; opacity:.72;
}

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav a{
  font-size:.88rem; color:rgba(255,255,255,.82); position:relative; padding:4px 0;
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:0; height:1px; background:currentColor; transition:width .3s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ width:100%; }

.lang-switch{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  background:rgba(255,255,255,.08); cursor:pointer; font-family:inherit;
  transition:border-color .35s, background .35s;
}
.lang-opt{
  font-size:.72rem; font-weight:500; letter-spacing:.05em; line-height:1.6;
  padding:4px 11px; border-radius:999px; color:rgba(255,255,255,.8);
  transition:background .25s, color .25s;
}
.lang-opt.is-active{ background:#fff; color:var(--ink); }

.nav-toggle{
  display:none; width:38px; height:38px; border:0; background:none; cursor:pointer;
  padding:11px 7px; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:1.4px; background:#fff; transition:transform .3s var(--ease), opacity .25s, background .35s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ transform:translateY(-7px) rotate(-45deg); }

/* بعد التمرير: خلفية فاتحة ونص داكن */
.site-header.is-solid{
  background:rgba(251,252,252,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-block-end-color:var(--line);
}
.site-header.is-solid .brand{ color:var(--ink); }
.site-header.is-solid .brand-mark{ color:var(--sea); }
.site-header.is-solid .nav a{ color:var(--slate); }
.site-header.is-solid .nav a:hover{ color:var(--ink); }
.site-header.is-solid .lang-switch{ border-color:var(--line); background:var(--white); }
.site-header.is-solid .lang-opt{ color:var(--slate); }
.site-header.is-solid .lang-opt.is-active{ background:var(--ink); color:#fff; }
.site-header.is-solid .nav-toggle span{ background:var(--ink); }

/* ================= الواجهة ================= */
.hero{
  position:relative; min-height:clamp(560px,92vh,880px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--hdr) + 40px) 90px;
  overflow:hidden; color:#fff;
}
.hero-media{ position:absolute; inset:0; z-index:-1; background:var(--ink); }
.hero-img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to{ transform:scale(1.12) translate3d(-1.5%,-1.5%,0); }
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,20,28,.62) 0%, rgba(8,20,28,.32) 45%, rgba(8,20,28,.78) 100%);
}
html[dir="rtl"] .hero-veil{
  background:
    linear-gradient(to left, rgba(8,20,28,.72) 0%, rgba(8,20,28,.28) 62%, rgba(8,20,28,.1) 100%),
    linear-gradient(to bottom, rgba(8,20,28,.5) 0%, rgba(8,20,28,.2) 45%, rgba(8,20,28,.7) 100%);
}
html[dir="ltr"] .hero-veil{
  background:
    linear-gradient(to right, rgba(8,20,28,.72) 0%, rgba(8,20,28,.28) 62%, rgba(8,20,28,.1) 100%),
    linear-gradient(to bottom, rgba(8,20,28,.5) 0%, rgba(8,20,28,.2) 45%, rgba(8,20,28,.7) 100%);
}

.hero-inner{ position:relative; }

/* ظهور متدرّج عند فتح الصفحة */
.anim{ opacity:0; transform:translateY(26px); animation:rise .9s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

.eyebrow{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.26em;
  color:#E8C88E; margin-block-end:20px;
}
.hero h1{
  font-weight:600; font-size:clamp(2.2rem,6vw,4.2rem);
  line-height:1.24; letter-spacing:-.015em; margin-block-end:22px;
}
.hero h1 span{ display:block; }
.hero h1 .thin{
  font-size:.44em; font-weight:400; letter-spacing:.03em;
  color:rgba(255,255,255,.82); margin-block-start:12px;
}
.hero-lead{
  max-width:52ch; font-size:clamp(1rem,1.35vw,1.1rem);
  font-weight:300; color:rgba(255,255,255,.82); margin-block-end:32px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 32px; border-radius:999px; font-size:.92rem; font-weight:500;
  border:1px solid transparent; font-family:inherit; cursor:pointer;
  transition:background .28s var(--ease), color .28s, border-color .28s, transform .28s var(--ease);
}
.btn-primary{ background:#fff; color:var(--ink); }
.btn-primary:hover{ background:var(--sea); color:#fff; transform:translateY(-3px); }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }

.scroll-cue{
  position:absolute; inset-block-end:26px; inset-inline-start:50%;
  transform:translateX(50%); width:1px; height:52px;
  background:rgba(255,255,255,.25); overflow:hidden;
}
html[dir="ltr"] .scroll-cue{ transform:translateX(-50%); }
.scroll-cue span{
  display:block; width:100%; height:18px; background:#fff;
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%{ transform:translateY(-20px); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(52px); opacity:0; }
}

/* ================= شريط البيانات ================= */
.strip-wrap{ background:var(--white); border-block-end:1px solid var(--line); }
.strip{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-item{
  padding:26px 0; display:flex; flex-direction:column; gap:4px;
  padding-inline-start:26px; border-inline-start:1px solid var(--line);
}
.strip-item:first-child{ border-inline-start:0; padding-inline-start:0; }
.strip-item span{ font-size:.66rem; letter-spacing:.16em; color:var(--slate); }
.strip-item b{ font-size:.95rem; font-weight:500; color:var(--ink); }
.strip-item b.mono{ font-size:.88rem; }

/* ================= الشريط المتحرك ================= */
.marquee{
  overflow:hidden; background:var(--ink); color:rgba(255,255,255,.55);
  padding-block:13px; direction:ltr;
}
.marquee-track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee-track span{
  font-size:.82rem; letter-spacing:.14em; white-space:nowrap; padding-inline-end:8px;
}
@keyframes slide{ to{ transform:translateX(-33.333%); } }

/* ================= الأقسام ================= */
.section{ padding-block:var(--sec); }
.section-alt{ background:var(--alt); }
.section-dark{ background:var(--ink); color:#fff; }

.label{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.24em;
  color:var(--sand); margin-block-end:16px;
}
h2{
  font-weight:600; font-size:clamp(1.5rem,3.1vw,2.25rem);
  line-height:1.5; letter-spacing:-.01em; max-width:22ch;
}

/* --- من نحن --- */
.grid-about{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,72px); align-items:center;
}
.about-figure{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:4/5;
}
.about-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.about-body .prose{ margin-block-start:8px; }
.prose p{ margin-block-end:18px; color:var(--slate); font-weight:300; }
.prose p:last-child{ margin-block-end:0; }
.about-body h2{ margin-block-end:22px; }

/* --- ما يميزنا --- */
.values{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(22px,3.2vw,42px); margin-block-start:clamp(42px,6vw,64px);
}
.values li{
  padding-block-start:22px; border-block-start:1px solid var(--ink);
  transition:transform .35s var(--ease);
}
.values li:hover{ transform:translateY(-6px); }
.values h3{ font-size:1.05rem; font-weight:600; margin-block-end:9px; line-height:1.6; }
.values p{ font-size:.92rem; color:var(--slate); font-weight:300; }

/* --- معرض الصور --- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2vw,24px); margin-block-start:clamp(42px,6vw,64px);
}
.gcard{
  position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/3;
  min-height:200px; background:var(--ink);
}
.gcard img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
}
.gcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,20,28,.72), rgba(8,20,28,0) 55%);
}
.gcard figcaption{
  position:absolute; inset-block-end:0; inset-inline:0; z-index:2;
  padding:18px 22px; color:#fff; font-size:.9rem; font-weight:500;
  transform:translateY(6px); opacity:.9;
  transition:transform .45s var(--ease), opacity .45s;
}
.gcard:hover img{ transform:scale(1.07); }
.gcard:hover figcaption{ transform:none; opacity:1; }

/* --- بيانات الشركة --- */
.section-dark .label{ color:#D3B27E; }
.registry{
  margin-block-start:clamp(38px,5vw,58px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  column-gap:clamp(30px,6vw,80px);
}
.registry > div{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding-block:18px; border-block-end:1px solid rgba(255,255,255,.12);
}
.registry dt{ font-size:.72rem; letter-spacing:.12em; color:rgba(255,255,255,.5); min-width:118px; }
.registry dd{ font-size:.98rem; flex:1; min-width:0; color:#fff; }

/* --- التواصل --- */
.contact-list{ margin-block-start:clamp(38px,5vw,58px); border-block-start:1px solid var(--line); }
.crow{
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding-block:clamp(20px,2.6vw,28px); border-block-end:1px solid var(--line);
  transition:padding-inline-start .35s var(--ease), color .3s, background .3s;
}
.crow-label{ font-size:.72rem; letter-spacing:.14em; color:var(--slate); min-width:130px; flex:none; }
.crow-value{ font-size:clamp(1.05rem,2.4vw,1.5rem); flex:1; min-width:0; word-break:break-word; }
.crow-static .crow-value{ font-weight:300; font-size:clamp(1rem,2vw,1.2rem); }
.crow-arrow{
  width:22px; height:22px; color:var(--sea); flex:none;
  opacity:0; transform:translateX(-8px);
  transition:opacity .35s, transform .35s var(--ease);
}
html[dir="rtl"] .crow-arrow svg{ transform:scaleX(-1); }
html[dir="rtl"] .crow-arrow{ transform:translateX(8px); }
.crow:not(.crow-static):hover{ padding-inline-start:14px; color:var(--sea); }
.crow:not(.crow-static):hover .crow-arrow{ opacity:1; transform:none; }

.contact-note{
  margin-block-start:32px; color:var(--slate); font-size:.93rem;
  font-weight:300; max-width:54ch;
}

/* ================= التذييل ================= */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.68); padding-block:44px; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand{ display:flex; flex-direction:column; gap:3px; }
.footer-brand b{ font-weight:600; font-size:1rem; color:#fff; }
.footer-brand span{ font-size:.78rem; letter-spacing:.04em; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px; font-size:.85rem; }
.footer-nav a{ transition:color .25s; }
.footer-nav a:hover{ color:#fff; }
.copy{
  width:100%; font-family:var(--ff-mono); font-size:.72rem; color:rgba(255,255,255,.4);
  padding-block-start:18px; border-block-start:1px solid rgba(255,255,255,.1);
}

/* ================= حركات الظهور ================= */
/* لا يتم إخفاء أي محتوى إلا بعد تأكيد عمل السكربت (html.js-anim) */
.js-anim .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim .reveal.is-in{ opacity:1; transform:none; }

.js-anim .reveal-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
.js-anim .reveal-img img:not([data-parallax]){ transform:scale(1.16); transition:transform 1.4s var(--ease); }
.js-anim .reveal-img.is-in{ clip-path:inset(0 0 0 0); }
.js-anim .reveal-img.is-in img:not([data-parallax]){ transform:scale(1); }

/* ================= الشاشات الصغيرة ================= */
@media (max-width:900px){
  .grid-about{ grid-template-columns:1fr; }
  .about-figure{ aspect-ratio:16/11; }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .strip-item:nth-child(3){ border-inline-start:0; padding-inline-start:0; }
}

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset-block-start:var(--hdr); inset-inline:0;
    background:rgba(13,31,42,.97); backdrop-filter:blur(12px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--pad) 22px;
    transform:translateY(-135%); transition:transform .4s var(--ease);
    max-height:calc(100dvh - var(--hdr)); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ padding:15px 0; border-block-end:1px solid rgba(255,255,255,.1); font-size:1rem; color:#fff; }
  .nav a::after{ display:none; }
  .site-header.is-solid .nav a{ color:#fff; }
  .crow-label{ min-width:100%; }
}

@media (max-width:520px){
  .strip{ grid-template-columns:1fr; }
  .strip-item{
    border-inline-start:0; padding-inline-start:0; padding-block:15px;
    border-block-end:1px solid var(--line);
    flex-direction:row; align-items:baseline; gap:14px;
  }
  .strip-item:last-child{ border-block-end:0; }
  .strip-item span{ min-width:96px; }
  .btn{ flex:1; }
  .registry dt{ min-width:100%; }
  .crow{ flex-wrap:wrap; gap:4px; }
  .hero{ min-height:78vh; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .anim{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .reveal-img{ clip-path:none; }
  .reveal-img img{ transform:none; }
  .hero-img{ animation:none; }
  .marquee-track{ animation:none; }
}