/* ==========================================================================
   وكالة هلينا للسفر والسياحة — التنسيق
   ========================================================================== */

:root{
  /* هوية دافئة عصرية — بني إسبريسو غامق + برتقالي تراكوتا حيوي (بدون أي درجة زرقاء) */
  --navy:#2B211B;         /* بني إسبريسو غامق دافئ (أساسي بدل الكحلي البارد) */
  --navy-2:#1C1511;       /* أغمق — للتدرجات والخلفيات الداكنة */
  --navy-3:#4E392C;       /* بني أفتح دافئ — للحواف والتفاعل */
  --gold:#E2703A;         /* برتقالي تراكوتا حيوي (أساسي للأزرار) */
  --gold-2:#EE8C58;       /* أفتح عند الـ hover */
  --gold-pale:#F6D8BF;    /* باهت للحدود والخلفيات الخفيفة */
  --cream:#FBF6EC;        /* كريمي دافئ (رملي) */
  --paper:#F5E9D9;        /* رملي أغمق قليلا للأقسام والحقول */
  --ink:#241B15;
  --muted:#6E5F52;
  --line:rgba(43,33,27,.14);
  --wrap:1180px;
  --radius:14px;
  --shadow:0 20px 50px -26px rgba(28,21,17,.45);
  --f-body:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  --f-disp:"Changa","IBM Plex Sans Arabic",sans-serif;
  --head-h:76px;
}
html[lang="en"]{ --f-disp:"Fraunces","Georgia",serif; }



