/* Ported from the prototype's footer.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — الخاتمة (Footer)
   ---------------------------------------------------------
   Rebuilt from the footer on aivoix-ttm.framer.website,
   measured at 1440 and read off its code:

     · 100px top padding, a 1395px wrap: a 560px column holding
       a 530px subscribe card (20px radius, 30px padding, a dark
       inset lip along the bottom) and a 735px link block on the
       far side — muted 16px labels, 16/26 links 8px apart
     · the subscribe field is one 47px pill; the button sits
       inside it on the end side
     · 364px of open space under the columns, where a huge word
       sits 180px off the bottom behind a 250px landscape layer
     · the word rises 320px into place once the footer shows
       (0.5s tween there — slowed down here, per the brief)
     · a thin bottom bar: copyright on one side, links on the other

   The green hills become a "path of knowledge": dark rolling
   layers that drift slowly, gold and sage crest lines, and a
   dashed gold path with a light travelling along it.
   ========================================================= */

.site-footer{
  --bg:      #071F1A;
  --bg-2:    #0B2923;
  --text:    #F8F5ED;
  --text-2:  #A8B5AE;
  --gold:    #D4AF5A;
  --sage:    #A8C7B5;
  --ink:     #123C35;
  --line:    rgba(248,245,237,.08);

  --ease: cubic-bezier(.22,.68,.32,1);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  --pad-x:40px;
  padding:100px var(--pad-x) 0;
  color:var(--text);
  background:
    radial-gradient(60% 55% at 8% 0%, rgba(168,199,181,.13) 0%, rgba(168,199,181,0) 70%),
    radial-gradient(45% 40% at 96% 18%, rgba(212,175,90,.07) 0%, rgba(212,175,90,0) 72%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%, #06191500 100%),
    var(--bg);
}

/* a gold hairline along the very top edge */
.site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,90,.35), transparent);
  z-index:3;
}

/* --- atmosphere: a slow glow and a grain --- */
.ftr-glow{
  position:absolute;
  z-index:-1;
  top:-18%;
  inset-inline-end:-10%;
  width:62vw; height:62vw;
  max-width:900px; max-height:900px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168,199,181,.10) 0%, rgba(168,199,181,0) 62%);
  filter:blur(10px);
  pointer-events:none;
  animation:ftr-drift 22s ease-in-out infinite alternate;
}
.ftr-glow--gold{
  top:auto; bottom:6%;
  inset-inline-end:auto; inset-inline-start:-12%;
  width:48vw; height:48vw;
  background:radial-gradient(circle, rgba(212,175,90,.09) 0%, rgba(212,175,90,0) 60%);
  animation-duration:28s;
  animation-direction:alternate-reverse;
}
@keyframes ftr-drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-6%, 5%, 0) scale(1.08); }
}

