/* IDEA PLATFORM RESPONSIVE FIXES - 2026-04-19 */
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;}
@media (min-width:1024px){
  #projects .row,.projects-grid,.product-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;}
}
@media (min-width:769px) and (max-width:1023px){
  #projects .row,.projects-grid,.product-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;}
}
@media (max-width:768px){
  #projects .row,.projects-grid,.product-grid{display:flex!important;flex-direction:column!important;gap:16px!important;padding:0 12px!important;}
  #idea-disclaimer-banner{font-size:12px!important;padding:10px 14px!important;line-height:1.7!important;}
  #po-legend{flex-direction:column!important;gap:8px!important;}
}
.refund-note{font-size:11px;color:#6B7280;text-align:center;margin-top:4px;display:block;}
.delivery-badge{display:inline-block;background:#E8F3EC;color:#065F46;font-size:11px;padding:2px 10px;border-radius:20px;margin:4px 0;font-weight:500;}
.terms-check{margin:8px 0;font-size:12px;color:#555;display:flex;align-items:flex-start;gap:6px;}
.preorder-notice{background:#FFFBEA;border:1px solid #FCD34D;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:13px;color:#92400E;line-height:1.6;}
#idea-disclaimer-banner{background:#FFFBEA;color:#92400E;font-size:13px;text-align:center;padding:9px 20px;border-bottom:1px solid #FCD34D;line-height:1.6;}


/* ============================================
   MOBILE NAV + HERO FIXES — based on screenshot
   ============================================ */

@media (max-width: 768px) {

  /* FIX 1 — Navbar: prevent overflow, stack properly */
  .navbar,
  nav.navbar {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    position: relative !important;
  }

  /* Logo left, toggle right — clean row */
  .navbar-brand {
    max-width: 55% !important;
    overflow: hidden !important;
  }

  .navbar-brand img {
    max-height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* "Backed by 3D-LABS" — hide on mobile to save space */
  .navbar .backed-by,
  .navbar a[href*="3d-labs.com"]:not(.navbar-brand),
  .navbar img[alt*="3D-Labs"],
  .navbar img[alt*="3d-labs"] {
    display: none !important;
  }

  /* FIX 2 — "Bring Your Idea to Market" button
     Move it out of the navbar on mobile — show below nav */
  .navbar .btn[href*="forcreators"],
  .navbar a[href*="forcreators"] {
    display: none !important;
  }

  /* Show it again as a full-width bar below nav */
  body::after {
    content: "Bring Your Idea to Market \2192";
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #F26522 !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    letter-spacing: .02em !important;
  }

  /* Dark mode toggle — push to its own space */
  .dark-mode-toggle,
  button[aria-label*="dark"],
  button[aria-label*="theme"],
  .theme-toggle {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* FIX 3 — Hero headline font size */
  .hero-section h1,
  .hero h1,
  section.hero h1,
  [class*="hero"] h1,
  [class*="banner"] h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  /* Hero subtitle readable */
  .hero-section p,
  .hero p,
  [class*="hero"] p,
  [class*="banner"] p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
    font-style: normal !important;
  }

  /* FIX 4 — Hero section proper height so both buttons visible */
  .hero-section,
  section.hero,
  [class*="hero-section"],
  [class*="banner-section"] {
    min-height: auto !important;
    padding: 60px 20px 50px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* FIX 5 — Both CTA buttons visible and full width */
  .hero-section .btn,
  .hero .btn,
  [class*="hero"] .btn,
  [class*="hero"] a[href] {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 6px auto !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* FIX 6 — Disclaimer banner visible and readable */
  #idea-disclaimer-banner {
    font-size: 12px !important;
    padding: 10px 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    display: block !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  /* FIX 7 — Hero text shadow for contrast over video */
  .hero-section h1,
  .hero h1 {
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

}