*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--head-h); }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ font-weight:700; line-height:1.28; margin:0; }
h1,h2{ font-family:var(--f-disp); }
h3{ font-family:var(--f-body); font-weight:700; }
.step h3{ font-family:var(--f-disp); font-weight:700; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap),92vw); margin-inline:auto; }
section{ padding:clamp(64px,8vw,108px) 0; }

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip:focus{ inset-inline-start:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ============================ عناوين الأقسام ============================ */
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.sec-head{ max-width:680px; margin-bottom:46px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(30px,4vw,46px); }
.sec-head .sub{ color:var(--muted); margin-top:14px; }

/* ============================ الأزرار ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:15.5px; cursor:pointer; white-space:nowrap;
  transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.btn.wide{ width:100%; }
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 12px 26px -14px rgba(226,112,58,.85); }
.btn-gold:hover{ background:var(--gold-2); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--cream); }
.btn-navy:hover{ background:var(--navy-3); transform:translateY(-2px); }
.btn-line{ border-color:var(--line); color:var(--navy); background:transparent; }
.btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.band .btn-line{ border-color:rgba(255,255,255,.3); color:#fff; }
.band .btn-line:hover{ border-color:var(--gold-2); color:var(--gold-2); }

/* ============================ الترويسة ============================ */
#hdr{
  position:sticky; top:0; z-index:80;
  background:var(--navy-2);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bar{
  height:var(--head-h);
  display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:34px; width:auto; filter:brightness(0) invert(1); }
.brand .bt{ display:flex; flex-direction:column; line-height:1.25; }
.brand b{ font-family:var(--f-disp); font-size:19px; color:#fff; font-weight:700; }
.brand i{ font-style:normal; font-size:11.5px; letter-spacing:.12em; color:var(--gold-2); }

#menu{ display:flex; align-items:center; gap:26px; margin-inline-start:auto; }
#menu a{ font-size:15px; font-weight:500; color:rgba(255,255,255,.82); position:relative; padding:6px 0; }
#menu a::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:0; height:1.5px; background:var(--gold); transition:width .25s;
}
#menu a:hover{ color:#fff; }
#menu a:hover::after{ width:100%; }

.lang{
  background:var(--gold); border:1px solid var(--gold); color:#fff;
  border-radius:999px; padding:7px 18px; font-size:13px; font-weight:600;
  cursor:pointer; transition:.2s;
}
.lang:hover{ background:var(--gold-2); border-color:var(--gold-2); }

.bar-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.lang-mobile{ display:none; padding:7px 14px; }

.burger{
  display:none;
  background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:11px;
  width:44px; height:44px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.burger span{ display:block; width:19px; height:1.8px; background:#fff; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

/* ============================ الواجهة ============================ */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - var(--head-h));
  display:flex; align-items:center;
  padding:clamp(72px,10vw,132px) 0 clamp(84px,10vw,144px);
  text-align:center;
  background:
    radial-gradient(1100px 520px at 18% -12%, rgba(226,112,58,.16), transparent 58%),
    linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-3) 100%);
}
.hero::before{
  content:""; position:absolute; inset-inline-end:-15%; top:-30%;
  width:70vw; height:70vw; max-width:760px; max-height:760px; border-radius:50%;
  background:radial-gradient(circle,rgba(238,140,88,.16),transparent 62%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.hero-in{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--gold-2); }
.hero h1{ font-size:clamp(34px,5.6vw,62px); color:#fff; }
.hero .lead{
  font-size:clamp(16px,1.7vw,19.5px); color:rgba(251,246,236,.75);
  margin:20px auto 34px; max-width:62ch;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .btn-line{ border-color:rgba(255,255,255,.3); color:#fff; }
.hero .btn-line:hover{ border-color:var(--gold-2); color:var(--gold-2); }

/* --- مسار الطيران --- */
.flight{
  position:absolute; inset-inline:0; top:4%; width:100%; height:auto;
  z-index:1; pointer-events:none; opacity:.85;
}
.trail{
  fill:none; stroke:var(--gold-2); stroke-width:1.6; opacity:.55;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 2.4s cubic-bezier(.4,0,.2,1) .35s forwards;
}
.dot{ fill:none; stroke:var(--gold-2); stroke-width:1.6; opacity:0; }
.d1{ animation:pop .5s ease .25s forwards; }
.d2{ animation:pop .5s ease 2.5s forwards; }
.plane{
  fill:var(--gold); opacity:0;
  offset-path:path("M 40 214 C 210 210 330 168 460 124 C 590 80 726 46 862 30");
  offset-rotate:auto; offset-distance:0%; offset-anchor:center;
  animation:fly 2.4s cubic-bezier(.4,0,.2,1) .35s forwards;
}
@supports not (offset-path: path("M 0 0 L 1 1")){ .plane{ display:none; } }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ to{ opacity:.75; } }
@keyframes fly{
  0%{ offset-distance:0%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}

/* ============================ الخدمات ============================ */
.grid-svc{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
}
.svc{
  background:var(--paper); border:1.5px solid transparent; border-radius:var(--radius);
  padding:30px 24px 24px; text-align:start; cursor:pointer; position:relative;
  overflow:hidden; transition:transform .22s ease, border-color .22s ease, background .22s ease;
  font:inherit; color:inherit; width:100%;
}
.svc:hover{ transform:translateY(-4px); border-color:var(--gold); background:#fff; }
.svc .i{
  width:50px; height:50px; border-radius:12px; background:var(--navy);
  color:var(--cream);
  display:grid; place-items:center; margin-bottom:20px; transition:background .22s;
}
.svc:hover .i{ background:var(--gold); }
.svc .i svg{ width:24px; height:24px; }
.svc h3{ font-size:20px; margin-bottom:9px; }
.svc p{ color:var(--muted); font-size:14.5px; margin-bottom:18px; }
.svc .go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--navy); transition:.2s;
}
.svc .go svg{ width:16px; height:16px; transition:transform .24s; }
html[dir="rtl"] .svc .go svg{ transform:scaleX(-1); }
.svc:hover .go{ color:var(--gold); }
.svc:hover .go svg{ transform:translateX(4px); }
html[dir="rtl"] .svc:hover .go svg{ transform:scaleX(-1) translateX(4px); }

/* ============================ الأشرطة الداكنة ============================ */
.band{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(155deg, var(--navy-2) 0%, var(--navy) 46%, var(--navy-3) 100%);
  color:#E9EFF4; position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset-inline-start:-12%; bottom:-40%;
  width:60vw; height:60vw; max-width:640px; max-height:640px; border-radius:50%;
  background:radial-gradient(circle,rgba(226,112,58,.14),transparent 64%);
}
.band::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.band h2{ color:#fff; }
.band .sub{ color:rgba(233,239,244,.72); }
.band .wrap{ position:relative; z-index:2; }

/* ============================ آلية العمل ============================ */
.steps{ display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.step{ padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.step .n{
  font-family:var(--f-disp); font-size:46px; line-height:1;
  color:var(--gold); opacity:.85; margin-bottom:12px;
}
.step h3{ font-size:20px; color:#fff; margin-bottom:8px; }
.step p{ color:rgba(233,239,244,.7); font-size:14.5px; }

/* ============================ المعرض ============================ */
.grid-gal{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.slot{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  display:grid; place-items:center;
}
.slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.slot:hover img{ transform:scale(1.06); }
.slot img.ph{
  position:static; width:44%; max-width:132px; height:auto;
  opacity:.16; transition:none;
}
.slot:hover img.ph{ transform:none; }
.slot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg,rgba(255,255,255,.45),transparent 55%);
  pointer-events:none;
}

/* ============================ من نحن ============================ */
#about{ background:var(--paper); }
.about-in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,80px); align-items:center; }
.about-logo{ display:grid; place-items:center; }
.about-logo img{ width:min(300px,80%); }
.about-txt h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:16px; }
.about-txt .lead{ color:var(--muted); }
.facts{ display:grid; gap:18px; margin:30px 0 32px; }
.facts li{ display:flex; gap:14px; align-items:flex-start; }
.facts .i{ width:22px; height:22px; color:var(--gold); flex:none; margin-top:5px; }
.facts b{ display:block; font-size:14px; font-weight:600; }
.facts span,.facts a{ font-size:14.5px; color:var(--muted); }
.facts a:hover{ color:var(--gold); }

/* ============================ التذييل ============================ */
footer{ background:var(--paper); border-top:3px solid var(--gold); }
.foot{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr;
  gap:48px; padding:60px 0 48px;
}
.foot-col h4{
  font-family:var(--f-body); font-size:15px; font-weight:700; color:var(--navy);
  margin:0 0 20px; position:relative; padding-bottom:12px;
}
.foot-col h4::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:34px; height:2px; background:var(--gold);
}
.foot-logo{ height:88px; width:auto; margin-bottom:16px; }
.foot-about p{ font-size:14px; line-height:1.9; color:var(--muted); margin:0 0 22px; max-width:34ch; }

.foot-links{ display:flex; flex-direction:column; gap:13px; font-size:14.5px; }
.foot-links a{ color:var(--ink); width:fit-content; transition:.2s; }
.foot-links a:hover{ color:var(--gold); padding-inline-start:4px; }

.foot-contact{ display:flex; flex-direction:column; gap:16px; }
.foot-contact li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--muted); }
.foot-contact .i{ width:19px; height:19px; color:var(--gold); flex:none; margin-top:3px; }
.foot-contact a{ color:var(--muted); transition:.2s; }
.foot-contact a:hover{ color:var(--gold); }

