Embed

<section class="neliarabi-header-only">
  <header class="site-header">
    <div class="header-inner">
      <div class="header-left">
        <a href="https://neliarabi.de/contact" class="lux-btn">CONTACT US</a>
      </div>

      <div class="site-brand">
        <a href="https://neliarabi.de/" class="brand-name">NELI ARABI</a>
      </div>

      <div class="header-right">
        <span class="menu-text">MENU</span>
        <div class="menu-icon" id="menuIconBtn">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </header>

  <div class="nav-overlay" id="navOverlay">
    <button class="close-overlay" id="closeOverlayBtn" aria-label="close menu">
      <i class="fas fa-times"></i>
    </button>
    <div class="nav-menu-centered">
      <ul class="nav-list">
        <li><a href="https://neliarabi.de/">HOME</a></li>
        <li><a href="https://neliarabi.de/About">ABOUT</a></li>
        
        <li><a href="https://neliarabi.de/services">SERVICES</a></li>
        <li><a href="/exclusive-area">EXCLUXIVE AREA</a></li>
        <li><a href="/private-consultation">PRIVATE CONSULTATION</a></li>
        <li class="mobile-contact-li"><a href="/contact" class="mobile-lux-btn">CONTACT US</a></li>
      </ul>
      <div class="nav-footer-text">
        <i class="fas fa-feather-alt"></i> essence of slow elegance
      </div>
    </div>
  </div>
</section>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: linear-gradient(145deg, #2c2c28 0%, #1a1a18 100%);
    height: 100vh;
    overflow: auto;
  }

  /* Prevent scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  .neliarabi-header-only {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: -80px;
    position: relative;
    font-family: 'Roboto', sans-serif;
  }

  .site-header {
    background-color: transparent !important;
    width: 100%;
    position: relative;
    z-index: 1000;
    backdrop-filter: none;
    box-shadow: none;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
    width: 100%;
  }

  .header-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .lux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 16px;
    color: #FFFFFF;
    background: transparent;
    border: none;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .lux-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
  }

  .lux-btn:hover::after {
    width: 70%;
    background: #FFFFFF;
  }

  .lux-btn:hover {
    opacity: 0.85;
  }

  .site-brand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .brand-name {
    font-family: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
  }

  .brand-name::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width 0.3s ease;
  }

  .brand-name:hover::after {
    width: 60%;
  }

  .brand-name:hover {
    opacity: 0.9;
    letter-spacing: 0.14em;
  }

  .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .menu-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
  }

  .menu-icon {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .menu-icon:hover {
    opacity: 0.8;
  }

  .menu-icon span {
    display: block;
    height: 2px;
    background: #ffffff;
    transition: all 0.3s ease;
  }

  .menu-icon span:nth-child(1) {
    width: 100%;
  }
  .menu-icon span:nth-child(2) {
    width: 70%;
  }
  .menu-icon span:nth-child(3) {
    width: 50%;
  }

  .menu-icon.active span:nth-child(1) {
    width: 100%;
    transform: translateY(8px) rotate(45deg);
  }
  .menu-icon.active span:nth-child(2) {
    width: 100%;
    opacity: 0;
    transform: scaleX(0);
  }
  .menu-icon.active span:nth-child(3) {
    width: 100%;
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(30, 35, 28, 0.96);
    backdrop-filter: blur(12px);
    z-index: 1050;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-overlay.active {
    visibility: visible;
    opacity: 1;
  }
  .nav-menu-centered {
    text-align: center;
    transform: translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);
  }
  .nav-overlay.active .nav-menu-centered {
    transform: translateY(0);
  }
  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .nav-list li {
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
  }
  .nav-list a {
    text-decoration: none;
    color: #fdfaf2;
    transition: all 0.2s;
    letter-spacing: -0.01em;
    padding: 0.3rem 0.8rem;
    display: inline-block;
    border-bottom: 1.5px solid transparent;
  }
  .nav-list a:hover {
    color: #e2d4bd;
    border-bottom-color: #cbbc97;
    transform: translateY(-2px);
  }
  .nav-footer-text {
    margin-top: 3rem;
    font-size: 0.8rem;
    color: #b8c4ac;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
  }

  .close-overlay {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #f2e8da;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .close-overlay:hover {
    transform: scale(1.1);
    color: white;
  }

  .mobile-contact-li {
    display: none;
  }
  .mobile-lux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 1.2rem;
    color: #fdfaf2;
    background: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  .mobile-lux-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
  }
  .mobile-lux-btn:hover::after {
    width: 70%;
    background: #FFFFFF;
  }
  .mobile-lux-btn:hover {
    color: #FFFFFF;
  }

  /* Tablet Styles */
  @media (min-width: 769px) and (max-width: 1024px) {
    .neliarabi-header-only {
      width: 90%;
      margin-bottom: -70px;
    }
    .header-inner {
      padding: 1rem 0;
    }
    .brand-name {
      font-size: 1.2rem;
      letter-spacing: 0.08em;
    }
    .lux-btn {
      font-size: 12px;
      padding: 8px 18px;
    }
    .menu-text {
      font-size: 0.65rem;
    }
    .menu-icon {
      width: 32px;
      gap: 5px;
    }
    .menu-icon span {
      height: 1.8px;
    }
    .header-right {
      gap: 0.5rem;
    }
  }

  @media (max-width: 768px) {
    .neliarabi-header-only {
      width: 92%;
      margin-bottom: -45px;
    }
    .header-inner {
      padding: 0.7rem 0;
    }
    .brand-name {
      font-size: 0.9rem;
      letter-spacing: 0.06em;
    }
    .lux-btn {
      font-size: 10px;
      padding: 6px 12px;
    }
    .menu-text {
      display: none;
    }
    .menu-icon {
      width: 28px;
      gap: 4px;
      padding: 4px 0;
    }
    .menu-icon span {
      height: 1.5px;
    }
    .site-brand {
      justify-content: flex-start;
      flex: 2;
    }
    .header-left {
      flex: 0;
    }
    .header-left .lux-btn {
      display: none;
    }
    .header-right {
      flex: 0;
      gap: 0;
    }
    .mobile-contact-li {
      display: block;
    }
    .nav-list li {
      font-size: 1.3rem;
    }
    .menu-icon.active span:nth-child(1) {
      transform: translateY(5px) rotate(45deg);
    }
    .menu-icon.active span:nth-child(3) {
      transform: translateY(-5px) rotate(-45deg);
    }
  }

  @media (max-width: 480px) {
    .brand-name {
      font-size: 0.8rem;
      letter-spacing: 0.05em;
    }
    .menu-icon {
      width: 24px;
      gap: 3px;
    }
    .menu-icon span {
      height: 1.3px;
    }
    .mobile-lux-btn {
      font-size: 0.85rem;
      padding: 6px 14px;
    }
    .nav-list li {
      font-size: 1.1rem;
    }
    .nav-footer-text {
      font-size: 0.65rem;
    }
    .close-overlay {
      top: 1rem;
      right: 1.5rem;
      font-size: 1.5rem;
    }
  }