.ftr-grain{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   TOP: the invitation card + the link columns
   ========================================================= */

.ftr-wrap{
  position:relative;
  z-index:2;
  max-width:1395px;
  margin:0 auto;
}

.ftr-top{
  display:grid;
  grid-template-columns:560px minmax(0, 735px);
  justify-content:space-between;
  align-items:start;
  gap:40px;
}

.ftr-card{
  position:relative;
  width:530px;
  display:flex;
  flex-direction:column;
  gap:30px;
  padding:30px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(160deg, #0D2C26 0%, #0A231E 100%);
  border:1px solid rgba(248,245,237,.06);
  box-shadow:
    inset 0 -6px 3px 0 rgba(0,0,0,.34),
    0 10px 14px 0 rgba(0,0,0,.15),
    inset 0 1px 0 0 rgba(248,245,237,.07),
    0 40px 80px -40px rgba(0,0,0,.55);
}
/* a gold light resting in the corner of the card */
.ftr-card::before{
  content:"";
  position:absolute;
  top:-40%;
  inset-inline-start:-20%;
  width:70%; height:120%;
  background:radial-gradient(circle, rgba(212,175,90,.14) 0%, rgba(212,175,90,0) 60%);
  pointer-events:none;
  transition:transform 1.2s var(--ease), opacity 1.2s var(--ease);
  opacity:.8;
}
.ftr-card:hover::before{ transform:translate(-8%, 8%); opacity:1; }

.ftr-card h2{
  margin:0;
  font-size:34px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.3px;
  color:var(--text);
}
.ftr-card h2 em{
  font-style:normal;
  color:var(--gold);
}
.ftr-card > div > p{
  margin:10px 0 0;
  max-width:470px;
  font-size:16px;
  line-height:1.85;
  color:var(--text-2);
}

.ftr-form{ position:relative; }
.ftr-field{
  position:relative;
  display:block;
  border-radius:30px;
  background:rgba(248,245,237,.08);
  box-shadow:inset 0 0 0 1px rgba(248,245,237,.06);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.ftr-field:focus-within{
  background:rgba(248,245,237,.1);
  box-shadow:inset 0 0 0 1px rgba(212,175,90,.55), 0 0 0 4px rgba(212,175,90,.12);
}
.ftr-field input{
  display:block;
  width:100%;
  height:47px;
  padding:0 30px;
  padding-inline-end:150px;
  border:0;
  border-radius:inherit;
  background:transparent;
  font:inherit;
  font-size:16px;
  color:var(--text);
  outline:none;
  text-align:right;
}
.ftr-field input::placeholder{ color:rgba(248,245,237,.42); }

.ftr-submit{
  position:absolute;
  top:0; bottom:0;
  inset-inline-end:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:132px;
  padding:0 24px;
  border:0;
  border-radius:30px;
  background:var(--gold);
  color:var(--ink);
  font:inherit;
  font-size:15.5px;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  transition:background-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.ftr-submit::after{        /* a soft shine that crosses on hover */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(120%);
  transition:transform .8s var(--ease);
}
.ftr-submit:hover{ background:#DDBC6E; box-shadow:0 10px 24px -12px rgba(212,175,90,.8); }
.ftr-submit:hover::after{ transform:translateX(-120%); }
.ftr-submit:active{ transform:scale(.97); }
.ftr-submit:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.ftr-submit svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.ftr-submit:hover svg{ transform:translateX(-4px); }

.ftr-note{
  margin:12px 6px 0;
  min-height:22px;
  font-size:14px;
  line-height:22px;
  color:var(--text-2);
}
.ftr-note.is-ok{ color:var(--sage); }
.ftr-note.is-err{ color:#E6B8A2; }

/* --- link columns --- */
.ftr-nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 150px)) minmax(0, 225px);
  justify-content:space-between;
  gap:20px;
}

.ftr-label{
  margin:0 0 20px;
  font-size:16px;
  line-height:26px;
  font-weight:500;
  color:var(--text-2);
}

.ftr-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0; padding:0;
  list-style:none;
}
.ftr-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:16px;
  line-height:26px;
  color:var(--text);
  transition:color .3s ease, transform .4s var(--ease);
}
/* a short gold stroke slides in ahead of the link */
.ftr-links a::before{
  content:"";
  width:0; height:1.5px;
  margin-inline-end:0;
  border-radius:2px;
  background:var(--gold);
  transition:width .4s var(--ease), margin .4s var(--ease);
}
.ftr-links a:hover,
.ftr-links a:focus-visible{ color:var(--gold); }
.ftr-links a:hover::before,
.ftr-links a:focus-visible::before{ width:12px; margin-inline-end:8px; }
.ftr-links a:focus-visible{ outline:none; text-decoration:underline; text-underline-offset:6px; }

.ftr-mail{
  display:inline-block;
  font-size:22px;
  line-height:1.4;
  font-weight:600;
  color:var(--text);
  direction:ltr;
  transition:color .3s ease;
}
.ftr-mail:hover{ color:var(--gold); }
.ftr-contact p{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.8;
  color:var(--text-2);
}

.ftr-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0; padding:0;
  list-style:none;
}
.ftr-social a{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  color:var(--text);
  background:rgba(248,245,237,.05);
  box-shadow:inset 0 0 0 1px rgba(248,245,237,.12);
  transition:background-color .35s ease, color .35s ease, transform .45s var(--ease), box-shadow .35s ease;
}
.ftr-social svg{ width:18px; height:18px; }
.ftr-social a:hover,
.ftr-social a:focus-visible{
  background:var(--gold);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold), 0 10px 22px -12px rgba(212,175,90,.9);
  transform:translateY(-3px);
  outline:none;
}

