/* ============================================================
   UTILITY BAR + HEADER
   ============================================================ */
.utility{
  background:var(--fg-navy-900);color:var(--fg-steel-400);
  font-size:13px;letter-spacing:.01em;
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:38px}
.utility a:hover{color:#fff}
.utility .u-right{display:flex;align-items:center;gap:22px}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--fg-steel-500);display:inline-block;margin-inline:10px;vertical-align:middle}
@media (max-width:900px){ .utility{display:none} }

.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--fg-hairline);
}
/* One number, used twice: the bar's height and the offset the mobile menu
   sticks to. They were two literals and would have drifted apart. */
:root{--header-h:62px}
.header .wrap{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.logo img{width:230px;min-width:140px}
@media (max-width:520px){ .logo img{width:170px;min-width:140px} }
.nav{display:flex;align-items:center;gap:28px;margin-inline-start:auto}
/* On the home page the six cards carry these same six destinations, so the
   header repeating them is noise. On every other page the nav is the only way
   across the site, so it stays — and it stays with JavaScript off, where the
   route attribute is never set and the nav simply shows. The burger menu on a
   phone keeps the full list everywhere. */
html[data-route="home"] .nav{display:none}
/* nowrap is not decoration. Signing in adds three links to the right of this
   bar, and the first thing that gave way was "How It Works" — broken over
   three lines, which pushed the header to twice its height on every page an
   administrator opened. A nav item is a name, and a name does not wrap. */
.nav a{font-size:15px;color:var(--fg-ink-muted);white-space:nowrap;transition:color .15s var(--ease)}
.nav a:hover{color:var(--fg-ink)}
/* Below this the six nav items and the signed-in group no longer both fit at
   the roomy spacing. Tightening the gaps buys the room back; the burger menu
   takes over further down, and the account links hide at 1180px. */
@media (max-width:1400px){ .nav{gap:18px} .nav a{font-size:14.5px} }
.header-cta{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
@media (min-width:1025px){
  .header-cta{margin-inline-start:0}
  /* the nav was the spacer holding this group against the right edge; with
     the nav hidden on the home page the group needs to push itself */
  html[data-route="home"] .header-cta{margin-inline-start:auto}
}
.lang{
  display:inline-flex;align-items:center;border:1px solid var(--fg-hairline);
  border-radius:var(--r-sm);overflow:hidden;
}
.lang button{
  background:transparent;border:0;padding:7px 12px;font-size:13px;font-weight:500;
  color:var(--fg-ink-muted);cursor:pointer;transition:background .15s,color .15s;
}
.lang button[aria-pressed="true"]{background:var(--fg-navy-800);color:#fff}
/* the account entry sits beside the primary button rather than competing
   with it — one button in the header stays the loudest thing there */
.acctlink{
  font-size:14.5px;font-weight:500;color:var(--fg-ink-muted);white-space:nowrap;
  padding:7px 2px;transition:color .15s var(--ease);
}
.acctlink:hover{color:var(--fg-ink)}
.acctlink.active{color:var(--fg-ink)}
@media (max-width:1180px){ .acctlink{display:none} }
.burger{display:none;background:transparent;border:1px solid var(--fg-hairline);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg-ink);margin:4px 0}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .header-cta .btn--primary{display:none}
}
.mobile-nav{
  display:none;border-bottom:1px solid var(--fg-hairline);background:#fff;
  position:sticky;top:var(--header-h);z-index:55;
}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:16px 24px;border-bottom:1px solid var(--fg-hairline);font-size:16px}
.mobile-nav .btn{margin:20px 24px;width:calc(100% - 48px);justify-content:center}
.mnav-contact{display:grid;gap:10px;padding:4px 24px 24px;font-size:14px;color:var(--fg-ink-muted)}
.mnav-contact a{padding:0;border:0;display:block}
.mnav-contact a:hover{color:var(--fg-ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--fg-navy-900);color:var(--fg-steel-400);padding-block:80px 0;border-top:1px solid rgba(255,255,255,.10)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:48px}
@media (max-width:900px){ .footer__top{grid-template-columns:1fr 1fr;gap:40px} }
@media (max-width:560px){ .footer__top{grid-template-columns:1fr} }
.footer img.flogo{width:250px;margin-bottom:24px}
.footer p.fdesc{font-size:14.5px;max-width:36ch;line-height:1.6}
.footer h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-bottom:20px}
html[dir="rtl"] .footer h5{letter-spacing:.02em;text-transform:none;font-size:15px}
.footer ul{list-style:none;display:grid;gap:12px}
.footer li a{font-size:14.5px;transition:color .15s}
.footer li a:hover{color:#fff}
.fcontact{display:grid;gap:12px;font-size:14.5px}
.fcontact a{display:flex;align-items:center;gap:10px}
.fcontact a:hover{color:#fff}
.footer__legal{
  margin-top:64px;padding-block:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;
}
.footer__legal .regs{display:flex;gap:0 10px;flex-wrap:wrap}
.footer__legal a:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  display:grid;place-items:center;transition:border-color .15s,background .15s
}
.socials a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */

/* ============================================================
   MOTION
   ============================================================ */
/* The reveal only applies when JS is running — without it the content stays visible */
html.js .rise{opacity:0;transform:translateY(12px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
html.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}