/*
 * mTickets-style design system, ported from mtickets-backend's
 * core/templates/core/base.html (it was an inline <style> block there).
 * Depends on: Google Fonts "Inter" + Font Awesome (linked in the page head).
 */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#fafcfa; color:#1a2c1a; line-height:1.4; }
:root {
  --mt-green: rgb(53,168,57);
  --mt-green-dark: #2a7a2e;
  --mt-navy: oklch(0.35 0.08 240.87);
  --mt-soft-bg: #f8faf8;
  --mt-card-bg: #ffffff;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
/* Alias for pages that also load Tailwind (which defines its own
   .container utility) — use .mt-container there to avoid the clash. */
.mt-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1024px) { .mt-container { padding: 0 24px; } }
@media (max-width: 768px)  { .mt-container { padding: 0 16px; } }
@media (max-width: 480px)  { .mt-container { padding: 0 12px; } }

/* header transparent, sticky */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1001;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  flex-wrap:wrap;
  gap:16px;
  background:transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar.scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.8rem;
}
.logo-icon {
  background:var(--mt-green);
  width:40px;
  height:40px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:1.4rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);
}
.logo span {
  background:linear-gradient(135deg, var(--mt-navy), var(--mt-green));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

/* Header Actions - Right side */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-start-selling {
  background: var(--mt-green);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 48px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-start-selling:hover {
  background: var(--mt-green-dark);
  transform: translateY(-2px);
  color: white;
}

.btn-about {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 8px 20px;
  border-radius: 48px;
  font-weight: 600;
  color: var(--mt-navy);
  transition: all 0.25s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-about:hover {
  background: var(--mt-green);
  color: white;
  border-color: var(--mt-green);
  transform: translateY(-2px);
}

.btn-login {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 8px 22px;
  border-radius: 48px;
  font-weight: 600;
  color: var(--mt-navy);
  transition: all 0.25s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  white-space: nowrap;
}
.btn-login:hover {
  background: var(--mt-green);
  color: white;
  border-color: var(--mt-green);
  transform: translateY(-2px);
}

/* Merchant Login button - hidden on homepage by default */
.btn-merchant-login {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 8px 18px;
  border-radius: 48px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-merchant-login:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
  color: white;
}

/* hero slider full */
.hero-slider-full { position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-top:-80px; margin-bottom:60px; overflow:hidden; height:100vh; min-height:700px; }
.swiper { width:100%; height:100%; }
.swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; }
.slide-bg { width:100%; height:100%; object-fit:cover; display:block; transition:transform 6s ease-out; }
.swiper-slide-active .slide-bg { transform:scale(1.05); }
.slide-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:white; padding:0 24px; }
.slide-category { background:var(--mt-green); display:inline-block; padding:8px 28px; border-radius:60px; font-size:0.9rem; font-weight:700; letter-spacing:1px; margin-bottom:24px; box-shadow:0 6px 14px rgba(0,0,0,0.2); animation:fadeInUp 0.7s ease-out; }
.slide-overlay h2 { font-size:4rem; font-weight:800; margin-bottom:20px; max-width:80%; text-shadow:0 4px 20px rgba(0,0,0,0.4); line-height:1.2; animation:fadeInUp 0.7s ease-out 0.1s both; }
.slide-desc { font-size:1.25rem; opacity:0.95; margin-bottom:36px; max-width:55%; text-shadow:0 2px 10px rgba(0,0,0,0.3); animation:fadeInUp 0.7s ease-out 0.2s both; }
.slide-btn { background:white; color:var(--mt-navy); border:none; padding:14px 44px; border-radius:60px; font-weight:700; font-size:1rem; display:inline-flex; align-items:center; gap:12px; transition:0.25s; cursor:pointer; box-shadow:0 12px 24px rgba(0,0,0,0.2); animation:fadeInUp 0.7s ease-out 0.3s both; }
.slide-btn:hover { background:var(--mt-green); color:white; transform:translateY(-4px); }
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} }
.swiper-pagination-bullet { background:white; opacity:0.6; width:10px; height:10px; }
.swiper-pagination-bullet-active { background:var(--mt-green) !important; opacity:1; transform:scale(1.2); }