</style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

<script>
  (function() {
    const menuIcon = document.getElementById('menuIconBtn');
    const overlay = document.getElementById('navOverlay');
    const closeBtn = document.getElementById('closeOverlayBtn');
    const navLinks = document.querySelectorAll('.nav-list a');
    const brandLink = document.querySelector('.brand-name');

    function openMenu() {
      overlay.classList.add('active');
      menuIcon.classList.add('active');
      document.body.classList.add('menu-open');
    }

    function closeMenu() {
      overlay.classList.remove('active');
      menuIcon.classList.remove('active');
      document.body.classList.remove('menu-open');
    }

    if (menuIcon) {
      menuIcon.addEventListener('click', (e) => {
        e.stopPropagation();
        if (overlay.classList.contains('active')) {
          closeMenu();
        } else {
          openMenu();
        }
      });
    }

    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        closeMenu();
      });
    }

    // Close menu when clicking links, then navigate
    navLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        const href = link.getAttribute('href');
        // Only prevent default if it's a real URL we want to navigate to
        if (href && href !== '#' && href !== '') {
          closeMenu();
          // Let the browser navigate
          return true;
        }
        e.preventDefault();
        closeMenu();
      });
    });

    if (brandLink) {
      brandLink.addEventListener('click', () => {
        closeMenu();
      });
    }

    // Close overlay when clicking on the background
    if (overlay) {
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
          closeMenu();
        }
      });
    }

    // Close menu on ESC key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && overlay.classList.contains('active')) {
        closeMenu();
      }
    });
  })();
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  #gate {
    position: relative;
    width: 100%;
    max-width: 1800px;
    height: auto;
    min-height: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
  }

  .gate__bg {
    position: absolute;
    inset: 0;
  }
  .gate__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
  }
  .gate__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.9) 100%);
  }

  .gate__content {
    position: relative;
    text-align: center;
    max-width: 520px;
    width: 100%;
    z-index: 2;
    padding: 2rem 1rem;
  }

  .gate__emblem {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    color: #ffffff;
  }
  .gate__emblem svg {
    width: 28px;
    height: 28px;
  }
  .gate__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 16px;
  }
  .gate__title {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(30px, 5vw, 55px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 16px;
  }
  .gate__sub {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 100%;
    margin: 0 auto 32px;
  }

  /* TABS */
  .gate__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 32px;
  }
  .gate__tab {
    flex: 1;
    padding: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
  }
  .gate__tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
  }

  /* CODE PANEL */
  #panelCode {
    display: block;
  }
  #panelCode.hidden {
    display: none;
  }
  .gate__code-wrap {
    position: relative;
    margin-bottom: 20px;
  }
  .gate__code-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px 52px 16px 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #ffffff;
    outline: none;
    text-align: center;
    letter-spacing: 0.25em;
    transition: all 0.3s ease;
  }
  .gate__code-input:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
  }
  .gate__code-input.error {
    border-color: #e05c5c;
    animation: shake 0.35s ease;
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
  }
  .gate__code-eye {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
  }
  .gate__code-eye:hover {
    color: #ffffff;
  }
  .gate__code-hint {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
  }
  .gate__code-hint em {
    color: #ffffff;
    font-style: normal;
  }
  .gate__submit {
    width: 100%;
    padding: 14px;
    background: #ffffff;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
  }
  .gate__submit:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
  }

  /* REQUEST PANEL */
  #panelRequest {
    display: none;
    flex-direction: column;
    gap: 20px;
  }
  #panelRequest.active {
    display: flex;
  }
  .gate__input-group {
    text-align: left;
    margin-bottom: 24px;
  }
  .gate__input-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
  }
  .gate__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  .gate__input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
  }
  .gate__input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
  }
  .gate__input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 300;
  }
  .gate__req-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
  }
  .gate__req-submit svg {
    transition: transform 0.3s ease;
  }
  .gate__req-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
  }
  .gate__req-submit:hover svg {
    transform: translateX(4px);
  }
  .gate__error, .gate__success {
    font-size: 0.75rem;
    margin-top: 8px;
    margin-bottom: 0;
    display: none;
    text-align: left;
  }
  .gate__error.show, .gate__success.show {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .gate__error {
    color: #e05c5c;
  }
  .gate__success {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    padding: 10px;
    border-radius: 8px;
  }
  .gate__success i {
    font-size: 16px;
  }
  .gate__req-sent {
    display: none;
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-top: 16px;
  }
  .gate__req-sent.show {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  .gate__req-sent i {
    font-size: 24px;
    color: #4caf50;
  }
  .gate__req-sent-content em {
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
  }
  .gate__terms {
    font-size: 0.65rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 32px;
    line-height: 1.5;
  }
  .gate__terms a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
  }
  .gate__terms a:hover {
    color: #ffffff;
  }

  /* SUCCESS OVERLAY WITH WHITE BACKGROUND AND LOADING TEXT */
  .success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .success-overlay.show {
    opacity: 1;
    pointer-events: all;
  }
  .success-container {
    text-align: center;
    padding: 3rem;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    border: none;
    min-width: 350px;
  }
  
  /* Text Loading Animation - White Background, Gold Text */
  .loader {
    width: fit-content;
    font-size: 40px;
    line-height: 1.5;
    font-family: system-ui, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px #313b2e;
    background: 
      radial-gradient(1.13em at 50% 1.6em, #313b2e 99%, #0000 101%) calc(50% - 1.6em) 0 / 3.2em 100% text,
      radial-gradient(1.13em at 50% -0.8em, #0000 99%, #313b2e 101%) 50% 0.8em / 3.2em 100% repeat-x text;
    animation: l9 2s linear infinite;
    margin: 0 auto 2rem;
  }
  
  .loader:before {
    content: "Loading";
  }
  
  @keyframes l9 {
    to {
      background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
    }
  }
  
  .loading-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    color: #313b2e;
    letter-spacing: 0.1em;
    margin-top: 1.5rem;
    font-weight: 500;
  }
</style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div id="gate">
  <div class="gate__bg">
    <img src="https://ik.imagekit.io/l5ijbwd6ie/neliarabi.de/ChatGPT%20Image%20May%206,%202026,%2003_34_34%20PM.png" alt="Luxury background pattern">
  </div>
  <div class="gate__content">
    <div class="gate__emblem">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
    </div>
    <div class="gate__eyebrow">Members Only</div>
    <h1 class="gate__title">The Exclusive Circle.</h1>
    <p class="gate__sub">This area is reserved for members of the Neli Arabi private circle. Enter your access code or request an invitation below.</p>

    <div class="gate__tabs">
      <button class="gate__tab active" id="tabCode" type="button">Enter Access Code</button>
      <button class="gate__tab" id="tabRequest" type="button">Request Invitation</button>
    </div>

    
    <div id="panelCode">
      <div class="gate__code-wrap">
        <input class="gate__code-input" id="codeInput" type="password" placeholder="· · · · · · · ·" maxlength="20" autocomplete="off"/>
        <button class="gate__code-eye" id="codeEye" type="button" aria-label="Toggle visibility">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
      </div>
      <p class="gate__code-hint">Use code <em>NELI2025</em> to preview member access.</p>
      <div class="gate__error hidden" id="codeError">Incorrect access code. Please try again.</div>
      <button class="gate__submit" id="codeSubmit" type="button">Unlock Exclusive Area</button>
    </div>

    
    <div id="panelRequest" style="display: none;">
      <div id="reqForm">
        <div class="gate__input-group">
          <label class="gate__input-label">Full Name</label>
          <div class="gate__input-wrapper">
            <input class="gate__input" id="reqName" type="text" placeholder="John Anderson"/>
          </div>
        </div>
        <div class="gate__input-group">
          <label class="gate__input-label">Email Address</label>
          <div class="gate__input-wrapper">
            <input class="gate__input" id="reqEmail" type="email" placeholder="hello@example.com"/>
          </div>
        </div>
        <div class="gate__input-group">
          <label class="gate__input-label">Referral / Membership Code</label>
          <div class="gate__input-wrapper">
            <input class="gate__input" id="reqRef" type="text" placeholder="Optional"/>
          </div>
        </div>
        <div class="gate__error hidden" id="reqError">Please fill in all required fields.</div>
        <div class="gate__success hidden" id="reqSuccess">
          <i class="fas fa-check-circle"></i>
          Request sent successfully!
        </div>
        <button class="gate__req-submit" id="reqSubmit" type="button">
          <span>Submit Invitation Request</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="5" y1="12" x2="19" y2="12"/>
            <polyline points="12 5 19 12 12 19"/>
          </svg>
        </button>
      </div>
      <div class="gate__req-sent hidden" id="reqSent">
        <i class="fas fa-envelope"></i>
        <div class="gate__req-sent-content">
          <em>Thank you.</em> Your request has been received. A member of our private client team will be in touch within 48 hours.
        </div>
      </div>
    </div>

    <p class="gate__terms">By entering you agree to our <a href="#">Terms of Access</a> and <a href="#">Privacy Policy</a>. This area is strictly confidential.</p>
  </div>

  
  <div id="successOverlay" class="success-overlay" style="display: none;">
    <div class="success-container">
      <div class="loader"></div>
      <p class="loading-text">Verifying credentials...</p>
    </div>
  </div>
</div>

<script>
  (function() {
    // DOM elements
    const tabCode = document.getElementById('tabCode');
    const tabRequest = document.getElementById('tabRequest');
    const panelCode = document.getElementById('panelCode');
    const panelRequest = document.getElementById('panelRequest');
    const codeEye = document.getElementById('codeEye');
    const codeInput = document.getElementById('codeInput');
    const codeSubmit = document.getElementById('codeSubmit');
    const codeError = document.getElementById('codeError');
    const reqSubmit = document.getElementById('reqSubmit');
    const reqName = document.getElementById('reqName');
    const reqEmail = document.getElementById('reqEmail');
    const reqRef = document.getElementById('reqRef');
    const reqError = document.getElementById('reqError');
    const reqSuccess = document.getElementById('reqSuccess');
    const reqSent = document.getElementById('reqSent');
    const successOverlay = document.getElementById('successOverlay');
    const loadingText = document.querySelector('.loading-text');

    let redirectTimeout;
    let isPasswordVisible = false;

    // --- Show full animation sequence (30s loader) ---
    function showSuccessAnimation() {
      successOverlay.style.display = 'flex';
      setTimeout(() => successOverlay.classList.add('show'), 10);

      // Show loader
      loadingText.textContent = 'Verifying credentials...';

      // After 30 seconds: redirect to the exclusive-circle page
      redirectTimeout = setTimeout(() => {
        window.location.href = 'https://neliarabi.de/exclusive-circle';
      }, 30000); // 30 seconds
    }

    // --- Tab switching logic ---
    function switchToCodeTab() {
      tabCode.classList.add('active');
      tabRequest.classList.remove('active');
      panelCode.style.display = 'block';
      panelRequest.classList.remove('active');
      panelRequest.style.display = 'none';
      if (reqError) reqError.classList.remove('show');
      if (reqSuccess) reqSuccess.classList.remove('show');
    }

    function switchToRequestTab() {
      tabRequest.classList.add('active');
      tabCode.classList.remove('active');
      panelRequest.classList.add('active');
      panelRequest.style.display = 'flex';
      panelCode.style.display = 'none';
    }

    tabCode.addEventListener('click', switchToCodeTab);
    tabRequest.addEventListener('click', switchToRequestTab);

    // --- Password visibility toggle ---
    codeEye.addEventListener('click', function() {
      isPasswordVisible = !isPasswordVisible;
      codeInput.type = isPasswordVisible ? 'text' : 'password';
    });

    // --- CODE SUBMISSION (with loading animation) ---
    codeSubmit.addEventListener('click', function() {
      const enteredCode = codeInput.value;
      if (enteredCode === 'NELI2025') {
        showSuccessAnimation();
        codeError.classList.remove('show');
        codeError.classList.add('hidden');
      } else {
        codeError.textContent = 'Incorrect access code. Please try again.';
        codeError.classList.add('show');
        codeError.classList.remove('hidden');
        codeInput.classList.add('error');
        setTimeout(() => codeInput.classList.remove('error'), 500);
      }
    });

    // --- REQUEST SUBMISSION - Shows success message only after successful submission ---
    reqSubmit.addEventListener('click', function() {
      // Reset previous success/error states
      reqError.classList.remove('show');
      reqSuccess.classList.remove('show');

      // Validate name and email
      if (!reqName.value.trim() || !reqEmail.value.trim()) {
        reqError.textContent = 'Please fill in your name and email address.';
        reqError.classList.add('show');
        return;
      }

      // Validate email format
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(reqEmail.value.trim())) {
        reqError.textContent = 'Please enter a valid email address.';
        reqError.classList.add('show');
        return;
      }

      // Show success message ONLY after successful validation
      reqSuccess.classList.add('show');
      reqSent.classList.add('show');

      // Clear form fields
      reqName.value = '';
      reqEmail.value = '';
      reqRef.value = '';

      // Hide success message after 5 seconds
      setTimeout(() => {
        reqSuccess.classList.remove('show');
      }, 5000);
    });

    // --- Keyboard "Enter" shortcuts ---
    codeInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') codeSubmit.click();
    });
    [reqName, reqEmail, reqRef].forEach(input => {
      input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') reqSubmit.click();
      });
    });
  })();
