/* ============================================================
   Rankfinity global header + footer (Elementor Pro templates)
   Class names are unique to these templates, so nothing here
   can reach the front page's own inline stylesheet.
   ============================================================ */

/* ── Header shell ──────────────────────────────────────────
   At rest the bar is transparent, exactly like the landing's
   own navigation. The glass ground and the hairline only
   appear once the page has scrolled, which is what Elementor's
   sticky effects class marks.                                */

header.elementor-location-header{position:relative;z-index:100}

header.elementor-location-header > .e-con{
  position:relative;
  background:transparent;
  border:0;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}

/* The front page keeps the bar transparent at rest, because it floats over
   the hero artwork exactly as the landing's own navigation did. Everywhere
   else the bar is opaque from the start: those pages scroll normal copy
   underneath it, and a transparent bar lets headings read straight through
   the logo and the menu. */
body.rf header.elementor-location-header > .e-con{
  background:rgba(6,8,11,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* A plain hairline instead of a gradient tail. The tail painted a 26px
   wash of ink over whatever sat under the bar, which reads as a smudge
   on lighter panels. A border is predictable. */
body.rf header.elementor-location-header > .e-con{
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* Once scrolled, both cases settle on the same glass treatment. */
header.elementor-location-header > .e-con.elementor-sticky--effects,
body.rf header.elementor-location-header > .e-con.elementor-sticky--effects{
  background:rgba(6,8,11,.9);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* The landing's container is max-width:1180px WITH 24px of padding
   inside it, so its content edge sits 24px in from the 1180 line.
   Elementor puts container padding outside the boxed inner, which
   left the header 24px wider than everything below it. Moving the
   padding onto the inner element lines the two up exactly. */
header.elementor-location-header > .e-con > .e-con-inner{
  padding-left:24px;
  padding-right:24px;
}
@media(max-width:720px){
  header.elementor-location-header > .e-con > .e-con-inner{padding-left:18px;padding-right:18px}
}

/* Elementor gives every child container --width:100% by default. Combined
   with a flex-shrink of 0 that made all three blocks demand the full bar
   and pushed the menu and the buttons off the right edge. Sizing them to
   their content is what lets them sit on one line. */
header.elementor-location-header .e-con-inner > .e-con{
  --width:auto;
  width:auto;
  max-width:100%;
}
header.elementor-location-header .e-con-inner > .rf-navwrap{
  min-width:0;
}
header.elementor-location-header > .e-con > .e-con-inner{
  flex-wrap:nowrap;
}

.rf-brand-name .elementor-heading-title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;font-size:1.06rem;letter-spacing:-.02em;color:#E9EEF4;
}

/* ── Menu ─────────────────────────────────────────────────── */

.rf-nav .elementor-nav-menu a.elementor-item{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;font-weight:500;color:#8B98A8;
  padding:.4rem .1rem;transition:color .18s;
}
.rf-nav .elementor-nav-menu a.elementor-item:hover,
.rf-nav .elementor-nav-menu a.elementor-item.elementor-item-active,
.rf-nav .elementor-nav-menu a.highlighted{color:#E9EEF4;background:transparent}
.rf-nav .elementor-nav-menu--dropdown{
  background:rgba(10,14,19,.98);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
}
.rf-nav .elementor-nav-menu--dropdown a{font-size:.88rem;color:#8B98A8;padding:.7rem 1.1rem}
.rf-nav .elementor-nav-menu--dropdown a:hover{color:#E9EEF4;background:rgba(255,255,255,.045)}
.rf-nav div.elementor-menu-toggle{color:#E9EEF4;background:transparent}
.rf-nav .elementor-menu-toggle svg{fill:#E9EEF4}

/* ── Header buttons ───────────────────────────────────────── */

.rf-cta .elementor-button,
.rf-signin .elementor-button{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.85rem;font-weight:500;letter-spacing:-.005em;
  padding:.6rem 1.05rem;border-radius:11px;border:1px solid transparent;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,border-color .18s;
}
.rf-cta .elementor-button{
  background:linear-gradient(100deg,#2DD4BF 0%,#38BDF8 45%,#3B82F6 100%);
  color:#04070A;font-weight:600;box-shadow:0 4px 24px -6px rgba(45,212,191,.5);
}
.rf-cta .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(45,212,191,.66);color:#04070A}
.rf-signin .elementor-button{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.16);color:#E9EEF4}
.rf-signin .elementor-button:hover{
  background:rgba(255,255,255,.055);border-color:rgba(45,212,191,.45);
  transform:translateY(-2px);color:#E9EEF4;
}

/* ── Footer ───────────────────────────────────────────────── */

.rf-footer .elementor-heading-title{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:#5C6875;font-weight:500;
}
.rf-foot-links .elementor-icon-list-text{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.88rem;color:#8B98A8;transition:color .18s;
}
.rf-foot-links .elementor-icon-list-item a:hover .elementor-icon-list-text{color:#2DD4BF}
.rf-foot-tag{font-family:'Inter',system-ui,sans-serif;font-size:.82rem;color:#5C6875}
.rf-foot-tag em{font-style:normal;color:#2DD4BF}

@media(max-width:1024px){
  .rf-nav .elementor-nav-menu--dropdown{width:100%}
}



/* ============================================================
   Rankfinity mobile bar + navigation drawer
   ============================================================ */

/* Below the tablet breakpoint the horizontal menu and the two buttons
   leave the bar entirely. They live in the drawer, where they have room
   to be read. What stays is a mark on the left and a burger on the
   right, which is all a phone bar should ever hold. */

.rf-burger{
  display:none;
  width:40px;height:40px;padding:0;margin:0;
  background:transparent;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
  border-radius:9px;transition:background .18s;
}
.rf-burger:hover{background:rgba(255,255,255,.05)}
.rf-burger span{
  display:block;width:20px;height:1.6px;border-radius:2px;background:#E9EEF4;
}

@media(max-width:1024px){
  header.elementor-location-header .rf-navwrap{display:none}
  header.elementor-location-header .rf-actions .rf-signin,
  header.elementor-location-header .rf-actions .rf-cta{display:none}
  header.elementor-location-header .rf-actions{margin-left:auto}
  .rf-burger{display:flex}
  header.elementor-location-header .rf-brand .elementor-widget-image img{width:46px}
  .rf-brand-name .elementor-heading-title{font-size:1rem}
}

@media(max-width:400px){
  header.elementor-location-header .rf-brand .elementor-widget-image img{width:42px}
  .rf-brand-name .elementor-heading-title{font-size:.95rem}
}

/* Panel */

.rf-scrim{
  position:fixed;inset:0;z-index:9998;
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s ease;
}
.rf-scrim.is-open{opacity:1}

.rf-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9999;
  width:min(390px,88vw);
  display:flex;flex-direction:column;
  background:#0A0E13;
  border-left:1px solid rgba(255,255,255,.09);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.9);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  overscroll-behavior:contain;
}
.rf-drawer.is-open{transform:translateX(0)}

.rf-drawer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 100% 0%,rgba(45,212,191,.10),transparent 70%);
}

.rf-drawer-top{
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);
}
.rf-drawer-mark{display:block;width:40px;height:auto}
.rf-drawer-close{
  width:36px;height:36px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:10px;cursor:pointer;transition:background .18s,border-color .18s;
}
.rf-drawer-close:hover{background:rgba(255,255,255,.07);border-color:rgba(45,212,191,.4)}
.rf-drawer-close svg{width:16px;height:16px;fill:none;stroke:#E9EEF4;stroke-width:1.7;stroke-linecap:round}

.rf-drawer-body{
  position:relative;z-index:1;flex:1;overflow-y:auto;
  padding:20px 20px 8px;-webkit-overflow-scrolling:touch;
}
.rf-drawer-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:#5C6875;margin:0 0 12px;padding:0;
}
.rf-drawer-list{list-style:none;margin:0 0 26px;padding:0}
.rf-drawer-list li{margin:0;padding:0}
.rf-drawer-list a{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 10px;margin:0 -10px;border-radius:12px;
  text-decoration:none;transition:background .16s;
}
.rf-drawer-list a:active,.rf-drawer-list a:hover{background:rgba(255,255,255,.045)}
.rf-drawer-dot{
  flex:none;width:7px;height:7px;border-radius:2px;margin-top:7px;
  background:var(--dot,#2DD4BF);box-shadow:0 0 10px var(--dot,#2DD4BF);
}
.rf-drawer-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.rf-drawer-title{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.98rem;font-weight:500;color:#E9EEF4;line-height:1.3;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.rf-drawer-flag{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-style:normal;
  font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;
  color:#EAB308;border:1px solid rgba(234,179,8,.35);
  background:rgba(234,179,8,.1);
  padding:.14rem .38rem;border-radius:5px;
}
.rf-drawer-desc{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.79rem;color:#8B98A8;line-height:1.45;
}

.rf-drawer-foot{
  position:relative;z-index:1;flex:none;
  padding:16px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(6,8,11,.6);
}
.rf-drawer-cta,.rf-drawer-signin{
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.92rem;font-weight:500;text-decoration:none;
  padding:.82rem 1rem;border-radius:11px;border:1px solid transparent;
}
.rf-drawer-cta{
  background:linear-gradient(100deg,#2DD4BF 0%,#38BDF8 45%,#3B82F6 100%);
  color:#04070A;font-weight:600;
  box-shadow:0 4px 24px -6px rgba(45,212,191,.5);
  margin-bottom:10px;
}
.rf-drawer-signin{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.16);color:#E9EEF4;
}
.rf-drawer-tag{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.75rem;color:#5C6875;text-align:center;margin:14px 0 0;padding:0;
}
.rf-drawer-tag em{font-style:normal;color:#2DD4BF}

body.rf-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .rf-drawer,.rf-scrim{transition:none}
}


/* ============================================================
   Icon buttons: beating the theme reset
   Hello Elementor paints every bare <button> with a #c36 border and
   fills it #c36 on hover and focus. Its `button:focus` selector is more
   specific than a single class, so the close button turned pink the
   moment focus landed on it, which is the first thing that happens
   when the drawer opens.

   These two are icon buttons and read as glass squares with a hairline.
   The gradient stays reserved for the call to action, so the difference
   between "open something" and "do the thing" remains visible.
   ============================================================ */

.rf-burger,
.rf-burger:hover,
.rf-burger:focus,
.rf-burger:focus-visible,
.rf-burger:active,
.rf-drawer-close,
.rf-drawer-close:hover,
.rf-drawer-close:focus,
.rf-drawer-close:focus-visible,
.rf-drawer-close:active{
  color:#E9EEF4;
  border-radius:10px;
  text-decoration:none;
  box-shadow:none;
}

.rf-burger,
.rf-burger:focus{
  background-color:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
}
.rf-burger:hover,
.rf-burger:active{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(45,212,191,.42);
}

.rf-drawer-close,
.rf-drawer-close:focus{
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.rf-drawer-close:hover,
.rf-drawer-close:active{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(45,212,191,.42);
}

.rf-burger:focus-visible,
.rf-drawer-close:focus-visible{
  outline:2px solid #2DD4BF;
  outline-offset:2px;
}

.rf-burger span{background-color:#E9EEF4}
.rf-drawer-close svg{stroke:#E9EEF4;fill:none}
.rf-drawer-close:hover svg,
.rf-drawer-close:active svg{stroke:#2DD4BF}

/* The drawer's own links must not inherit the reset either. */
.rf-drawer-cta:hover,.rf-drawer-cta:focus{color:#04070A;text-decoration:none}
.rf-drawer-signin:hover,.rf-drawer-signin:focus{
  color:#E9EEF4;text-decoration:none;
  background:rgba(255,255,255,.06);border-color:rgba(45,212,191,.42);
}
.rf-drawer-list a:focus-visible{
  outline:2px solid #2DD4BF;outline-offset:-2px;
}

/* ============================================================
   Mobile bar keeps a ground
   On a phone the bar sits over content from the first pixel, front page
   included, so transparency reads as broken rather than as restraint.
   Below the tablet breakpoint it always has a floor.
   ============================================================ */

@media(max-width:1024px){
  header.elementor-location-header > .e-con,
  body.rf header.elementor-location-header > .e-con{
    background:rgba(6,8,11,.94);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
}

/* ============================================================
   Listing badge
   Supplied as a white pill by the directory, which is why it shouted
   on a near-black ground when it stood alone on the front page. In the
   footer it sits under the tagline with a quiet label above it, held
   back at rest and brought to full strength on hover, so it reads as
   provenance rather than as an advertisement.
   ============================================================ */

.rf-badge{margin-top:16px}
.rf-badge-lbl{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:#5C6875;margin:0 0 8px;padding:0;
}
.rf-badge a{
  display:inline-flex;align-items:center;
  border-radius:9px;
  opacity:.72;
  transition:opacity .2s,transform .2s cubic-bezier(.2,.8,.3,1);
}
.rf-badge a:hover,
.rf-badge a:focus-visible{opacity:1;transform:translateY(-2px)}
.rf-badge a:focus-visible{outline:2px solid #2DD4BF;outline-offset:3px}
.rf-badge img{
  display:block;height:32px;width:auto;
}
@media(max-width:767px){
  .rf-badge img{height:30px}
}
/* Elementor still emits a second, aria-hidden dropdown nav even with the
   built-in dropdown switched off. The drawer replaced it, so it is dead
   markup. Targeted by element name on purpose: the same class also sits
   on the desktop Modules sub-menu, and hiding that would break it. */
.rf-nav nav.elementor-nav-menu--dropdown{display:none}
/* Legal links sit in the bottom bar, the conventional place for them, and
   the only place they exist now that the landing's own footer is hidden. */
.rf-foot-tag a{color:#8B98A8;text-decoration:none;transition:color .18s}
.rf-foot-tag a:hover{color:#2DD4BF}
.rf-foot-sep{color:#2A323C;margin:0 .2rem}