/* =========================================================
   THE CLOSING: huge word + the path of knowledge
   ========================================================= */

.ftr-stage{
  position:relative;
  height:430px;
  margin-top:-82px;                         /* the word tucks up under the links (.ftr-wrap stays in front) */
  margin-inline:calc(-1 * var(--pad-x));   /* the landscape runs edge to edge */
  pointer-events:none;
}

.ftr-word{
  position:absolute;
  z-index:1;
  left:50%;
  /* the box reaches down past the baseline so the dot under ج is inside
     it — background-clip:text only paints glyphs within the box. Moving
     the box down by the same amount keeps the word where it was. */
  --below:.34em;
  /* low enough that the hills (.ftr-land, drawn above it) rise over the
     foot of the letters: the top of the word shows, its base sinks
     behind the landscape */
  bottom:calc(58px - var(--below));
  padding:.06em 0 var(--below);
  margin:0;
  width:98%;
  text-align:center;
  font-size:clamp(140px, 21vw, 330px);
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(0deg, rgba(248,245,237,.045) 0%, rgba(248,245,237,.13) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  transform:translateX(-50%) translateY(var(--rise, 0px));
  pointer-events:none;
  user-select:none;
}

.ftr-land{
  position:absolute;
  z-index:2;
  left:0; right:0; bottom:0;
  height:250px;
  overflow:hidden;
  pointer-events:none;
}
.ftr-land svg{ position:absolute; bottom:0; display:block; }

/* the drifting layers are 200% wide and hold two identical periods,
   so sliding them by half their width loops without a seam */
.ftr-layer{
  left:0;
  width:200%;
  height:100%;
  animation:ftr-flow var(--dur, 60s) linear infinite;
  animation-play-state:paused;
}
.ftr-layer--far { --dur:70s; opacity:.95; }
/* the hills are a touch see-through, so the foot of the word still shows faintly behind them */
.ftr-layer path[fill^="url"]{ fill-opacity:.8; }
.ftr-layer--mid { --dur:52s; animation-direction:reverse; }
.ftr-layer--near{ --dur:40s; }
@keyframes ftr-flow{ to{ transform:translateX(-50%); } }

.ftr-path{
  left:0;
  width:100%;
  height:100%;
}
.ftr-trail{
  fill:none;
  stroke:url(#ftr-gold);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:2 12;
  animation:ftr-dash 3.2s linear infinite;
  animation-play-state:paused;
}
@keyframes ftr-dash{ to{ stroke-dashoffset:-56; } }
.ftr-trail-soft{
  fill:none;
  stroke:rgba(212,175,90,.14);
  stroke-width:10;
  stroke-linecap:round;
  filter:blur(6px);
}

.site-footer.is-visible .ftr-layer,
.site-footer.is-visible .ftr-trail{ animation-play-state:running; }

/* =========================================================
   BOTTOM BAR
   ========================================================= */

.ftr-bottom{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1395px;
  margin:-46px auto 0;
  padding:20px 0 24px;
  font-size:15px;
  line-height:26px;
  color:rgba(248,245,237,.72);
}
.ftr-bottom .brand{ gap:10px; }
.ftr-bottom .brand-mark{ width:32px; height:32px; border-radius:10px; }
.ftr-bottom .brand-mark svg{ width:19px; height:19px; }
.ftr-bottom .brand-text{ font-size:19px; color:var(--text); }
.ftr-bottom .brand-logo{ height:48px; }
.ftr-copy{
  display:flex; align-items:center; gap:18px;
  margin:0;
}
.ftr-legal{
  display:flex; gap:26px;
  margin:0; padding:0;
  list-style:none;
}
.ftr-legal a{
  color:rgba(248,245,237,.8);
  transition:color .3s ease;
}
.ftr-legal a:hover{ color:var(--gold); }

/* =========================================================
   REVEAL
   ========================================================= */

.ftr-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.site-footer.is-seen .ftr-up{ opacity:1; transform:none; }

.ftr-word{
  --rise:320px;
  opacity:0;
  transition:transform 1.6s var(--ease) .15s, opacity 1.6s var(--ease) .15s;
}
.site-footer.is-seen .ftr-word{ --rise:0px; opacity:1; }

.ftr-land{
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1.4s var(--ease) .35s, transform 1.4s var(--ease) .35s;
}
.site-footer.is-seen .ftr-land{ opacity:1; transform:none; }

.ftr-draw{
  stroke-dasharray:var(--plen, 2400);
  stroke-dashoffset:var(--plen, 2400);
  transition:stroke-dashoffset 2.4s cubic-bezier(.62,.03,.36,1) .6s;
}
.site-footer.is-seen .ftr-draw{ stroke-dashoffset:0; }

/* the dotted trail and its travelling light arrive once the line is drawn */
.ftr-trail, .ftr-spark{ opacity:0; transition:opacity 1.2s ease 2.6s; }
.site-footer.is-seen .ftr-trail,
.site-footer.is-seen .ftr-spark{ opacity:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1280px){
  .ftr-top{ grid-template-columns:minmax(0, 480px) minmax(0, 1fr); }
  .ftr-card{ width:100%; }
  .ftr-nav{ grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap:24px; }
}

@media (max-width:980px){
  .site-footer{ --pad-x:24px; padding:80px var(--pad-x) 0; }
  .ftr-top{ grid-template-columns:1fr; gap:56px; }
  .ftr-card{ max-width:620px; }
  .ftr-nav{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 24px; }
  .ftr-stage{ height:350px; margin-top:-96px; }
  .ftr-word{ bottom:calc(84px - var(--below)); }           /* the hills still rise over its foot */
  .ftr-land{ height:210px; }
}

@media (max-width:620px){
  .site-footer{ --pad-x:16px; padding:64px var(--pad-x) 0; }
  .ftr-card{ padding:24px 20px; gap:24px; }
  .ftr-card h2{ font-size:27px; }
  .ftr-field{ background:transparent; box-shadow:none; }
  .ftr-field:focus-within{ background:transparent; box-shadow:none; }
  .ftr-field input{
    padding-inline-end:22px;
    padding-inline-start:22px;
    background:rgba(248,245,237,.08);
    border-radius:30px;
    box-shadow:inset 0 0 0 1px rgba(248,245,237,.08);
  }
  .ftr-field input:focus{ box-shadow:inset 0 0 0 1px rgba(212,175,90,.55), 0 0 0 4px rgba(212,175,90,.12); }
  .ftr-submit{ position:relative; width:100%; height:47px; margin-top:10px; }
  .ftr-contact{ grid-column:1 / -1; }
  .ftr-stage{ height:305px; margin-top:-92px; }
  .ftr-word{ bottom:calc(78px - var(--below)); font-size:clamp(80px, 26vw, 140px); }
  .ftr-land{ height:170px; }
  .ftr-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    margin-top:-40px;
  }
  .ftr-copy{ flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .ftr-glow, .ftr-layer, .ftr-trail{ animation:none !important; }
  .ftr-up, .ftr-word, .ftr-land{ opacity:1 !important; transform:translateX(0) !important; transition:none !important; }
  .ftr-word{ transform:translateX(-50%) !important; }
  .ftr-draw{ stroke-dashoffset:0 !important; transition:none !important; }
}

/* =========================================================
   SEAM — the last section above rounds its bottom corners and
   sits over the footer, like the reference's main content does
   ========================================================= */
.is-last-section{
  position:relative;
  z-index:1;
  border-radius:0 0 40px 40px;
}
.is-last-section + .site-footer,
.is-last-section ~ .site-footer,
/* Nuxt: pages wrap their sections in <main>, so the seam also matches one level up */
main:has(> .is-last-section:last-child) ~ .site-footer{
  margin-top:-40px;
  padding-top:140px;
}
@media (max-width:980px){
  .is-last-section{ border-radius:0 0 28px 28px; }
  .is-last-section ~ .site-footer,
  main:has(> .is-last-section:last-child) ~ .site-footer{ margin-top:-28px; padding-top:108px; }
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

}