.foot-social{ display:flex; gap:11px; }
.foot-social a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--navy); background:var(--cream); transition:.22s;
}
.foot-social a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-3px); }
.foot-social svg{ width:18px; height:18px; }

.foot-bar{ background:var(--navy); color:rgba(233,239,244,.62); font-size:13px; }
.foot-bar .wrap{ display:flex; justify-content:center; align-items:center; gap:16px; padding:16px 0; text-align:center; }

/* ============================ زر واتساب العائم ============================ */
.wa-float{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:75;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:grid; place-items:center;
  box-shadow:0 16px 32px -12px rgba(37,211,102,.65); transition:transform .24s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:29px; height:29px; fill:#fff; }

/* ============================ النافذة المنبثقة ============================ */
.modal{
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(10,37,49,.55); backdrop-filter:blur(5px);
  padding:20px; overflow:auto;
}
.modal.on{ display:grid; place-items:center; }
.modal-card{
  background:#fff; border-radius:16px; width:min(380px,100%);
  position:relative; box-shadow:0 40px 90px -34px rgba(0,0,0,.55);
  padding:22px 20px 18px; animation:rise .32s cubic-bezier(.2,.9,.3,1) both;
  overflow:hidden;
}
.modal-card::before{ content:none; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px) scale(.97); } }
.modal-x{
  position:absolute; top:10px; inset-inline-end:10px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  background:var(--paper); border:0; font-size:18px; line-height:1; color:var(--muted); cursor:pointer;
  display:grid; place-items:center;
}
.modal-x:hover{ background:var(--gold-pale); color:var(--navy); }