/* bottom service bar on slider - fixed to viewport so it stays visible while scrolling */
.slider-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  z-index: 900;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.slider-bottom-nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 40px;
  transition: 0.2s;
  background: rgba(255,255,255,0.05);
  border: 1px solid transparent;
  cursor: pointer;
}
.slider-bottom-nav a i { font-size: 1.2rem; }
.slider-bottom-nav a:hover { background: var(--mt-green); border-color: white; transform: translateY(-3px); }
.slider-bottom-nav a.active-nav { background: var(--mt-green); border-color: white; }

/* welcome message - centered */
.welcome-message { text-align:center; margin:30px auto 56px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.welcome-message h1 { font-size:3rem; font-weight:800; background:linear-gradient(135deg, var(--mt-navy), var(--mt-green)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.welcome-message p { font-size:1.2rem; color:#4c6a4c; max-width:680px; margin:16px auto 0; }
.section-anchor { scroll-margin-top:100px; display:block; }

/* category header */
.category-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:28px; margin-top:20px; border-bottom:2px solid #eef3ea; padding-bottom:12px; }
.category-header h2 { font-size:2rem; font-weight:700; color:var(--mt-navy); display:inline-flex; align-items:center; gap:12px; }

/* filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px; align-items:center; background:#f0f5ee; padding:12px 20px; border-radius:60px; }
.filter-bar input, .filter-bar select { border:none; background:white; padding:10px 18px; border-radius:40px; font-family:inherit; font-size:0.9rem; flex:1 1 200px; outline:1px solid #dce8da; transition:0.2s; }
.filter-bar input:focus, .filter-bar select:focus { outline:2px solid var(--mt-green); }
.filter-bar button { background:var(--mt-green); color:white; border:none; padding:10px 28px; border-radius:40px; font-weight:600; cursor:pointer; transition:0.2s; }
.filter-bar button:hover { background:var(--mt-green-dark); }

/* cards grid — matches mtickets' .event-grid-enhanced / .event-card-enhanced
   exactly (the @media overrides further down already target these same
   class names; the base rules used to be missing here, which is why those
   overrides never did anything before this). */
.event-grid-enhanced { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:32px; margin-bottom:56px; }
.event-card-enhanced { background:var(--mt-card-bg); border-radius:24px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.05); transition:all 0.3s ease; border:1px solid #eef3ea; position:relative; cursor:pointer; }
.event-card-enhanced:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(53,168,57,0.12); border-color:var(--mt-green); }
.event-card-enhanced:active { transform:scale(0.98); }

.card-image-wrapper { position:relative; overflow:hidden; }
.card-image-wrapper .event-img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform 0.5s ease; background:#eef3ea; }
.event-card-enhanced:hover .card-image-wrapper .event-img { transform:scale(1.05); }

.card-date-badge-left {
  position:absolute; top:16px; left:16px; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  color:white; padding:6px 12px; border-radius:12px; font-size:0.7rem; font-weight:600; z-index:2;
  text-align:center; line-height:1.2; border:1px solid rgba(255,255,255,0.15); min-width:48px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.card-date-badge-left .date-day { font-size:1.1rem; font-weight:800; display:block; color:#fff; }
.card-date-badge-left .date-month { font-size:0.55rem; text-transform:uppercase; opacity:0.85; display:block; letter-spacing:0.5px; color:#a0d8a0; }

.card-wishlist, .card-share {
  position:absolute; right:16px; background:rgba(255,255,255,0.9); border:none; border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all 0.2s; z-index:2; box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.card-wishlist { top:16px; }
.card-share { bottom:16px; }
.card-wishlist:hover, .card-share:hover { background:white; transform:scale(1.1); }
.card-wishlist.active i { color:#e74c3c; }
.card-wishlist i, .card-share i { color:#6e8b6e; font-size:1rem; transition:color 0.2s; }
.card-share:hover i { color:var(--mt-green); }

.event-info-enhanced { padding:20px 22px 26px; background:white; }
.event-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.event-header .event-title { flex:1; font-size:0.9rem; font-weight:600; color:#1e2a1e; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }

.event-datetime, .event-location { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:#5e7a5e; margin-bottom:4px; }
.event-datetime i, .event-location i { color:var(--mt-green); font-size:0.8rem; width:16px; }
.event-datetime .separator { color:#dce8da; margin:0 4px; }

.event-footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:12px; border-top:1px solid #eef3ea; flex-wrap:wrap; gap:8px; }
.event-availability { display:flex; align-items:center; gap:8px; font-size:0.75rem; color:#6e8b6e; }
.availability-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.availability-dot.available { background:var(--mt-green); }
.availability-dot.limited { background:#ffc107; }
.availability-dot.sold-out { background:#dc3545; }

/* travel specific */
.travel-card { background:white; border-radius:24px; padding:16px; display:flex; gap:16px; align-items:center; border:1px solid #e6f0e4; transition:0.2s; }
.travel-card:hover { border-color:var(--mt-green); box-shadow:0 8px 18px rgba(0,0,0,0.04); }
.travel-icon { background:#e9f5e8; width:56px; height:56px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--mt-green); flex-shrink:0; }
.travel-detail { flex:1; }
.travel-detail h4 { font-weight:700; font-size:1.1rem; }
.travel-detail p { color:#5e7a5e; font-size:0.9rem; }
.travel-price { font-weight:700; color:var(--mt-green); }
.travel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; margin-bottom:56px; }

/* CTA */
.cta-section { background:var(--mt-navy); border-radius:48px; margin:30px 0 70px; padding:56px 48px; text-align:center; color:white; }
.btn-cta { background:var(--mt-green); color:white; border:none; padding:14px 40px; border-radius:60px; font-weight:700; margin-top:24px; font-size:1rem; cursor:pointer; }
.btn-cta:hover { background:#3fc544; transform:scale(1.02); }

/* B2B Section Styles */
.b2b-section {
  background: linear-gradient(135deg, #1a2c1a, #2d4a2d);
  border-radius: 48px;
  padding: 56px 48px;
  margin: 30px 0 70px;
  color: white;
  position: relative;
  overflow: hidden;
}
.b2b-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(53,168,57,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.b2b-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.b2b-text h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
}
.b2b-text h2 span {
  color: var(--mt-green);
}
.b2b-text p {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 90%;
}
.b2b-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.b2b-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.b2b-feature i {
  color: var(--mt-green);
  font-size: 1.2rem;
  width: 24px;
}
.btn-b2b {
  background: var(--mt-green);
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-b2b:hover {
  background: #3fc544;
  transform: scale(1.02);
  color: white;
}
.b2b-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.b2b-stat {
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.b2b-stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--mt-green);
  display: block;
}
.b2b-stat-label {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* Footer */
footer { border-top:1px solid #e6f0e4; padding:40px 0; text-align:center; color:#6e8b6e; background:white; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-cloud9 { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#6e8b6e; transition:color 0.2s; }
.footer-cloud9 img { height:15px; width:auto; }
.footer-cloud9 span { font-weight:500; }
.footer-social { display:flex; gap:24px; flex-wrap:wrap; }
.footer-social a { color:#6e8b6e; transition:color 0.2s; font-size:1.1rem; }
.footer-social a:hover { color:#2d7d46; }
.footer-bottom { margin-top:28px; font-size:0.75rem; border-top:1px solid #ecf5ea; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.footer-legal { display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal a { color:#6e8b6e; text-decoration:none; }
.footer-legal a:hover { text-decoration:underline; }
.logo-img { height:25px; width:auto; }

/* service hide/show */
.service-section { transition: opacity 0.3s ease; }
.service-section.hidden { display: none; }

/* Currency switcher */
.currency-selector {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  padding: 6px 14px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.currency-selector option {
  background: #1a2c1a;
  color: white;
}

/* Notification styles */
.notification-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.notification-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.notification-info { background:#cce5ff; color:#004085; border:1px solid #b8daff; }
.notification-warning { background:#fff3cd; color:#856404; border:1px solid #ffc107; }

/* No results box */
.no-results-box {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid #eef3ea;
}
.no-results-box i {
  font-size: 48px;
  color: #cce0cc;
  margin-bottom: 16px;
}
.no-results-box h3 {
  color: #1a2c1a;
}
.no-results-box p {
  color: #6e8b6e;
}

/* ── Mobile Responsive Fixes ────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .hero-slider-full { height:70vh; min-height:450px; margin-top:-60px; }
  .slide-overlay h2 { font-size:2rem; max-width:95%; }
  .slide-desc { max-width:85%; font-size:1rem; }
  .welcome-message h1 { font-size:2rem; }
  .navbar { flex-direction:row; justify-content:space-between; align-items:center; padding:10px 0; }
  .header-actions { width:auto; flex-wrap:nowrap; justify-content:flex-end; gap:8px; }
  .header-actions .btn-about,
  .header-actions .btn-login { display:none; }
  .header-actions .btn-start-selling { font-size:0.75rem; padding:6px 12px; }
  .slider-bottom-nav { gap:12px; padding:10px 12px; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
  .slider-bottom-nav a { flex-shrink:0; font-size:0.75rem; padding:6px 12px; }
  .category-header { margin-bottom:8px; padding-bottom:8px; }
  .category-header h2 { font-size:1.3rem; }
  .b2b-content { grid-template-columns:1fr; }
  .b2b-features { grid-template-columns:1fr; }
  .b2b-stats { grid-template-columns:repeat(3,1fr); gap:12px; }
  .b2b-stat-number { font-size:1.8rem; }
  .b2b-section { padding:32px 24px; border-radius:32px; }
  .b2b-text p { max-width:100%; }
  /* Fix event grid on mobile */
  .event-grid-enhanced {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  .event-card-enhanced {
    border-radius: 16px !important;
  }
  .event-info-enhanced {
    padding: 14px 16px 18px !important;
  }
  /* Fix travel grid on mobile */
  .travel-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .travel-card {
    padding: 12px !important;
    gap: 12px !important;
  }
  .travel-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
  .travel-detail h4 {
    font-size: 0.9rem !important;
  }
  .travel-detail p {
    font-size: 0.75rem !important;
  }
  .travel-price {
    font-size: 0.9rem !important;
  }
  /* Fix filter bar on mobile */
  .filter-bar-enhanced {
    flex-direction: column !important;
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }
  .filter-search {
    width: 100% !important;
  }
  .filter-select {
    width: 100% !important;
    min-width: auto !important;
  }
  .filter-actions {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   B2B / "Start Selling" hero — dark gradient marketing hero
   ============================================================ */

.b2b-hero {
  background: linear-gradient(135deg, #1a2c1a 0%, #2d4a2d 50%, #1a2c1a 100%);
  padding: 80px 0 60px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
  border-radius: 0 0 48px 48px;
}
.b2b-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(53,168,57,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.b2b-hero .mt-container { position: relative; z-index: 1; }
.b2b-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 16px; }
.b2b-hero h1 span { color: var(--mt-green); }
.b2b-hero p { font-size: 1.15rem; opacity: 0.85; max-width: 600px; margin: 0 auto 32px; line-height: 1.6; }

.b2b-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn-hero-primary {
  background: var(--mt-green);
  color: white;
  border: none;
  padding: 14px 40px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hero-primary:hover { background: #3fc544; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(53,168,57,0.4); color: white; }

.btn-hero-secondary {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 40px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); color: white; }

.b2b-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.b2b-hero-stat { text-align: center; }
.b2b-hero-stat-number { font-size: 2.2rem; font-weight: 800; color: var(--mt-green); display: block; }
.b2b-hero-stat-label { font-size: 0.85rem; opacity: 0.7; margin-top: 4px; }

.b2b-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 56px;
}
.b2b-feature-card {
  background: white;
  border: 1px solid #eef3ea;
  border-radius: 24px;
  padding: 28px;
  transition: all 0.25s;
}
.b2b-feature-card:hover { border-color: var(--mt-green); box-shadow: 0 15px 30px -12px rgba(0,0,0,0.06); transform: translateY(-4px); }
.b2b-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #e9f5e8;
  color: var(--mt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.b2b-feature-card h3 { font-size: 1.1rem; font-weight: 700; color: #1a2c1a; margin-bottom: 8px; }
.b2b-feature-card p { font-size: 0.9rem; color: #6e8b6e; line-height: 1.5; }

@media (max-width: 768px) {
  .b2b-hero { padding: 56px 0 40px; border-radius: 0 0 32px 32px; }
  .b2b-hero h1 { font-size: 2rem; }
  .b2b-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .b2b-hero-stat-number { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .navbar { gap:6px; padding:6px 0; }
  .header-actions { gap:4px; }
  .header-actions .btn-start-selling { font-size:0.7rem; padding:5px 10px; }
  .header-actions .btn-merchant-login { font-size:0.7rem; padding:5px 10px; }
  .slider-bottom-nav { gap:6px; padding:8px 10px; }
  .slider-bottom-nav a { font-size:0.65rem; padding:4px 8px; }
  .slider-bottom-nav a i { font-size:0.8rem; }
  .b2b-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
  .b2b-stat-number { font-size:1.3rem; }
  .welcome-message h1 { font-size:1.4rem; }
  .welcome-message p { display: none; }
  .slide-overlay h2 { font-size:1.4rem; }
  .category-header h2 { font-size:1.1rem; }
  .event-card-enhanced .event-title { font-size:0.9rem !important; }
  .event-datetime { font-size:0.7rem !important; flex-wrap:wrap; }
  .event-location { font-size:0.7rem !important; }
  .event-availability { font-size:0.65rem !important; }
  .card-date-badge-left {
    padding: 3px 8px !important;
    min-width: 32px !important;
    font-size: 0.6rem !important;
  }
  .card-date-badge-left .date-day { font-size:0.8rem !important; }
  .card-date-badge-left .date-month { font-size:0.45rem !important; }
  .footer-top { flex-direction:column; text-align:center; gap:12px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:8px; }
  .footer-social { justify-content:center; }
}

/* ============================================================
   "Start Selling" hero — dark gradient marketing hero for the
   organizer-facing pitch page
   ============================================================ */

.b2b-hero {
  background: linear-gradient(135deg, #1a2c1a 0%, #2d4a2d 50%, #1a2c1a 100%);
  padding: 80px 0 60px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
  border-radius: 0 0 48px 48px;
}
.b2b-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(53,168,57,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.b2b-hero .mt-container { position: relative; z-index: 1; }
.b2b-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 16px; }
.b2b-hero h1 span { color: var(--mt-green); }
.b2b-hero p { font-size: 1.15rem; opacity: 0.85; max-width: 600px; margin: 0 auto 32px; line-height: 1.6; }

.b2b-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn-hero-primary {
  background: var(--mt-green);
  color: white;
  border: none;
  padding: 14px 40px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hero-primary:hover { background: #3fc544; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(53,168,57,0.4); color: white; }

.btn-hero-secondary {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 40px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); color: white; }

.b2b-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.b2b-hero-stat { text-align: center; }
.b2b-hero-stat-number { font-size: 2.2rem; font-weight: 800; color: var(--mt-green); display: block; }
.b2b-hero-stat-label { font-size: 0.85rem; opacity: 0.7; margin-top: 4px; }

.b2b-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 56px;
}
.b2b-feature-card {
  background: white;
  border: 1px solid #eef3ea;
  border-radius: 24px;
  padding: 28px;
  transition: all 0.25s;
}
.b2b-feature-card:hover { border-color: var(--mt-green); box-shadow: 0 15px 30px -12px rgba(0,0,0,0.06); transform: translateY(-4px); }
.b2b-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #e9f5e8;
  color: var(--mt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.b2b-feature-card h3 { font-size: 1.1rem; font-weight: 700; color: #1a2c1a; margin-bottom: 8px; }
.b2b-feature-card p { font-size: 0.9rem; color: #6e8b6e; line-height: 1.5; }

@media (max-width: 768px) {
  .b2b-hero { padding: 56px 0 40px; border-radius: 0 0 32px 32px; }
  .b2b-hero h1 { font-size: 2rem; }
  .b2b-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .b2b-hero-stat-number { font-size: 1.5rem; }
}