*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--tl-bg);scroll-behavior:smooth}
body{background:var(--tl-bg);color:var(--tl-fg);font-family:var(--tl-font-body);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit;border:none;background:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--tl-r-pill);font-family:var(--tl-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:.16s;white-space:nowrap}
.btn-y{background:var(--tl-yellow);color:#161920;box-shadow:var(--tl-glow-yellow)}
.btn-y:hover{background:var(--tl-yellow-soft);transform:translateY(-1px)}
.btn-o{border:1px solid var(--tl-border-strong);color:var(--tl-fg)}
.btn-o:hover{border-color:var(--tl-border-yellow);color:var(--tl-yellow-ink)}
.btn-lg{padding:16px 30px;font-size:12px}
/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--tl-bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--tl-border)}
.nav-in{display:flex;align-items:center;gap:26px;height:68px}
.logo{font-family:var(--tl-font-app);font-weight:800;font-size:23px;letter-spacing:-.02em}
.logo .y{color:var(--tl-yellow-ink)}
.nav-links{display:flex;gap:24px;margin-left:8px}
.nav-links a{font-size:14px;color:var(--tl-fg-2);font-weight:500}
.nav-links a:hover{color:var(--tl-fg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-right .signin{font-size:14px;color:var(--tl-fg-2)}
.nav-right .signin:hover{color:var(--tl-fg)}
.nav-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--tl-border-strong);color:var(--tl-fg-2)}
.nav-ico:hover{border-color:var(--tl-border-yellow);color:var(--tl-yellow-ink)}
/* hero */
.hero{position:relative;overflow:hidden;background:#0a0a0a}
/* search */
.searchbar{margin:34px auto 0;max-width:760px;display:flex;align-items:center;gap:8px;background:var(--tl-surface-1);border:1px solid var(--tl-border-strong);border-radius:var(--tl-r-pill);padding:8px 8px 8px 20px;box-shadow:var(--tl-shadow-lg)}
/* hero stat cards (with icons) */
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;text-align:left}
/* section shell */
.section{padding:54px 0}
/* trending grid (event cards) */
.ev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
/* trending brands */
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
/* explore by city */
.city-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
/* featured venues */
.venue-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* dense list rows (this weekend) */
.rows{border:1px solid var(--tl-border);border-radius:var(--tl-r-lg);overflow:hidden;background:var(--tl-surface-1)}
/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* organiser band */
.org-band{position:relative;border-top:1px solid var(--tl-border);border-bottom:1px solid var(--tl-border);background:linear-gradient(180deg,var(--tl-surface-1),var(--tl-bg));overflow:hidden}
/* membership teaser */
.mem{margin-top:40px;border:1px solid var(--tl-border);border-radius:var(--tl-r-xl);background:var(--tl-surface-1);overflow:hidden}
/* verified organiser strip */
.verband{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;padding:20px 24px;border-radius:var(--tl-r-lg);border:1px solid var(--tl-border-yellow);background:rgba(249,235,6,.05)}
/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* blogs */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* app band */
.app-band{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border:1px solid var(--tl-border);border-radius:var(--tl-r-xl);overflow:hidden;background:var(--tl-surface-1)}
/* trust bar */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;padding:26px 24px;border-top:1px solid var(--tl-border);border-bottom:1px solid var(--tl-border);background:var(--tl-surface-1)}
/* faq */
.faq{max-width:820px;margin:0 auto}
/* footer */
.footer{border-top:1px solid var(--tl-border);padding:54px 0 40px;margin-top:20px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px}
.foot-col h4{font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--tl-fg-3);margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:var(--tl-fg-2);margin-bottom:9px}
.foot-col a:hover{color:var(--tl-yellow-ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--tl-border);flex-wrap:wrap}
.foot-bottom .cp{font-size:12px;color:var(--tl-fg-4)}
.social{display:flex;gap:10px}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--tl-border);display:grid;place-items:center;color:var(--tl-fg-2);font-family:var(--tl-font-mono);font-size:11px}
.social a:hover{border-color:var(--tl-border-yellow);color:var(--tl-yellow-ink)}
.nav-search{flex:1;max-width:320px;display:flex;align-items:center;gap:9px;background:var(--tl-surface-2);border:1px solid var(--tl-border);border-radius:var(--tl-r-pill);padding:9px 15px;color:var(--tl-fg-4);font-size:13px;margin-left:auto}
.nav-search input{flex:1;background:none;border:none;outline:none;color:var(--tl-fg);font-size:13px}
.nav-ico{width:38px;height:38px;border-radius:50%;border:1px solid var(--tl-border-strong);background:var(--tl-surface-2);color:var(--tl-fg-2);display:grid;place-items:center;transition:.15s;flex:none}
.nav-ico:hover{color:var(--tl-yellow-ink);border-color:var(--tl-border-yellow)}
.nav-create{display:inline-flex;align-items:center;gap:7px;background:var(--tl-yellow);color:#161920;font-family:var(--tl-font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;border-radius:var(--tl-r-pill);box-shadow:var(--tl-glow-yellow);transition:.15s;white-space:nowrap}
.nav-create:hover{background:var(--tl-yellow-soft)}
/* Event page loads eventmie's Bootstrap theme, which sets data-bs-theme="dark"
   on <html> and paints every plain <a> with `color:var(--bs-body-color)!important`.
   That washes out this yellow button's dark text + icon. Re-assert the ink with a
   selector that outranks the eventmie rule (mirrors its :not() chain, scoped here). */
[data-bs-theme="dark"] a.nav-create:not(.btn):not(.nav-link):not(.dropdown-item):not(.footer-link),
[data-bs-theme="dark"] a.nav-create:not(.btn):not(.nav-link):not(.dropdown-item):not(.footer-link):hover{color:#161920!important}

/* Trendslive fix — keep every nav item on one line so the header row stays
   aligned (otherwise "For Organisers" wraps to two lines and misaligns). */
.nav .nav-links a{white-space:nowrap}
.nav .nav-in{flex-wrap:nowrap}

/* Desktop dropdowns for header items with children (#menu-header). */
.nav-links .nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: none; min-width: 190px;
  flex-direction: column; padding: 6px; border-radius: var(--tl-r-md);
  background: var(--tl-surface-2, #14161c); border: 1px solid var(--tl-border, rgba(255,255,255,.09));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.nav-links .nav-drop:hover .nav-drop-menu,
.nav-links .nav-drop:focus-within .nav-drop-menu { display: flex; }
.nav-links .nav-drop-menu a { padding: 8px 10px; border-radius: var(--tl-r-sm, 8px); white-space: nowrap; }
.nav-links .nav-drop-menu a:hover { background: var(--tl-surface-3, rgba(255,255,255,.06)); }

/* Mobile menu — hamburger + off-canvas drawer (mirrors dashboard shell). */
.nav-menu-btn { display: none; flex: none; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: var(--tl-scrim, rgba(20,20,18,.45));
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--tl-ease, ease);
}
.nav-scrim.show { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 210;
  width: min(288px, 88vw);
  display: flex; flex-direction: column;
  background: var(--tl-bg);
  border-right: 1px solid var(--tl-border);
  box-shadow: var(--tl-shadow-lg);
  transform: translateX(-100%);
  transition: transform .24s var(--tl-ease, ease);
  padding: 16px 14px 18px;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px 4px 14px;
  border-bottom: 1px solid var(--tl-border);
  margin-bottom: 14px;
}
.nav-drawer-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--tl-surface-2); border: 1px solid var(--tl-border);
  border-radius: var(--tl-r-pill); padding: 10px 14px;
  color: var(--tl-fg-4); font-size: 13px; margin-bottom: 12px;
}
.nav-drawer-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--tl-fg); font-size: 13px;
}
.nav-drawer-links {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 0;
}
.nav-drawer-links > a,
.nav-drawer-links .nav-drop > a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px; border-radius: var(--tl-r-md);
  font-size: 15px; font-weight: 500; color: var(--tl-fg-2);
}
.nav-drawer-links > a:hover,
.nav-drawer-links .nav-drop > a:hover { color: var(--tl-fg); background: var(--tl-surface-2); }
.nav-drawer-links > a.on,
.nav-drawer-links .nav-drop > a.on {
  color: var(--tl-yellow-ink);
  background: rgba(249,235,6,.10);
}
.nav-drawer .nav-drop { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer .nav-drop > a svg { margin-left: auto; transform: rotate(180deg); opacity: .45; }
.nav-drawer .nav-drop-menu {
  position: static; display: flex; flex-direction: column; gap: 2px;
  min-width: 0; padding: 0 0 4px 10px; margin: 0;
  background: transparent; border: none; box-shadow: none;
}
.nav-drawer .nav-drop-menu a {
  padding: 10px 12px; font-size: 14px; color: var(--tl-fg-3); white-space: normal;
}
.nav-drawer-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--tl-border);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-drawer-account {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px; text-decoration: none; color: inherit;
}
.nav-drawer-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tl-yellow); color: #161920;
  font-family: var(--tl-font-app); font-weight: 800; flex: none;
}
.nav-drawer-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-drawer-name {
  font-family: var(--tl-font-app); font-weight: 700; font-size: 14px;
  color: var(--tl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-drawer-sub { font-size: 12px; color: var(--tl-fg-3); }
.nav-drawer-cta { width: 100%; justify-content: center; }
.nav-drawer-link {
  text-align: center; font-size: 14px; color: var(--tl-fg-2); padding: 6px;
}
.nav-drawer-link:hover { color: var(--tl-fg); }

/* Mobile — hide centre nav + search; compact the right cluster so logged-in
   headers (Create Event + avatar + logout) do not widen the page. */
@media (max-width:1080px){
  .nav-menu-btn{display:grid}
  .nav-links,.nav-search{display:none}
  .nav-in{gap:12px}
}
@media (max-width:720px){
  .nav .wrap{padding:0 16px}
  .nav-in{height:60px;gap:8px}
  .nav-right{gap:8px;min-width:0;flex-shrink:1}
  .nav-right .signin{display:none}
  .nav-create{padding:11px;gap:0}
  .nav-create .nav-create-label{display:none}
}
@media (max-width:480px){
  .nav-right a.nav-ico[title="Notifications"]{display:none}
}

/* Public homepage grids — stack on narrow viewports */
@media (max-width:900px){
  .hstats{grid-template-columns:repeat(2,1fr)}
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .venue-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .app-band{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:520px){
  .ev-grid{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:1fr 1fr}
  .city-grid{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr}
  .wrap{padding:0 16px}
}