.modal-badge{
  display:inline-block; background:rgba(226,112,58,.13); color:var(--gold);
  font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:4px 13px; border-radius:999px; margin-bottom:10px;
}
.modal-head{ text-align:center; margin-bottom:16px; }
.modal-head h3{ font-size:19px; color:var(--navy); }
.modal-head p{ color:var(--muted); font-size:12.5px; margin-top:4px; }

.field{ margin-bottom:10px; }
.field label{ display:block; font-size:12px; font-weight:600; margin-bottom:4px; color:var(--navy); }
.inp{ position:relative; display:flex; align-items:center; }
.inp-i{
  position:absolute; inset-inline-start:12px; width:15px; height:15px;
  color:var(--gold); pointer-events:none;
}
.inp-area .inp-i{ align-self:flex-start; margin-top:11px; }
.field input,.field select,.field textarea{
  width:100%; padding:8px 13px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--paper); font-size:13.5px; transition:.2s; font-family:inherit;
}
html[dir="rtl"] .field input,html[dir="rtl"] .field select,html[dir="rtl"] .field textarea{
  padding-inline-start:36px;
}
html[dir="ltr"] .field input,html[dir="ltr"] .field select,html[dir="ltr"] .field textarea{
  padding-inline-start:36px;
}
.field select{ appearance:none; cursor:pointer; }
.field textarea{ resize:vertical; min-height:56px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(226,112,58,.15);
}
.trap{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.err{ color:#B3372B; font-size:12.5px; min-height:18px; margin-bottom:4px; }
.alt{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; }
.alt a{ color:var(--gold); font-weight:600; }

/* --- رسالة النجاح --- */
.done{ display:none; text-align:center; padding:14px 0 4px; }
.done.on{ display:block; }
.done-check{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:rgba(226,112,58,.12); color:var(--gold);
  display:grid; place-items:center;
  animation:pop-in .4s cubic-bezier(.2,1.4,.4,1) both;
}
.done-check svg{ width:32px; height:32px; }
@keyframes pop-in{
  0%{ transform:scale(0); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.done h3{ font-size:19px; margin-bottom:6px; }
.done p{ color:var(--muted); font-size:13px; margin-bottom:18px; }

/* ============================ ظهور تدريجي ============================ */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }

/* ============================ الشاشات الصغيرة ============================ */
@media (max-width:980px){
  :root{ --head-h:66px; }
  .brand img{ height:30px; }
  .brand b{ font-size:17px; }
  .brand i{ font-size:10.5px; }

  .burger{ display:flex; }
  .lang-mobile{ display:inline-flex; }
  .lang-desktop{ display:none; }
  #menu{
    display:none; position:absolute; top:var(--head-h); inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--navy-2); border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow); padding:10px 4vw 18px;
  }
  #menu.open{ display:flex; }
  #menu a{ padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
  #menu a::after{ display:none; }

  .about-in{ grid-template-columns:1fr; }
  .about-logo img{ width:min(220px,60%); }
  .row2{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr; gap:36px; padding:44px 0; text-align:center; }
  .foot-col h4::after{ inset-inline-start:50%; transform:translateX(-50%); }
  html[dir="rtl"] .foot-col h4::after{ transform:translateX(50%); }
  .foot-logo{ margin-inline:auto; }
  .foot-about p{ margin-inline:auto; }
  .foot-links{ align-items:center; }
  .foot-contact li{ justify-content:center; }
  .foot-social{ justify-content:center; }
  .plane{ width:24px; height:24px; }
  .modal-card{ padding:26px 18px 18px; }
}

@media (max-width:520px){
  body{ font-size:16px; }
  .btn{ padding:13px 24px; }
  .hero-cta .btn{ width:100%; }
}

/* ============================ تقليل الحركة ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
  .trail{ stroke-dashoffset:0; }
  .plane{ opacity:1; offset-distance:100%; }
  .dot{ opacity:.75; }
  .rv{ opacity:1; transform:none; }
}