</script>

<footer class="footer">
  <div class="footer-border-left"></div>
  <div class="footer-border-right"></div>
  
  <div class="footer__container">
    
    <div class="footer__top-row">
      <a href="https://neliarabi.de/" class="footer__logo-link">
        <div class="footer__logo">Neli Arabi<span>.</span></div>
      </a>
      
    </div>

    
    <div class="footer__main-row">
      <p class="footer__tagline">Exquisite luxury services, delivered with precision from the heart of Germany.</p>
      
      <div class="footer__nav-section">
        <div class="footer__colTitle">Navigation</div>
        <ul class="footer__links-horizontal">
          <li><a href="https://neliarabi.de/">Home</a></li>
          <li><a href="https://neliarabi.de/About">About</a></li>
          <li><a href="#">Exclusive Area</a></li>
          <li><a href="https://neliarabi.de/contact">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer__legal-section">
        <div class="footer__colTitle">Legal</div>
        <ul class="footer__links-horizontal">
          <li><a href="https://neliarabi.de/privacy-policy">Privacy Policy</a></li>
          <li><a href="https://neliarabi.de/imprint">Imprint</a></li>
          <li><a href="https://neliarabi.de/terms-of-service">Terms of Service</a></li>
          <li><a href="https://neliarabi.de/cookie">Cookie Setting</a></li>
        </ul>
      </div>
    </div>
    
    <div class="footer__copyright">
      <span class="footer__copy">&copy; 2026 Neli Arabi GmbH. All rights reserved.</span>
    </div>
  </div>
