.hero.minimal-hero {
  padding: 48px 0;
}
.hero .lead {
  max-width: 48ch;
}

section.feature { padding: 48px 0; margin: 2em 0 }

/* Mosaic grid for image columns */
/* .mosaic { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 70px; 
  gap: 8px; 
}
.mosaic img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 8px; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  animation: floatY 9s ease-in-out infinite;
}

.mosaic.variant-1 img:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.mosaic.variant-1 img:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.mosaic.variant-1 img:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.mosaic.variant-1 img:nth-child(4) { grid-column: span 2; grid-row: span 1; }

.mosaic.variant-2 img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic.variant-2 img:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.mosaic.variant-2 img:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.mosaic.variant-2 img:nth-child(4) { grid-column: span 2; grid-row: span 1; }

.mosaic.variant-3 img:nth-child(1) { grid-column: span 2; grid-row: span 1; }
.mosaic.variant-3 img:nth-child(2) { grid-column: span 1; grid-row: span 2; }
.mosaic.variant-3 img:nth-child(3) { grid-column: span 3; grid-row: span 2; }
.mosaic.variant-3 img:nth-child(4) { grid-column: span 2; grid-row: span 1; } */

.mosaic {
  display: grid;
  gap: 8px;
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* 1 image */
.mosaic.count-1 {
  grid-template-columns: 1fr;
}

/* 2 images side by side */
.mosaic.count-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 images: 1 big on left, 2 stacked right */
.mosaic.count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}
.mosaic.count-3 img:nth-child(1) {
  grid-row: 1 / span 2;
}
.mosaic.count-3 img:nth-child(2) {
  grid-row: 1;
}
.mosaic.count-3 img:nth-child(3) {
  grid-row: 2;
}

/* 4 images: 2x2 grid */
.mosaic.count-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}


/* Subtle motion */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.mosaic img:hover { transform: scale(1.03); transition: transform .25s ease; }

