:root{--brand:#0ea5e9;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.hero{background:linear-gradient(135deg,var(--brand),#111);color:#fff;padding:5rem 0}
.hero h1{font-weight:800;letter-spacing:.3px}
.subhero{background:linear-gradient(135deg,#0ea5e9,#111)}
.subhero .h4{font-weight:700}
.icon-bullet{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}
.icon-bullet i{font-size:1.1rem;margin-top:.2rem}
.card-soft{border:1px solid #eee;border-radius:1rem;box-shadow:0 8px 28px rgba(0,0,0,.05)}
.placeholder{background:#f3f4f6;border:1px dashed #d1d5db;border-radius:.5rem;min-height:180px}
.placeholder-img{background:#f3f4f6;border:2px dashed #d1d5db;border-radius:.75rem;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#6b7280;transition:all .2s}
.placeholder-img:hover{border-color:#0ea5e9;background:#f0f9ff}
.placeholder-img i{font-size:2rem;margin-bottom:.5rem;color:#9ca3af}
.placeholder-img p{margin:0;font-size:.875rem}
.placeholder-screenshot{min-height:280px}
@media(max-width:991.98px){.placeholder-screenshot{min-height:220px}}
@media(max-width:575.98px){.placeholder-screenshot{min-height:180px}}
.team-card{text-align:center;padding:1.5rem}
.team-avatar{width:120px;height:120px;border-radius:50%;background:#e5e7eb;border:3px dashed #d1d5db;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:#9ca3af;transition:all .2s}
.team-avatar:hover{border-color:#0ea5e9;background:#f0f9ff}
.team-avatar i{font-size:2.5rem}
@media(max-width:575.98px){.team-avatar{width:100px;height:100px}.team-avatar i{font-size:2rem}}
.badge-beta{background:#111;color:#fff;border:1px solid #333}
.feature-card{flex-direction: row;}

/* GLightbox screenshot hover effect */
.screenshot-hover{transition:transform .3s ease,box-shadow .3s ease;cursor:zoom-in}
.screenshot-hover:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.15)}
.glightbox{display:block}

/* Responsive Typography (Mobile-First) */
h1,.display-5{font-size:1.75rem;line-height:1.2}
h2{font-size:1.5rem}
.lead{font-size:1.3rem;font-weight:bold}

@media(min-width:576px){
  h1,.display-5{font-size:2rem}
  h2{font-size:1.625rem}
}
@media(min-width:768px){
  h1,.display-5{font-size:2.25rem}
  h2{font-size:1.75rem}
}
@media(min-width:992px){
  h1,.display-5{font-size:2.5rem}
  h2{font-size:2rem}
}
@media(min-width:1200px){
  h1,.display-5{font-size:3rem}
}

/* Hero Section Responsive Padding */
.hero{padding:2.5rem 0}
@media(min-width:576px){.hero{padding:3rem 0}}
@media(min-width:768px){.hero{padding:4rem 0}}
@media(min-width:992px){.hero{padding:5rem 0}}

/* Mobile Section & Component Adjustments */
@media(max-width:575.98px){
  section.py-5{padding-top:2rem !important;padding-bottom:2rem !important}
  .container{padding-left:1rem;padding-right:1rem}
  .btn-lg{padding:.625rem 1.25rem;font-size:.9375rem}
  .bg-light.p-5{padding:1.5rem !important}
  .subhero .h4{font-size:1.125rem}
  footer{padding-top:2rem !important;padding-bottom:2rem !important}
}

/* Very small screens - stack buttons */
@media(max-width:400px){
  .hero .d-flex.gap-2{flex-direction:column;width:100%}
  .hero .btn-lg{width:100%}
}

/* Navbar Responsive */
@media(max-width:991.98px){
  .navbar-brand img{height:80px !important}
  .navbar .btn{width:100%;margin-top:.5rem}
}
@media(max-width:575.98px){
  .navbar-brand img{height:60px !important}
}

/* Accessibility: Improve contrast for outline buttons on light backgrounds */
.bg-light .btn-outline-primary{
  --bs-btn-color:#0369a1;
  --bs-btn-border-color:#0369a1;
  --bs-btn-hover-bg:#0369a1;
  --bs-btn-hover-border-color:#0369a1;
}

/* Accessibility: Ensure card titles have sufficient contrast */
.card-title{color:#1e293b}

/* Mobile Lightbox - Simple overlay with native zoom */
.mobile-lightbox{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100vh !important;
  background:rgba(0,0,0,.95) !important;
  z-index:999999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:60px 15px 15px !important
}
.mobile-lightbox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  touch-action:pinch-zoom
}
.mobile-lightbox-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  background:#fff !important;
  border:none !important;
  border-radius:50% !important;
  font-size:28px !important;
  font-weight:bold !important;
  line-height:50px !important;
  text-align:center !important;
  color:#000 !important;
  cursor:pointer !important;
  z-index:10000000 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.5) !important;
  padding:0 !important;
  margin:0 !important;
  -webkit-appearance:none !important;
  appearance:none !important
}
.mobile-lightbox-open{
  overflow:hidden !important
}

/* GLightbox Navigation - Maximum specificity overrides */
#glightbox-body .gprev,
#glightbox-body .gnext,
.glightbox-container .gprev,
.glightbox-container .gnext{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:50px !important;
  height:50px !important;
  background:rgba(255,255,255,.95) !important;
  border-radius:50% !important;
  box-shadow:0 4px 15px rgba(0,0,0,.5) !important;
  z-index:999999 !important;
  align-items:center !important;
  justify-content:center !important
}
#glightbox-body .gprev,
.glightbox-container .gprev{left:15px !important;right:auto !important}
#glightbox-body .gnext,
.glightbox-container .gnext{right:15px !important;left:auto !important}
#glightbox-body .gprev svg,
#glightbox-body .gnext svg,
.glightbox-container .gprev svg,
.glightbox-container .gnext svg{width:22px !important;height:22px !important}
#glightbox-body .gprev path,
#glightbox-body .gnext path,
.glightbox-container .gprev path,
.glightbox-container .gnext path{fill:#333 !important}
#glightbox-body .gclose,
.glightbox-container .gclose{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  width:48px !important;
  height:48px !important;
  background:rgba(0,0,0,.8) !important;
  border-radius:50% !important;
  top:15px !important;
  right:15px !important;
  z-index:999999 !important;
  align-items:center !important;
  justify-content:center !important
}
#glightbox-body .gclose svg,
.glightbox-container .gclose svg{width:20px !important;height:20px !important}
#glightbox-body .gclose path,
.glightbox-container .gclose path{fill:#fff !important}

/* Mobile: Large bottom nav buttons */
@media(max-width:768px){
  #glightbox-body .gprev,
  #glightbox-body .gnext,
  .glightbox-container .gprev,
  .glightbox-container .gnext{
    top:auto !important;
    bottom:25px !important;
    transform:none !important;
    width:64px !important;
    height:64px !important;
    box-shadow:0 4px 20px rgba(0,0,0,.6) !important
  }
  #glightbox-body .gprev,
  .glightbox-container .gprev{left:calc(50% - 80px) !important}
  #glightbox-body .gnext,
  .glightbox-container .gnext{right:calc(50% - 80px) !important}
  #glightbox-body .gclose,
  .glightbox-container .gclose{
    width:52px !important;
    height:52px !important;
    top:15px !important;
    right:15px !important
  }
  #glightbox-body .gprev svg,
  #glightbox-body .gnext svg,
  .glightbox-container .gprev svg,
  .glightbox-container .gnext svg{width:28px !important;height:28px !important}
}