</footer>

<style>
.footer {
  background: #ffffff;
  padding: clamp(60px, 8vw, 80px) 0 0;
  width: 99%;
  position: relative;
  border-top: 2px solid transparent;
  border-bottom: none;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  overflow: hidden;
  margin-bottom: 0;
}

/* Animated borders */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #000000 25%, #000000 50%, #000000 75%, transparent 100%);
  animation: footerBorderSlideRightToLeft 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #000000 25%, #000000 50%, #000000 75%, transparent 100%);
  animation: footerBorderSlideLeftToRight 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

.footer .footer-border-left {
  position: absolute;
  top: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #000000 25%, #000000 50%, #000000 75%, transparent 100%);
  animation: footerBorderSlideTopToBottom 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

.footer .footer-border-right {
  position: absolute;
  bottom: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #000000 25%, #000000 50%, #000000 75%, transparent 100%);
  animation: footerBorderSlideBottomToTop 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes footerBorderSlideRightToLeft {
  0% { right: -100%; }
  50% { right: 0%; }
  100% { right: 100%; }
}

@keyframes footerBorderSlideLeftToRight {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: 100%; }
}

@keyframes footerBorderSlideTopToBottom {
  0% { top: -100%; }
  50% { top: 0%; }
  100% { top: 100%; }
}

@keyframes footerBorderSlideBottomToTop {
  0% { bottom: -100%; }
  50% { bottom: 0%; }
  100% { bottom: 100%; }
}

.footer__container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
  z-index: 1;
}

