/* ==========================================================================
   FOOTER — dark "growth horizon" footer.
   Colours, images and every text are editable from Dashboard → Homepage → الفوتر
   (they arrive here as --ft-* custom properties on .site-footer).
   The footer is always dark, also when the site is in light mode.
   ========================================================================== */
.site-footer.ft{
  --ft-bg:     #09130d;
  --ft-accent: var(--brand);
  --ft-ink:    #e6ebe3;
  --ft-soft:   color-mix(in srgb, var(--ft-ink) 78%, transparent);
  --ft-faint:  color-mix(in srgb, var(--ft-ink) 55%, transparent);
  --ft-line:   color-mix(in srgb, var(--ft-accent) 16%, transparent);
  --ft-ring:   color-mix(in srgb, var(--ft-accent) 32%, transparent);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ft-bg);
  color:var(--ft-ink);
  border-top:0;
  padding:0;
}

/* ---- top artwork (skyline + infinity horizon) -------------------------- */
.ft-scene{
  height:clamp(170px, 30vw, 600px);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  margin-bottom:calc(clamp(170px, 30vw, 600px) * -0.06);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%);
}

/* ---- columns ---------------------------------------------------------- */
.ft-main{
  position:relative;
  padding-block:var(--sp-5) clamp(3.5rem, 7vw, 6.5rem);
}
.ft-main::after{                       /* glowing mesh waves under the columns */
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:clamp(48px, 6vw, 115px);
  background:var(--ft-waves, none) center bottom / 100% 100% no-repeat;
  opacity:.95;
  z-index:-1;
  pointer-events:none;
}

.ft-grid{
  display:flex;
  align-items:stretch;
}
.ft-grid > .ft-col{ flex:1 1 0; min-width:0; }
.ft-grid > .ft-brand{ flex-grow:1.55; }
.ft-grid > .ft-links-col{ flex-grow:.8; }
.ft-grid > .ft-services{ flex-grow:1.2; }
.ft-grid > .ft-news{ flex-grow:1.3; }
.ft-grid > .ft-follow{ flex-grow:1.2; }
.ft-col{
  padding-inline:clamp(1rem, 1.8vw, 2.5rem);
  border-inline-end:1px solid var(--ft-line);
  min-height:100%;
}
.ft-col:first-child{ padding-inline-start:0; }
.ft-col:last-child{ border-inline-end:0; padding-inline-end:0; }
.ft-brand{ min-width:0; }

.ft-title{
  font-family:var(--font-display);
  font-size:clamp(1.05rem, .95rem + .35vw, 1.3rem);
  font-weight:800;
  color:var(--ft-accent);
  margin:0 0 var(--sp-5);
  padding-bottom:var(--sp-3);
  position:relative;
  display:inline-block;
}
.ft-title a{ color:inherit; }
.ft-title::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0;
  width:min(100%, 2.6rem); height:3px;
  border-radius:3px;
  background:var(--ft-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--ft-accent) 55%, transparent);
}

.ft-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.ft-links a, .ft-links li{ color:var(--ft-soft); font-size:var(--fs-body); line-height:1.5; transition:color var(--dur-fast); }
.ft-links a:hover{ color:var(--ft-accent); }
.ft-contact li{ display:flex; gap:.6em; align-items:flex-start; }
.ft-contact svg{ color:var(--ft-accent); flex-shrink:0; margin-top:3px; }

/* brand */
.ft-logo{ display:inline-block; margin-bottom:var(--sp-4); }
.ft-logo img, .ft-logo video{ height:clamp(38px, 3.4vw, 54px); width:auto; display:block; }
.ft-brand p{ color:var(--ft-ink); font-size:1rem; line-height:1.9; margin:0; }