/* Feature content */
.feature h2 { margin-bottom: 8px; }
.feature p { color: #333; }
.feature ul { margin-top: 12px; }
.feature ul li { margin-bottom: 6px; }

/* Capabilities grid */
.capabilities { padding: 56px 0; }
.capabilities h2 { text-align:center; margin-bottom: 24px; }
.feature-card { 
  background: #fff; 
  border: 1px solid rgba(0,0,0,0.06); 
  border-radius: 12px; 
  padding: 16px; 
  margin-bottom: 24px; 
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.icon-placeholder { 
  width: 48px; height: 48px; border-radius: 12px; 
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  margin-bottom: 12px; 
}

/* Mega menu */
.navbar .dropdown:hover > .dropdown-menu { display:block; }
.dropdown-menu.mega-menu { 
  width: clamp(960px, 88vw, 1280px);
  max-width: none;
  left: 25%; transform: translateX(-25%);
  padding: 24px; 
  background: linear-gradient(180deg, #fff, #f9fafb);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 56px rgba(0,0,0,0.14);
  border-radius: 12px;
  z-index: 1000;
  backdrop-filter: saturate(1.1) blur(6px);
}
/* .mega-menu .row { gap: 16px; } */
.mega-menu .col-md-3 { padding: 10px 14px; border-left: 1px solid rgba(0,0,0,0.06); transition: background .2s ease, transform .2s ease; }
.mega-menu .col-md-3:first-child { border-left: none; }
.mega-menu .col-md-3:hover { background: rgba(255,255,255,0.85); border-radius: 10px; transform: translateY(-2px); }
.mega-menu h4 { font-weight: 700; color: #111; letter-spacing: .2px; }
.mega-menu ul li a { color: #0f172a; }
.mega-menu ul li a:hover { color: #ff6a57; text-decoration: none; }
.mega-menu .desc { font-size: 13px; color: #666; margin-top: 4px; }
.navbar .dropdown > a { position: relative; }
.navbar .dropdown > a::after { content: "▾"; margin-left: 6px; font-size: 12px; }
.mega-menu ul { padding-left: 0; list-style: none; }
.mega-menu ul li a { display: block; padding: 6px 0; color: #111; }

/* Responsive adjustments */
@media (max-width: 767px) {
  .dropdown-menu.mega-menu { width: 100%; max-width: 100%; left: 0; transform: none; padding: 16px; }
}
.mega-menu .desc { font-size: 13px; color: #666; margin-top: 4px; }

/* Device frames and stacks */
.device-stack { position: relative; min-height: 320px; }
.device-frame { background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); overflow: hidden; }
.device-frame.browser { border: 1px solid rgba(0,0,0,0.08); }
.device-frame.browser .device-bar { height: 36px; background: #f7f7f7; border-bottom: 1px solid rgba(0,0,0,0.08); }
.device-frame.browser img { display:block; width:100%; height:auto; }
.device-frame.phone { width: 160px; border: 10px solid #111; border-radius: 24px; position: absolute; right: -16px; bottom: -24px; }
.device-frame.phone img { width:100%; height:auto; display:block; border-radius: 14px; }
.device-frame.phone.alt { right: auto; left: -16px; bottom: -16px; }
.phone-gallery { display: flex; gap: 24px; justify-content: center; align-items: flex-start; }
.device-frame.phone.tall { position: relative; right:auto; left:auto; bottom:auto; width: 220px; border: 10px solid #111; border-radius: 24px; overflow: hidden; }
.device-frame.phone.tall img { display:block; width:100%; height:auto; object-fit: contain; }
@media (max-width: 767px) {
  .phone-gallery { gap: 12px; }
  .device-frame.phone.tall { width: 180px; }
}
.device-frame.phone.alt { right: auto; left: -16px; bottom: -16px; }

/* Badge strip */
.badge-strip { display:flex; gap:16px; align-items:center; padding: 16px 0; flex-wrap: wrap; }
.badge { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:999px; padding:8px 14px; font-size:13px; color:#333; box-shadow:0 8px 16px rgba(0,0,0,0.06); }

/* Testimonial */
.testimonial { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.06); margin: 24px 0; }
.testimonial .quote { font-size:16px; color:#222; }
.testimonial .author { margin-top:8px; color:#666; font-size:13px; }

/* FAQ accordion using native details */
.faq { padding: 24px 0; }
.faq details { border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:12px 12px; margin-bottom:8px; background:#fff; }
.faq summary { cursor:pointer; font-weight:600; }
.faq details[open] { box-shadow:0 8px 24px rgba(0,0,0,0.06); }

/* Related content cards */
.related-cards .card { border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.related-cards .card h4 { margin-bottom:6px; }

/* CTA banner */
.cta-banner { background: linear-gradient(135deg, #ff6a57, #ff9075); color:#fff; padding: 48px 0; text-align:center; border-radius: 12px; }
.cta-banner .btn { background:#fff; color:#111; border:none; }
.hero.premium-hero { background: linear-gradient(135deg, #f8fafc, #ffffff); border-bottom: 1px solid rgba(0,0,0,0.06); }
.hero .kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.hero .cta-group { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* Responsive adjustments */
@media (max-width: 767px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }
  .dropdown-menu.mega-menu { max-width: 100%; left: 0; transform: none; }
  .device-frame.phone { position: relative; right: auto; left: auto; bottom: auto; margin-top: 12px; width: 180px; }
}

.spacious{margin: 2em 0}

/* Improve mosaic image rendering for feature zig-zags */
.feature .mosaic { gap: 10px; }
.feature .mosaic img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  background: #fafafa;
  box-shadow: 0 4px 22px rgba(0,0,0,0.06);
}
/* Prefer wide 16:9 for virtual event/lobby and registration screenshots */
.feature .mosaic.variant-2 img,
.feature .mosaic.variant-1 img {
  aspect-ratio: 16 / 9;
}
@media (max-width: 768px) {
  .feature .mosaic.variant-2 img,
  .feature .mosaic.variant-1 img {
    aspect-ratio: 4 / 3;
  }
}

/* Capability cards: icon styling */
.feature-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f7fb, #ffffff);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--primary-color, #4f46e5);
}
.feature-card .icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optional: tighten spacing inside feature sections */
.feature .mosaic {
  gap: 12px;
}

@media (max-width: 768px) {
  .feature .mosaic img {
    aspect-ratio: 16 / 9;
  }
}
/* Browser-style gallery for professional screenshot presentation */
.browser-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.browser-gallery .device-frame.browser {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.browser-gallery .device-frame.browser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 768px) {
  .browser-gallery {
    grid-template-columns: 1fr;
  }
  .browser-gallery .device-frame.browser img {
    aspect-ratio: 4 / 3;
  }
}

/* Additional professional styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #ff6a57;
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #ff5242;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 87, 0.3);
}

.btn-outline-primary {
  background: transparent;
  color: #ff6a57;
  border: 2px solid #ff6a57;
}

.btn-outline-primary:hover {
  background: #ff6a57;
  color: white;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

h1, h2, h3 {
  font-weight: 700;
  color: #111;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

.hero .lead {
  font-size: 1.25rem;
  color: #4b5563;
  line-height: 1.6;
}

.feature h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.feature ul {
  list-style: none;
  padding-left: 0;
}

.feature ul li {
  padding: 8px 0 8px 28px;
  position: relative;
}

.feature ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #ff6a57;
  font-weight: bold;
}

.capabilities h2,
.faq h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.faq details p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero .lead {
    font-size: 1rem;
  }
  
  .feature h2 {
    font-size: 1.5rem;
  }
  
  .capabilities h2,
  .faq h2 {
    font-size: 1.8rem;
  }
}