/* Top row: Logo and Social side by side */
.footer__top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 15px;
  animation: footerFadeInUp 0.6s ease-out;
}

.footer__logo-link {
  text-decoration: none;
  display: inline-block;
}

.footer__logo {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
  transition: transform 0.3s ease;
}

.footer__logo-link:hover .footer__logo {
  transform: translateY(-2px);
}

.footer__logo span {
  color: #313b2e;
  font-size: 2rem;
  display: inline-block;
  transition: transform 0.3s ease;
}

.footer__logo-link:hover .footer__logo span {
  transform: scale(1.1);
}

/* Main row: Tagline + Navigation + Legal all in one horizontal row */
.footer__main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 50px;
  animation: footerFadeInUp 0.6s ease-out 0.15s both;
}

.footer__tagline {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
  color: #6b6b6b;
  max-width: 320px;
  transition: color 0.3s ease;
  margin: 0;
  flex-shrink: 0;
}

.footer__tagline:hover {
  color: #4a4a4a;
}

.footer__nav-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.footer__legal-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.footer__colTitle {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #313b2e;
  font-weight: 600;
  position: relative;
  display: inline-block;
  transition: letter-spacing 0.3s ease;
  width: fit-content;
}

.footer__colTitle:hover {
  letter-spacing: 0.35em;
}

