.hero-inspired{
      position:relative;
      --bg:url('https://ozelyt.com/ozelyt-nutrition-wellness.jpg'); 
      background: var(--bg) no-repeat center right/cover;
      min-height: 68vh;
      display:flex;
      align-items:center;
      color:#fff;
      isolation:isolate;
    }
    .hero-inspired::before{
      content:""; position:absolute; inset:0; z-index:0;
      background:
        linear-gradient(90deg, rgba(10,18,40,.80) 0%, rgba(10,18,40,.55) 35%, rgba(10,18,40,.20) 60%, rgba(10,18,40,0) 85%);
    }
    .hero-inspired .wrap{
      position:relative; z-index:1;
      max-width:1200px; margin:0 auto; padding:0 20px; width:100%;
    }
    .hero-inspired .content{
      max-width: 620px; 
    }
    .hero-inspired .eyebrow{
      font-weight:600; opacity:.9; letter-spacing:.3px; margin-bottom:10px;
      font-size:1rem; color:#e6ecff;
    }
    .hero-inspired h1{
      font-size: clamp(36px, 6vw, 64px);
      line-height:.98 !important; margin-bottom:6px !important;
      text-wrap: balance;
    }
    .hero-inspired .lead{
      font-size: clamp(16px, 2.1vw, 20px); 
      color:#dbe7ff; margin:0 0 28px;
      line-height:1.35 !important; margin-bottom:16px !important; max-width:46ch !important;
    }

    .hero-inspired .cta{ display:flex; gap:14px; flex-wrap:wrap; }
    .hero-inspired .btn{
      display:inline-block; padding:14px 22px; border-radius:12px; 
      font-weight:800; letter-spacing:.2px; text-decoration:none; 
      transition:.2s ease; will-change: transform, background, color, border-color;
    }
    :root{
      --accent:#e64aa6; --accent-dark:#c12f89; 
    }
    .hero-inspired .btn--primary{
      background:var(--accent); color:#fff; border:2px solid var(--accent);
    }
    .hero-inspired .btn--primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-1px); }
    .hero-inspired .btn--ghost{
      background:transparent; color:#fff; border:2px solid #fff;
    }
    .hero-inspired .btn--ghost:hover{ background:#fff; color:#0b1428; transform:translateY(-1px); }

    .hero-inspired .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
    .hero-inspired .chip{
      display:inline-flex; align-items:center; gap:8px; 
      padding:8px 12px; border-radius:999px; font-weight:700; font-size:.9rem;
      background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#eaf2ff;
    }
    .hero-inspired .dot{ width:10px; height:10px; border-radius:999px; background:#61d095; }

    @media (max-width: 980px){
      .hero-inspired{ background-position: 70% center; min-height: 64vh; }
    }
    @media (max-width: 720px){
      .hero-inspired{ background-position: 60% center; padding: 72px 0; }
      .hero-inspired .content{ max-width: 100%; }
      .hero-inspired .cta{ justify-content:flex-start; }
    }
@media (max-width: 860px){
  .hero-inspired{
    min-height: 90vh;            
    display: flex;
    align-items: flex-start;        
  }

  .hero-inspired .wrap{
    width: 100%;
  }

  .hero-inspired .content{
    margin-top: 22vh;              
    padding-bottom: 24px;
  }
}
@media (min-width: 1024px) and (max-width: 1366px){
  .hero-inspired .chips{
    margin-bottom: 48px; 
  }
}
@media (min-width: 1024px) and (max-width: 1366px){
  .hero-inspired .eyebrow{
    margin-top: 46px; 
  }
}