/* newsletter */
.ft-news p{ color:var(--ft-soft); font-size:var(--fs-small); margin:0 0 var(--sp-4); }
.ft-form{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:22rem; }
.ft-hp{ position:absolute !important; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.ft-input{
  display:flex; align-items:center; gap:.7rem;
  height:3.25rem;
  padding-inline:1.25rem;
  border:1px solid var(--ft-ring);
  border-radius:999px;
  background:color-mix(in srgb, var(--ft-bg) 70%, #000);
  color:var(--ft-faint);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ft-input:focus-within{ border-color:var(--ft-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--ft-accent) 18%, transparent); }
.ft-input svg{ flex-shrink:0; color:var(--ft-soft); }
.ft-input input{
  flex:1; min-width:0;
  background:none; border:0; outline:0;
  color:var(--ft-ink); font:inherit; font-size:var(--fs-small);
}
.ft-input input::placeholder{ color:var(--ft-faint); }
.ft-submit{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:3.25rem;
  border:0; border-radius:999px;
  background:var(--ft-accent);
  color:#0b1a0f;
  font:inherit; font-weight:800; font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 0 28px color-mix(in srgb, var(--ft-accent) 35%, transparent);
  transition:transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.ft-submit:hover{ transform:translateY(-2px); box-shadow:0 0 40px color-mix(in srgb, var(--ft-accent) 55%, transparent); filter:brightness(1.05); }
.ft-submit__arrow{
  position:absolute; inset-inline-end:.4rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, #000 8%, var(--ft-accent));
  transition:transform var(--dur-fast);
}
.ft-submit:hover .ft-submit__arrow{ transform:translate(-3px, -50%); }
[dir="ltr"] .ft-submit__arrow svg{ transform:scaleX(-1); }
.ft-msg{ margin:0; font-size:var(--fs-micro); }
.ft-msg.is-ok{ color:var(--ft-accent); }
.ft-msg.is-err{ color:#ff8a7a; }

/* socials */
.ft-socials{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ft-socials a{
  width:clamp(2.55rem, 2.2rem + .4vw, 3rem); height:clamp(2.55rem, 2.2rem + .4vw, 3rem); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ft-ring);
  color:var(--ft-accent);
  background:color-mix(in srgb, var(--ft-accent) 4%, transparent);
  transition:background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.ft-socials a:hover{
  background:var(--ft-accent); color:#0b1a0f; transform:translateY(-3px);
  box-shadow:0 0 22px color-mix(in srgb, var(--ft-accent) 50%, transparent);
}

/* ---- bottom bar ------------------------------------------------------- */
.ft-bottom{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-4);
  padding-block:var(--sp-5);
  border-top:1px solid var(--ft-line);
  font-size:var(--fs-small);
  color:var(--ft-soft);
}
.ft-legal{ display:flex; flex-wrap:wrap; align-items:center; }
.ft-legal a{ color:var(--ft-soft); transition:color var(--dur-fast); }
.ft-legal a:hover{ color:var(--ft-accent); }
.ft-legal a + a::before{
  content:""; display:inline-block; vertical-align:middle;
  width:1px; height:1.1em; margin-inline:1.4rem;
  background:var(--ft-line);
}

/* ---- glass panel around the columns (Dashboard → الفوتر → "شكل منطقة الأعمدة") ---- */
/* shorter artwork: the empty sky at the top of the image is cropped away */
.ft--glass .ft-scene{
  height:clamp(140px, 21vw, 420px);
  background-size:100% auto;
  margin-bottom:calc(clamp(140px, 21vw, 420px) * -0.30);
}
/* wider panel than the page content */
.ft--glass .ft-main > .container,
.ft--glass > .container{
  max-width:calc(var(--container) + 220px);
  padding-inline:clamp(16px, 3vw, 48px);
}
.ft--glass .ft-main{ padding-bottom:clamp(2.5rem, 4.5vw, 4rem); }
.ft--glass .ft-main::before{          /* soft glows the glass blurs over */
  content:"";
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 55% at 78% 45%, color-mix(in srgb, var(--ft-accent) 13%, transparent), transparent 70%),
    radial-gradient(34% 50% at 22% 60%, color-mix(in srgb, var(--ft-accent) 10%, transparent), transparent 70%);
}
.ft--glass .ft-main::after{ height:clamp(90px, 11vw, 190px); opacity:1; }
.ft--glass .ft-grid{
  position:relative;
  padding:clamp(1.5rem, 3vw, 2.75rem);
  border-radius:clamp(20px, 2vw, 32px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 45%, rgba(255,255,255,.05) 100%);
  border:1px solid color-mix(in srgb, var(--ft-accent) 20%, rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 40px color-mix(in srgb, var(--ft-accent) 4%, transparent),
    0 30px 80px -30px rgba(0,0,0,.65);
}
.ft--glass .ft-grid::before{          /* thin light reflection along the top edge */
  content:"";
  position:absolute; inset:0 12% auto; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ft-accent) 55%, #fff), transparent);
  opacity:.45;
  pointer-events:none;
}
.ft--glass .ft-input{ background:rgba(0,0,0,.28); }
.ft-title{ white-space:nowrap; }
@media (min-width: 1101px){
  .ft--glass .ft-col{ padding-inline:clamp(.75rem, 1.3vw, 2rem); }
  .ft--glass .ft-col:first-child{ padding-inline-start:0; }
  .ft--glass .ft-col:last-child{ padding-inline-end:0; }
  .ft--glass .ft-grid > .ft-links-col{ flex-grow:.85; }
  .ft-socials{ flex-wrap:nowrap; gap:.4rem; }
  .ft-socials a{ width:clamp(2.3rem, 1.6rem + .75vw, 3rem); height:clamp(2.3rem, 1.6rem + .75vw, 3rem); }
}
.ft--glass .ft-socials a{ background:rgba(255,255,255,.04); }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1100px){
  .ft-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:var(--sp-7); }
  .ft-col{ padding-inline:0 var(--sp-5); border-inline-end:0; }
  .ft-brand{ grid-column:1 / -1; padding-bottom:var(--sp-6); border-bottom:1px solid var(--ft-line); }
}
@media (max-width: 760px){
  .ft-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ft-col{ padding-inline:0; }
  .ft-news, .ft-follow{ grid-column:1 / -1; }
  .ft-form{ max-width:none; }
}
@media (max-width: 480px){
  .ft-grid{ column-gap:var(--sp-4); row-gap:var(--sp-6); }
  .ft-links a, .ft-links li{ font-size:var(--fs-small); }
  .ft-links{ gap:.7rem; }
  .ft-bottom{ flex-direction:column; text-align:center; }
}