.footer__colTitle::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: #313b2e;
  transition: width 0.3s ease;
}

.footer__colTitle:hover::after {
  width: 50px;
}

/* Horizontal links */
.footer__links-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links-horizontal li {
  transition: transform 0.2s ease;
}

.footer__links-horizontal a {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
  color: #6b6b6b;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
}

.footer__links-horizontal a:hover {
  color: #313b2e;
  transform: translateY(-2px);
}

/* Copyright */
.footer__copyright {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 32px;
  text-align: center;
  animation: footerFadeInUp 0.6s ease-out 0.3s both;
}

.footer__copy {
  font-size: 0.75rem;
  font-weight: 300;
  color: #6b6b6b;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Animations */
@keyframes footerFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .footer__main-row {
    gap: 30px;
  }
  
  .footer__tagline {
    max-width: 280px;
  }
}

@media (max-width: 950px) {
  .footer__main-row {
    flex-direction: column;
    gap: 40px;
  }
  
  .footer__tagline {
    max-width: 100%;
  }
  
  .footer__nav-section,
  .footer__legal-section {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .footer__top-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .footer__main-row {
    align-items: center;
    text-align: center;
  }
  
  .footer__nav-section,
  .footer__legal-section {
    align-items: center;
  }
  
  .footer__colTitle::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer__links-horizontal {
    justify-content: center;
  }
  
  .footer__links-horizontal a {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 50px 0 0;
  }
  
  .footer__logo {
    font-size: 1.3rem;
  }
  
  .footer__tagline {
    font-size: 0.8rem;
  }
  
  .footer__links-horizontal {
    gap: 16px;
  }
  
  .footer__links-horizontal a {
    font-size: 0.8rem;
  }
}
</style>

Neli Arabi GmbH

Provider of exclusive luxury services including bespoke construction, premium real estate, luxury trading and private events. Primary colors are black, gold and white.