/* General Styles */
body {
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #2e3a59;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0 0 10px 0;
}

button {
  cursor: pointer;
}

section {
  transition: all 0.3s ease-in-out;
}

/* Navigation */
.navbar {
  background-color: #ffffff;
  color: #2e3a59;
  padding: 15px 20px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar-menu {
  display: flex;
}

.navbar-list {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  position: relative;
}

.navbar-list li {
  position: relative;
}

.navbar-list li a {
  color: #2e3a59;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.navbar-list li a:hover {
  color: #349CEF;
}

.navbar-cta-button {
  background-color: #349CEF;
  color: #ffffff;
  text-decoration: none;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.navbar-cta-button:hover {
  background-color: #1d79d0;
}

.navbar-pay-button {
  background-color: #e74c3c; /* red so it stands out */
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.navbar-pay-button:hover {
  background-color: #c0392b;
}


/* HAMBURGER NAV Styles */

@media screen and (max-width: 767px) {
  .navbar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .navbar-logo {
    margin-bottom: 1rem;
  }

  .navbar-menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .navbar-menu.open {
    display: flex;
  }

  .navbar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .navbar-list li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }

  .navbar-list li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }

  .dropdown-menu {
    display: none;
    flex-direction: column;
    margin-left: 20px;
  }

  .dropdown:hover .dropdown-menu {
    display: none;
    /* Disable hover dropdown for mobile */
  }

  .dropdown.open .dropdown-menu {
    display: flex;
  }

  .navbar-cta-button {
    margin-top: 1rem;
    align-self: stretch;
  }

  .hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: auto;
  }

  .footer-container {
    display: block !important;
  }

  .navbar-logo {
    margin-top: -40px !important;
  }

  .hamburger {
    color: #2e3a59 !important;
  }

  .navbar-list {
    flex-direction: column;
  }

  .navbar-list li a {
    color: #2e3a59 !important;
  }

  .dropdown-menu li a {
    color: #2e3a59 !important;
  }
}

@media (min-width: 768px) {
  .navbar-menu {
    display: flex;
  }

  .hamburger {
    display: none;
  }
}

.navbar {
  padding: 0px !important;
}

.navbar-container {
  padding: 20px !important;
  ;
}

@media(max-width: 768px) {
  .landing-header {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
    animation: fadeIn 1s ease;
    position: relative;
    z-index: 10 !important;
  }

  .hero-image-container {
    height: 100%;
  }
}
    
    :root{
      /* Unified palette (lighter overall) */
      --crx-bg-0:#0e1424; /* hero base */
      --crx-bg-1:#131a2d; /* mid */
      --crx-bg-2:#161e33; /* features base */
      --crx-surface:#ffffff0f; /* cards */
      --crx-border:#ffffff24;
      --crx-text:#eef2ff;
      --crx-muted:#b9c0d9;
      --crx-accent:#78e7ff;
      --crx-accent-2:#8b5cf6;
      --crx-shadow:0 16px 40px rgba(0,0,0,.35);
    }

    html{scroll-behavior:smooth}

    .crx{color:var(--crx-text);} 
    .crx-wrap{max-width:1200px; margin:0 auto; padding:64px 20px;}

    /* ===== HERO ===== */
    .crx-hero{position:relative; background:linear-gradient(180deg, var(--crx-bg-0) 0%, var(--crx-bg-1) 100%); isolation:isolate; overflow:hidden; padding-bottom:110px}
    .crx-hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
    .crx-hero__grid{position:absolute; inset:0; opacity:.35; background-image:linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%), linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%); background-size:22px 22px; mask-image:radial-gradient(70% 60% at 22% 18%, #000 65%, transparent 100%); pointer-events:none}
    .crx-hero__orb{position:absolute; filter:blur(44px); opacity:.45; pointer-events:none}
    .crx-hero__orb--a{width:320px;height:320px;left:-80px;top:-50px;background:radial-gradient(40% 40% at 30% 30%, var(--crx-accent), transparent 60%);} 
    .crx-hero__orb--b{width:420px;height:420px;right:-90px;bottom:-120px;background:radial-gradient(40% 40% at 70% 70%, var(--crx-accent-2), transparent 60%);} 
    @media (prefers-reduced-motion:no-preference){
      .crx-hero__orb--a{animation:crx-float 14s ease-in-out infinite}
      .crx-hero__orb--b{animation:crx-float 16s ease-in-out infinite reverse}
      @keyframes crx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
    }

    .crx-hero__wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; position:relative; z-index:2}
    @media (max-width:1024px){.crx-hero__wrap{grid-template-columns:1fr; gap:28px}}

    .crx-hero__copy{max-width:720px}
    .crx-eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crx-accent); background:linear-gradient(90deg, #78e7ff26, #8b5cf626); padding:.4rem .7rem; border-radius:999px; border:1px solid var(--crx-border); backdrop-filter:blur(6px)}
    .crx-title{font-size:clamp(2rem,3.6vw,3.3rem); line-height:1.05; margin:14px 0 12px; letter-spacing:-.015em}
    .crx-subtitle{font-size:clamp(1rem,1.4vw,1.125rem); color:var(--crx-muted); margin:0 0 18px}

    .crx-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin:0 0 8px}
    .crx-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:14px; font-weight:600; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .2s ease}
    .crx-btn--primary{color:#04121c; background:linear-gradient(180deg,#8af0ff,#5ed9ff); box-shadow:0 6px 18px rgba(110,231,255,.24); position:relative; z-index:3}
    .crx-btn--primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(110,231,255,.32)}
    .crx-btn--ghost{color:var(--crx-text); background:#ffffff12; border:1px solid var(--crx-border); position:relative; z-index:3}
    .crx-btn--ghost:hover{background:#ffffff22}
    .crx-note{display:block; color:var(--crx-muted); margin-top:4px}

    .crx-pills{display:flex; flex-wrap:wrap; gap:.5rem; margin:16px 0 18px; padding:0; list-style:none}
    .crx-pill{font-size:.9rem; color:var(--crx-text); background:#ffffff12; border:1px solid var(--crx-border); padding:.5rem .7rem; border-radius:999px; backdrop-filter:blur(6px)}

    .crx-trust{display:flex; flex-wrap:wrap; gap:.6rem; margin:8px 0 18px}
    .crx-chip{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border-radius:12px; background:var(--crx-surface); border:1px solid var(--crx-border)}

    .crx-stats{display:flex; gap:16px; flex-wrap:wrap}
    .crx-stat{display:flex; align-items:baseline; gap:.4rem; padding:.55rem .75rem; background:#ffffff0a; border:1px dashed #ffffff2e; border-radius:12px}
    .crx-stat__num{font-weight:800; font-size:1.15rem}
    .crx-stat__label{color:var(--crx-muted); font-size:.9rem}

    .crx-hero__visual{display:grid; gap:16px; align-content:start}
    .crx-card{position:relative; background:linear-gradient(180deg, #ffffff18, #ffffff0a); border:1px solid var(--crx-border); border-radius:18px; overflow:hidden; box-shadow:var(--crx-shadow)}
    .crx-card picture,.crx-card img{display:block; width:100%; height:auto}
    .crx-ribbon{position:absolute; top:12px; left:12px; background:#071626; color:#bff5ff; border:1px solid #78e7ff6e; padding:.35rem .6rem; border-radius:10px; font-size:.8rem; box-shadow:0 8px 22px rgba(0,0,0,.25)}
    .crx-tags{position:absolute; bottom:12px; left:12px; display:flex; gap:.4rem; flex-wrap:wrap}
    .crx-tag{background:#00000066; color:#d8def3; border:1px solid #ffffff2e; padding:.35rem .5rem; border-radius:10px; font-size:.8rem}

    .crx-demo{position:relative}
    .crx-demo__btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border-radius:12px; border:1px solid var(--crx-border); background:#ffffff12; color:var(--crx-text); font-weight:600; cursor:pointer}
    .crx-demo__btn:hover{background:#ffffff22}
    .crx-demo__popover{position:absolute; top:52px; left:0; background:#0b1322; border:1px solid var(--crx-border); border-radius:16px; width:min(720px, 92vw); padding:8px; box-shadow:0 18px 42px rgba(0,0,0,.45)}
    .crx-demo__popover video{display:block; width:100%; height:auto; border-radius:12px}

    .crx-logos{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); position:relative; z-index:2}
    .crx-logos__track{display:flex; align-items:center; gap:48px; padding:10px 4px; animation:crx-marquee 28s linear infinite}
    .crx-logos img{opacity:.8; filter:grayscale(1); transition:opacity .2s ease}
    .crx-logos img:hover{opacity:1; filter:none}
    @keyframes crx-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
    @media (prefers-reduced-motion:reduce){.crx-logos__track{animation:none}}

    .crx-bridge{position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:1; pointer-events:none}
    .crx-bridge__svg{display:block; width:100%; height:110px}
    .crx-bridge__path{fill:var(--crx-bg-2)}

    /* ===== FEATURES ===== */
    .crx-features{background:linear-gradient(180deg, var(--crx-bg-2) 0%, #1a2440 100%);} 
    .crx-feat__header{display:grid; gap:.5rem; text-align:center; margin-bottom:18px}
    .crx-eyebrow--soft{background:linear-gradient(90deg, #78e7ff1f, #8b5cf61f)}
    .crx-feat__header h2{font-size:clamp(1.6rem,2.8vw,2.2rem); letter-spacing:-.01em}
    .crx-lead{color:var(--crx-muted)}

    .crx-tabs{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:18px 0 10px}
    .crx-tab{appearance:none; border:1px solid var(--crx-border); background:#ffffff11; color:var(--crx-text); border-radius:12px; padding:.6rem .85rem; font-weight:650; cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease}
    .crx-tab:hover{transform:translateY(-1px)}
    .crx-tab.is-active{background:linear-gradient(180deg, #78e7ff38, #78e7ff14); box-shadow:0 8px 22px #78e7ff2e}

    .crx-panels{margin-top:12px}
    .crx-panel{border:1px solid var(--crx-border); background:linear-gradient(180deg, #ffffff12, #ffffff08); border-radius:18px; padding:18px; box-shadow:0 12px 30px rgba(0,0,0,.28)}
    .crx-panel + .crx-panel{margin-top:10px}
    .crx-panel[hidden]{display:none}
    .crx-panel__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center}
    @media (max-width:980px){.crx-panel__grid{grid-template-columns:1fr; gap:12px}}

    .crx-panel__copy h3{font-size:clamp(1.25rem,2vw,1.5rem); margin:0 0 .3rem}
    .crx-panel__desc{color:var(--crx-muted); margin:0 0 .6rem}
    .crx-bullets{padding:0; margin:.3rem 0 0; list-style:none; display:grid; gap:.35rem}
    .crx-bullets li{position:relative; padding-left:1.1rem}
    .crx-bullets li::before{content:""; position:absolute; left:0; top:.45rem; width:.55rem; height:.55rem; border-radius:2px; background:linear-gradient(180deg, var(--crx-accent), var(--crx-accent-2)); opacity:.9}

    .crx-panel__media{margin:0}
    .crx-media{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--crx-border); box-shadow:0 12px 34px rgba(0,0,0,.28)}

    .crx-quick{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px}
    @media (max-width:980px){.crx-quick{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:560px){.crx-quick{grid-template-columns:1fr}}
    .crx-quick__item{display:flex; align-items:center; gap:.5rem; padding:.6rem .7rem; border-radius:12px; border:1px dashed var(--crx-border); background:#ffffff0a}

    @media (prefers-reduced-motion:no-preference){
      .crx-panel{animation:crx-rise .45s ease both}
      @keyframes crx-rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
    }

    /* ===== Section 3 – Light band ===== */
    .crx-simple{background:linear-gradient(180deg,#f6f9ff 0%, #eef4ff 100%); color:#1d2335; position:relative}
    .crx-simple .crx-eyebrow{color:#0e4a67; background:#c9f3ff; border-color:#9be9ff}
    .crx-simple__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
    @media (max-width:980px){.crx-simple__grid{grid-template-columns:1fr}}
    .crx-simple__lead{color:#3a4663; margin:.25rem 0 .5rem}
    .crx-list{padding-left:1rem; display:grid; gap:.35rem}
    .crx-list li{list-style:disc}
    .crx-simple__cards{display:grid; grid-template-columns:1fr; gap:12px; align-content:start}
    .crx-mini{background:#fff; border:1px solid #e6ebff; border-radius:12px; padding:12px; box-shadow:0 10px 28px rgba(17,24,39,.10)}
    .crx-mini__title{font-size:.9rem; font-weight:700; color:#1d2335; margin-bottom:8px}
    .crx-mini__row{height:8px; background:#eaf0ff; border-radius:6px; margin:6px 0}
    .crx-mini__pill{height:20px; width:40%; background:#d7ecff; border-radius:999px; margin-top:6px}
    .crx-mini__chip{display:inline-block; height:18px; width:70px; background:#eef4ff; border:1px solid #e1e8ff; border-radius:999px; margin:4px 6px 0 0}
    .crx-mini__toggle{position:relative; width:44px; height:24px; background:#dbeafe; border-radius:999px}
    .crx-mini__toggle::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border:1px solid #cfe0ff; border-radius:50%}
    .crx-simple__corner{position:absolute; right:0; bottom:-22px; width:240px; height:240px; background:radial-gradient(circle at 70% 70%, #d7ecff, transparent 60%); filter:blur(30px)}

    /* ===== Section 4 – FAQ band ===== */
    .crx-faq{position:relative; background:linear-gradient(180deg,#10223a 0%, #1a2a4a 70%, #1d2251 100%); padding:64px 0 150px}
    .crx-faq__head{text-align:center; margin-bottom:12px}
    .crx-accordion{display:grid; gap:8px}
    .crx-acc__item{background:#ffffff12; border:1px solid #ffffff24; border-radius:14px; overflow:hidden}
    .crx-acc__btn{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; font-weight:650; color:#eef2ff; background:transparent; border:none; cursor:pointer}
    .crx-acc__btn[aria-expanded="true"] svg{transform:rotate(45deg)}
    .crx-acc__btn svg{transition:transform .2s ease}
    .crx-acc__panel{padding:0 16px 14px; color:#c6cce6}

    .crx-faq__wave{position:absolute; left:0; right:0; bottom:-1px; line-height:0; pointer-events:none}
    .crx-faq__svg{display:block; width:100%; height:140px}
    .crx-faq__path{fill:#0f1427}

    /* ===== Footer ===== */
    .crx-footer{background:#0f1427}
    .crx-footer__wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:start}
    @media (max-width:980px){.crx-footer__wrap{grid-template-columns:1fr; gap:18px}}
    .crx-footer__title{font-size:1.35rem; margin:.2rem 0 .4rem}
    .crx-footer__desc{color:#b8bfd8; max-width:56ch}
    .crx-footer__cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
    .crx-footer__nav{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    @media (max-width:640px){.crx-footer__nav{grid-template-columns:1fr 1fr}}
    .crx-col__title{font-size:1rem; margin:.2rem 0 .4rem}
    .crx-col__list{padding:0; margin:0; list-style:none; display:grid; gap:.35rem}
    .crx-col__list a{color:#d9e2ff; text-decoration:none}
    .crx-col__list a:hover{text-decoration:underline}

    .crx-footer__bottom{border-top:1px solid #ffffff1f; background:linear-gradient(180deg, #0f1427 0%, #0c1120 100%)}
    .crx-footer__bottomWrap{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0}
    @media (max-width:640px){.crx-footer__bottomWrap{flex-direction:column; align-items:flex-start}}
    .crx-legal{display:flex; gap:12px; list-style:none; padding:0; margin:0}
    .crx-legal a{color:#cbd3ee; text-decoration:none}
    .crx-legal a:hover{text-decoration:underline}

    /* Anchor targets: ensure space under sticky headers */
    #crx-panel-members, #crx-panel-events, #crx-panel-calendar, #crx-panel-finance, #crx-panel-checkin, #crx-panel-flyer{scroll-margin-top:80px}